javascript
约 2003 字大约 7 分钟
javaScript
- 1. 概念&作用
- 2. javascript引入方式
- 3. 数据类型
- 4. typeof、instanceof、===
- 5. javaScript语法
- 6. BOM浏览器对象模型（整个HTML页面内容）
- 7. javascript正则匹配
- 8. 转换成jq对象
- 9. 全局属性和函数可用于所有内建的JavaScript对象
- 10. 为什么JS是单线程的？
1. 概念&作用
- 编程语言 用于开发交互式web页面（向HTML页面添加交互行为）
- 脚本语言（轻量级编程语言）
- 不需编译（解释性语言）直接嵌入HTML页面中，由浏览器执行
- HTML页面中嵌入动态文本、对浏览器事件响应，读写HTML元素，
- 验证提交数据，检测访客数及访客的浏览信息等。使页面具有动态效果
2. javascript引入方式
| javascript引入方式 | 说明 |
|---|---|
| 内嵌式 | <script type="text/javascript(默认，可省略)">javascript代码</script> |
| 外联式 | <script type="text/javascript" src=“1.js” charset=“utf-8”></script> |
3. 数据类型
|基本（值）数据类型|说明|举例|
|:-😐:-😐
|String|使用双引号 " 或单引号 ' 括起来的一个或多个字符|"http://caibaojian.com"、'字符串'|
|Number|包括整数和浮点数（包含小数点的数或科学记数法的数）|30、-10、11.2、2.35e10|
|Boolean|表示 true 或 false 这两种状态|5 == 2 其运算结果为 false|
|Null|变量或内容值为空（null），可以通过给一个变量赋 null 值来清除变量的内容|str = null|
|Undefined|变量被创建后，未给该变量赋值，|var str|
|对象（引用）类型|说明|举例|
|Array|var cars=new Array();|var cars=["Audi","BMW","Volvo"];|
|Object|JavaScript 操作的对象|var person={firstname:"Bill", lastname:"Gates", id:5566};|
|Function|JavaScript 操作的对象|可以执行的一种特别对象|
4. typeof、instanceof、===
- typeof返回类型字符串
- 可以判断undefined、Number、string、boolean、function
- 不能判断：null与object
- instanceof 判断对象具体类型
- === 可以判断null undefined
5. javaScript语法
| javaScript组成 | 基本语法 | 说明 |
|---|---|---|
| ECMAScript（核心） | 变量定义 | var 变量名[=值];(可以不声明，直接使用，默认值undefined、变量存在但没赋值) |
| （变量弱类型：同一个变量可以存放不同类型的数据） | ||
| 如果在函数的内容用var定义，那么它是一个局部变量， | ||
| 如果没有使用var它是一个全局的 | ||
| 严格区分大小写，注释与java相同 | ||
| 运算符 | js比较===全等，值和类型，相比java没有equals，null写成"" | |
| == 它在做比较的时候会进行自动转换。 | ||
| === 它在做比较的时候不会进行自动转换。 | ||
| 基本数据类型 | number（任何数字） | |
| string（“”‘’） | ||
| boolean | ||
| null（对象的默认值） | ||
| undefined(变量无初始化时的默认值)) | ||
| 引用数据类型 | Number | |
| String match()找到一个或多个正则表达式的匹配.substr(a,b)从起始索引号提取字符串中指定数目的字符.substring(a,b)提取字符串中两个指定的索引号之间的字符。 | ||
| Boolean new Boolean(value)value不写默认false | ||
| Array | ||
| Boolean | ||
| DateDate.getTime()返回1970年1月1日至今的毫秒数、解决浏览器缓存问题 | ||
| Math | ||
| ReqExp对象正则表达式对象 ReqExp.test(要测的对象) | ||
| 普通函数 | [window/element.onload/var 变量名=]function 函数名(参数,参数){函数体,return 返回值} | |
| 匿名函数 | [window/element.onload/var 变量名=]function(参数,参数){函数体，return 返回值} | |
| 调用函数 | 函数名(参数，参数) | |
| 事件(调用函数) | 事件=“[return] 函数名([参数，参数])” | |
| onload 只能写一次并且放到body标签中 | ||
| onsubmit 写在form标签中，必须有返回值。return false不提交 | ||
| onclick、ondbclick | ||
| onblur 表单校验，text离焦 | ||
| onfocus 表单校验，text获得焦点 | ||
| onchange 二级联动、onkeydown搜索引擎 | ||
| onkeypress 搜索引擎 | ||
| onkeyup、onmousdown | ||
| onmouseup、onmouseover鼠标悬空高亮问题 | ||
| onmouseout鼠标离开、onmousemove | ||
| 让按钮点击失效：onclick=”javascript:volid(0)” | ||
| event对象 | clientX,鼠标指针水平坐标 | |
| clientY鼠标指针垂直坐标 | ||
| keyCode返回键盘输入的ASCII码 | ||
| preventDefault()阻止浏览器默认行为 | ||
| stopPropagation()阻止事件传播 | ||
| BOM浏览器对象 | window对象 | 表示浏览器中打开的窗口,都是全局函数，window可省略 |
| alert(“提示框提示信息”);confirm("确认提示信息");prompt("提示信息框"); | ||
| var xx=setInterval(function(),millisec) | ||
| setInterval（“function()”,毫秒值)----clearInterval(xx) | ||
| setInterval（string,毫秒值）----clearInterval(xx) | ||
| setTimeout（code,millsec）---clearTimeout(xx) | ||
| location对象 | 包含相关当前的url信息 href | |
| history（了解） | 包含用户在浏览器窗口中访问过的url | |
| history.go(-1);加载前一个连接等于history.back()； | ||
| history.go(1)；加载后一个链接，等效history.forward(); | ||
| DOM文档对象模型 | Document对象 | HTML文档，获得标签元素element对象 |
| getElementById(“id”)单个，唯一 | ||
| getElementsByTagName("name")需要遍历 | ||
| getElementsByName("name")复选框全选与全不选，用数组表示，多个。批量，需要遍历 | ||
| getElementById("id").value获取元素里面的值:字符串加“”，变量不加 | ||
| createTextNode()创建文本节点 | ||
| createElement()创建元素节点 | ||
| write("");想页面写入内容 | ||
| element对象 | style.属性[=属性值]；获得[设置]样式 | |
| 如果属性有多个单词使用“-”连接，则去掉“-”将后一个单词首字母大写 | ||
| appendChild()向元素添加新的子节点，作为最后一个子节点 | ||
| removeChild()从元素中移除子节点 | ||
| replaceChild()替换元素中的子节点 | ||
| firstChild返回元素的首个子节点。 | ||
| lastChild返回元素的最后一个子元素。 | ||
| innerHTML设置或返回元素的内容 =""向页面某个元素写一段内容，将原有的东西覆盖 | ||
| insertBefore()在指定的已有的子节点之前插入新节点。 | ||
| setAttribute(“属性名”)把指定属性设置或更改为指定值。非css | ||
| getAttribute(“属性名”)返回元素节点的指定属性值。非css | ||
| attribute对象 | 标签属性 | |
| document.getElementById(“id”).value获得元素里面的值(显示的内容) | ||
| this.setAttribute(name,value)给当前元素设置属性 | ||
| this | 表示函数当前操作的元素 |
- test检索字符串中指定的值。返回true或false。
- 对变量或者值使用typeof运算符，则object是由引用或null返回的
- 其他返回原始数据类型
6. BOM浏览器对象模型（整个HTML页面内容）
操作文档中的元素和内容，DOM树通过js相应的api实现
7. javascript正则匹配
| javascript正则匹配 | |
|---|---|
| String对象 | match方法，str.match（）； |
| ReqExp对象 | test方法 ReqExp.test(要测的对象) |
| 全局函数 | 函数名 | 描述 |
|---|---|---|
| 转换 | parseFloat() | 解析一个字符串并返回一个浮点数 |
| parseInt() | 解析一个字符串并返回一个整数 | |
| 执行 | eval() | 计算JavaScript字符串,并把它作为脚本运行 |
| 编码 | encodeURI() | 把字符串编码为URI |
| decodeURI() | 解码某个编码的URI |
8. 转换成jq对象
- jq选择器.html();
9. 全局属性和函数可用于所有内建的JavaScript对象
- 括号里面传入js对象，如string
- decodeURI()解码某个编码的 URI。
- decodeURIComponent()解码一个编码的 URI 组件。
- encodeURI()把字符串编码为 URI。
- encodeURIComponent()把字符串编码为 URI 组件。
- eval()计算 JavaScript 字符串，并把它作为脚本代码来执行。
- parseFloat()解析一个字符串并返回一个浮点数。
- parseInt()解析一个字符串并返回一个整数。
10. 为什么JS是单线程的？
- 为了避免复杂性，和提升效率。 为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质