ECMAScript

局部变量和全局变量：

无论将变量声明在何处，不加var关键字，默认为全局变量，只有js中有这个语法。

  1. <html>
  2.   <head>
  3.     <title>Hello World</title>
  4.   </head>
  7.   <body>
  8.     <script type="text/javascript" >
  10.         myage = function () {
  11.           name = "java"
  12.           window.alert(name)
  13.         }
  15.         myage();   // 输出java
  17.         alert(name);  // java
  18.     </script>
  19.   </body>
  20. </html>

声明在方法体（函数体）内部的var开头的变量为局部变量，声明开头不加var无论在哪里一定是全局变量，声明在函数外的变量一定是全局变量。

js数据类型：

原始类型，引用类型
原始类型：Undefined, Number, String, Boolean, Null
引用类型：Object以及Object的子类
运算符：typeof，可以在程序的运行阶段动态的获取变量的数据类型
语法格式：typeof 变量名
运算结果：undefined number string boolean object function 为以上六个字符串之一
运算字符串用== 没有.equals

Underfined:

Undefined类型只有一个值，这个值就是undefined没赋值和手动赋值都是undefined

Number

NaN:运算结果显然为数字，但是最后结果不是数字，显示NaN
例如：

  1. <html>
  2.   <head>
  3.     <title>Hello World</title>
  4.   </head>
  7.   <body>
  8.     <script type="text/javascript" >
  10.       var a = "asd";
  11.       var b = 1;
  12.       alert(a / b);  // 除号的运算结果显然是整数，但是这里不是整数，就自动为NaN
  15.     </script>
  16.   </body>
  17. </html>

image.png

加号两侧有一个为字符串，优先做字符串拼接，不会做数字运算。

parseInt("")：自动将字符串转化成数字且取整数位。

parseFloat("") ：将字符串自动转化成数字

isNaN() : 结果为true表示不是一个数字，反之是数字

Math.ceil() : 向上取整

Boolean:

if后面的会自动抓换成boolean类型

永远只有两个值：true false

函数：Boolean() 将非布尔类型转换成布尔类型
转换规律：有就转换成true 没有就转换成false

1 true
0 false
NaN false
“” false
“asd” true
null false
Infinity true

String

  1. var a = "asd";``typeof astring
  2. var b = new String("asd");``typeof bobject 小string和大string是通用的

获取到字符串的长度：
alert(x.length); length属性，不同于java的方法

常用的属性和函数：
indexOf() 获取到指定字符串在当前字符串中第一次出现的位置。
lastIndexOf()获取到指定字符串在当前字符串中最后一次出现的索引。
substr(StartIndex, Length) 截取字符串
substring(StartIndex, EndIndex)截取子字符串，不包含EndIndex
replace("", "") 在该字符串中做字符串的替换，不做处理只替换第一个。

Object:

属性：prototype属性（常用的主要是这个） ：作用是给类动态的扩展属性和函数
constructor属性

函数：toString()
valueOf()
toLocaleString()
在js中定义的类都默认继承Object，会继承Object类中所有的属性及其函数。

自定义的类中也会有prototype属性

定义类：

第一种方式： function 类名(形参){

}
第二中方式： 类名 = function (形参){

  1.      }<br />创建对象：new 类名(实参);

image.png

void(0) 用法:

取消点击超链接发生的跳转。
既保留了超链接的样式，同时用户点击这个超链接之后执行一段js代码，页面还不跳转。

  1. <a href="javascript:void(0)" onclick="window.alert('test code')">测试</a>

Dom

直接操作html的文档

DOM 和BOM的区别和联系：

BOM包含DOM
image.png

value

value后面不加括号，是标签对象的一个属性：

  1. 可以用作获取value值
  2. 可以修改value值

innerHtml和innerText:

可以设置标签的内容。

innerHtml：如果设置的内容是一段html代码，则会被解析成为一段html代码插入到内容中。

innerText：即使内容是html代码，也不会被解析成为html代码，让被当做文本对待插入到内容中。

正则表达式：

  1. var regExp = /正则表达式/flags
  2. 使用内置支持类： var regExp = new RegExp(“正则表达式”);

