博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web安全学习笔记(六):JavaScript基础
阅读量:5320 次
发布时间:2019-06-14

本文共 3106 字,大约阅读时间需要 10 分钟。

----------------开始----------------

0x01:前言

        这两天都没整理笔记,原因多半在于我不知道该怎么整理关于编程语言的笔记,这方面薄弱。所以想了想,决定就将一些基本的整理进来,这其中不包括语法的使用,我所谓的基本,而是JavaScript在web中充当的角色,以及JavaScript的一些基本工作。

        这两天在看《SQL注入攻击与防御》感觉真的挺不错的,等我先看一遍,等到整理sql注入方面的笔记的时候,我在复习一遍,到时理解的深了,也多发一些个人理解的干货。

 

----------------正题----------------

●JavaScript:

        网页有三剑客:html,css,JavaScript,前面整理了HTML,今天来整理JavaScript。对于css,就决定不整理了。下面简单说下各个语言的职责:

        ●HTML:定义了网页的内容

        ●CSS:描述了网页的布局

        ●JavaScript:描述了针对网页的一些行为

        他们各司其职,相互搭配工作,才展现了一个完美的网页。

 

JavaScript可以运行的地方:

    ●HTML中的<script>...</script>标签之内

    ●HTML的事件属性中,如onclick,onerror......

    ●Chrome浏览器的console控制台中

 

一.JavaScript DOM:获取控制HTML元素内容            

        首先,HTML DOM 即为文档对象模型(Document Object Model)

 

HTML DOM树:

 

JavaScript有足够的能力创建动态的HTML:

  • ○JavaScript 能够改变页面中的所有 HTML 元素

  • ○JavaScript 能够改变页面中的所有 HTML 属性

  • ○JavaScript 能够对页面中的所有事件做出反应

 

 

●举个简单的实例:

    ○getElementById():返回选中指定id的第一个对象

    ○.innerHTML(="你想要替换更改的内容"):获取元素的内容,也可以更改内容

   通过下面两张图可以看出来如果具体操从html元素的内容的:

 

        首先,JavaScript运行在了<script>标签内,然后简单的创建了一个函数,函数的内容即是通过选中<p>标签中的id,然后改变其元素内容,最后在下面创建了一个<button>标签,其中有个事件属性onclick,如果点击上面按钮,即运行上面创建的JavaScript函数。

 

document.getElementById("id名称").innerHTML(="你想要替换更改的内容")

 

DOM document对象方法:

    可以尝试在Chrome浏览器开发者工具中的console下使用这些对象方法,观察现象,亦或者尝试操纵一下网页下的一些元素。

 

○document.write("随便写点什么"):直接在浏览器上显示write中写的内容。可写入html表达式或JavaScript代码。

○document.cookie(="自己想写入的值"):显示当前页面的cookie值,或是将自己想要写入的值,写进cookie中。

○document.getElementsByName():返回带有指定名称的对象集合。

○document.getElementsByTagName():返回带有指定标签名的对象集合

○document.open():打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。

○document.close():关闭用 document.open() 方法打开的输出流,并显示选定的数据

○document.writeln():等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

 

二.JavaScript BOM:获取浏览器信息,操作浏览器

        首先,BOM 即为浏览器对象模型(Browser Object Model),让JavaScript对有了一些操作浏览器的能力。

 

一些方法:

○window.alert():警告弹窗,警告内容即为写入的内容

○window.comfirm():确认弹窗

○window.prompt():提示弹窗

○window.screen:获取浏览器屏幕信息

○window.location(.href="想要打开的网站地址"):获取/控制用户页面的URL

○window.navigator:获取访问者浏览器信息

○window.open/close("想要打开/关闭的url"):操作浏览器窗口

 

三.其他一些知识点:

 

①.JavaScript全局函数:

○decodeURI():解码某个编码的URI

○decodeURIComponet():解码一个编码的URI组件

○encodeURI():把字符串编码为URI

○encodeURIComponet():把字符串编码为URI组件

○escape():把字符串进行编码

○eval():计算JavaScript字符串,并把它作为脚本代码来执行

○getClass():返回一个JavaObject的JavaClass

○isFinite():检查某个值是否为有穷大的数

○isNaN():检查某个值是否为数字

○Number():把对象的值转换为数字

○String():把对象的值转换为字符串

○parseFloat():解析一个字符串并返回一个浮点数

○parseInt():解析一个字符串并返回一个整数

○Unescape():对有escape()编码的字符串进行解码

 

.JavaScript全局属性:

○Infinity:代表整的无穷大的数值

○java:代表java.*包层级的一个JavaPackage

○NaN:指示某个值不是数字值

○Packages:根JavaPackage对象

○undefined:指示未定义的值

 

.JSON的基本知识:

 

●JSON:JavaScript对象表示方法(JavaScript Object Notation)。

●JSON是一种轻量级的数据交换格式。

●JSON文件的类型是:".json"。

●JSON文本的MIME类型是:"application/json"。

●JSON语法规则:

    ○数据在 "名称/值" 对中   ---->   "name":"7089bat"

    ○数据由逗号隔开

    ○花括号保存对象:{ }

    ○方括号保存数组:[ ]

●JSON值:

    ○数字(整数或浮点数)

    ○字符串(在双引号中)

    ○逻辑值(true或false)

    ○数组  [在方括号内] ---> 可以包含多个对象

    ○对象  {在花括号内} ---> {"myName":"7089bat","age":"99"}

    ○NULL

 

.JSONP:

        JSONP(Json with Padding):是一种"使用模式",可以让网页从别的域名读取资料,即"跨域读取数据"。

        因为同源策略,即需要JSONP技术。

 

⑤.AJAX:

        AJAX(Asynchronous JavaScript And XML)即异步加载JavaScript和XML,是指一种创建交互式网页应用的网页开发技术。

        AJAX是在不重新加载整个页面的情况下,与服务器交换数据并更新部分页面的方法。

 

 

----------遇见困难,解决困难----------

转载于:https://www.cnblogs.com/7089fy/p/9472552.html

你可能感兴趣的文章
ie文本框内容不居中问题
查看>>
利用grub2制作多启动U盘
查看>>
MQTT的学习研究(十三) IBM MQTTV3 简单发布订阅实例
查看>>
使用 github Pages 服务建立个人独立博客全过程
查看>>
posix多线程有感--线程高级编程(线程属性函数总结)(代码)
查看>>
spring-使用MyEcilpse创建demo
查看>>
JavaScript -- 数据存储
查看>>
DCDC(4.5V to 23V -3.3V)
查看>>
kettle导数到user_用于left join_20160928
查看>>
activity 保存数据
查看>>
typescript深copy和浅copy
查看>>
linux下的静态库与动态库详解
查看>>
hbuilder调底层运用,多张图片上传
查看>>
深入理解基于selenium的二次开发
查看>>
11、类的继承
查看>>
单片机的动手实践篇--51单片机玩转12864
查看>>
较快的maven的settings.xml文件
查看>>
Git之初体验 持续更新
查看>>
软件开发模型之瀑布模型
查看>>
Exception in thread "AWT-EventQueue-0" java.lang.IllegalThreadStateException
查看>>