关于flags: g:全局匹配
i：忽略大小写
m：多行搜索，当前面是正则表达式的时候m不能使用，只有前面是普通字符串的时候m才可以使用。

正则表达式判断邮箱是否合法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>test</title>
  6. </head>
  7. <body>
  8.   <script type="text/javascript" >
  9.     window.onload = function () {
  10.       document.getElementById("button").onclick = function () {
  11.         var email = document.getElementById("text");
  12.         var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  13.         if (regExp.test(email)) {
  14.           document.getElementById("emailMessage").innerText = "邮箱的格式合法";
  15.         } else {
  16.           document.getElementById("emailMessage").innerText = "邮箱地址不合法";
  17.         }
  18.       }
  19.       document.getElementById("text").onfocus = function () {
  20.         document.getElementById("emailMessage").innerText = "";
  21.       }
  22.     }
  23.   </script>
  25.   <input type="text" id="text"/>
  26.   <input type="button" value="提交" id="button" />
  27.   <span id="emailMessage" style="color: #ff0000; font-size: 12px;"></span>
  29. </body>
  30. </html>

正则表达式符号：
image.png
image.png

\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

取出字符串的前后空白:trim()

ie8之前不支持trim()函数的解决方法：prototype重写方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>deleteBlank</title>
  6. </head>
  7. <body>
  8.   <script type="text/javascript" >
  9.     window.onload = function () {
  10.       document.getElementById("button").onclick = function () {
  11.         alert("---->" + document.getElementById("text").value.trim() + "<------");
  12.       }
  13.     }
  15.     String.prototype.trim = function () {
  16.       return this.replace(/^\s+/, "").replace(/\s+$/, "");
  17.     }
  19.   </script>
  21.   <input type="text" id="text" />
  22.   <input type="button" id="button" value="提交" />
  23. </body>
  24. </html>

直接调用的方法;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>deleteBlank</title>
  6. </head>
  7. <body>
  8.   <script type="text/javascript" >
  9.     window.onload = function () {
  10.       document.getElementById("button").onclick = function () {
  11.         alert("---->" + document.getElementById("text").value.trim() + "<------");
  12.       }
  13.     }
  14.   </script>
  16.   <input type="text" id="text" />
  17.   <input type="button" id="button" value="提交" />
  18. </body>
  19. </html>

内置对象：Date：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  10. <body>
  13.   <script type="text/javascript" >
  14.     showTime = function () {
  15.       document.getElementById("timeDiv").innerText = new Date().toLocaleString();
  16.     }
  17.     start = function () {
  18.       v = window.setInterval("showTime()", 1000);   // 设置全局变量
  19.     }
  21.     stopTime = function () {
  22.       window.clearInterval(v);
  23.     }
  25.   </script>
  27.   <br><br>
  28.   <br><br><br><br>
  29.   <input type="button" value="显示网页时间" onclick="start()" />
  30.   <input type="button" value="停止网页时间" onclick="stopTime()" />
  33.   <div id="timeDiv" ></div>
  34. </body>
  35. </html>

image.png

  1. getTime()获取到从1970.1.1到现在的毫秒数
  2. getDate()获取到日期
  3. getDay()获取到周几
  4. 。。。见名知意

image.png

显示网页时钟：

var v = window.setInterval("method_name", time);每隔time毫秒自动调用method_name
window.clearInterval(v)停止调用method_name

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  10. <body>
  13.   <script type="text/javascript" >
  14.     showTime = function () {
  15.       document.getElementById("timeDiv").innerText = new Date().toLocaleString();
  16.     }
  17.     start = function () {
  18.       v = window.setInterval("showTime()", 1000);   // 设置全局变量
  19.     }
  21.     stopTime = function () {
  22.       window.clearInterval(v);
  23.     }
  25.   </script>
  27.   <br><br>
  28.   <br><br><br><br>
  29.   <input type="button" value="显示网页时间" onclick="start()" />
  30.   <input type="button" value="停止网页时间" onclick="stopTime()" />
  33.   <div id="timeDiv" ></div>
  34. </body>
  35. </html>