前端学习之JavaScript用法总结

目录

• 一、JavaScript 基本功能
• 二、JavaScript 引入方法
• 三、JavaScript 输出
• 四、JavaStript 语法
  • 4.1 JavaScript字面量(typeof)-值
  • 4.2 JavaScript变量-名称
  • 4.3 JavaScript操作符
  • 4.3 JavaScript语句标识符
• 五、JavaScript 常见的HTML事件
• 六、Javastript break和Continnue语句
• 七、undefined 和 null的区别
• 八、JavaScript 类型
• 九、typeof 操作符
• 十、constructor属性
• 十一、date 日期对象
• 十二、数据类型的转换
  • 12.1 字符与数值
  • 12.2 布尔值与数字
  • 12.3 日期与数字
  • 12.4 不同的数值转换
• 十三、RegExp正则
  • 13.1 正则表达式修饰符
  • 13.2 正则表达式模式
• 十四、JavaScript 错误处理
• 十五、JavaScript 严格模式

一、JavaScript 基本功能

• 能直接写入HTML输出流中

  <script>document.write("<h1>我是一级标题</h1>")</script>
  

• 能对事件的反应

  <button type="button" onclick="alert('欢迎')">使劲点我</button>
  

• 能改变HTML内容

  <p id="demo">JavaScript能改变HTML的内容</p>
  <script>
      function myFunction() {
          x = document.getElementById("demo");//找到元素
          x.innerHTML = "Hello JavaScript";//改变内容
      }//document.getElementByid("some id")是由DOM（Document Object Model）（文档对象模型）定义的，用于访问HTML元素的正式W3C标准
  </script>
  <button type="button" onclick="myFunction()">点击这里</button>
  

• 改变HTML图像

  <script>
  function changeImage()
  {
    element=document.getElementById("myimage")//都是用双引号
    if (element.src.match("bulbon"))//检索img标签中的src属性值有没有包含bulbon这个字符串
    {
        element.src="https://www.runoob.com/images/pic_bulboff.gif";
    }
    else
    {
        element.src="https://www.runoob.com/images/pic_bulbon.gif";
    }
  }
  </script>
  <img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180">
  <p>点击灯泡就可以打开或关闭这盏灯</p>
  

• 能改变HTML样式，属于改变HTML属性的变种

  <p id="demo">JavaScript能改变HTML的样式</p>
  <script>
      function myfunction() {
          x=document.getElementById("demo") //找到元素
          x.style.color="#ff0000"; //改变样式
      }
  </script>
  <button type="button" onclick="myfunction()">使劲点击我</button>
  

• 用于验证用户的输入

  <p>请输入数字</p>
  <input id="demo" type="text">
  <script>
      function myFunction() {
          var x=document.getElementById("demo").value;
          if(x==""||isNaN(x))
          {
              alert("不是数字");
          }
      }
  </script>
  <button type="button" onclick="myFunction()">点击这里</button>
  

二、JavaScript 引入方法

浏览器会解释并执行位于<script></script>之间的JavaScript代码。

<script>alert('hello world')</script> //内部引入方式
<script src="myScript.js"></script> //外部导入方式，不能包含<script>标签

三、JavaScript 输出

• 使用window.alert()弹出警告框

  <script>window.alert(5+6);</script>
  <script>window.alert("5+6");</script> //注意二者区别
  

• 使用document.write()方法将内容写到HTML文档中

  <script>document.write(Date());</script>
  

• 如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖

  <p>我是标题标签</p>
  <button onclick="myFunction()">使劲戳我</button>
  <script>
      function myFunction() {
          document.write(Date())
      }
  </script>  
  

• 使用innerHTML写入或获取HTML元素

  <p id="demo">hello world</p>
  <script>
      document.getElementById("demo").innerHTML="世界你好";
  </script>
  

• 使用console.log()写入到浏览器的控制台

  <script>
      a=5;
      b=6;
      c=a+b;
      console.log(c);
  </script>
  <p>浏览器使用F12来启用调试模式，在console菜单查看</p>
  

四、JavaStript 语法

在编程中，一般固定不变的定值称为字面量，如1，2，3，123.456

4.1 JavaScript字面量(typeof)-值

• 数字（Number）字面量：整数、小数、科学计数

3.14 1000 123e5

• 字符串（String）字面量：单引号、双引号
• 表达式字面量：用于计算，如5+6
• 数组（Array）字面量：定义一个数组

var nums = [2,5,7,1,9]

• 对象（Object）字面量：定义一个对象

var person = {firstName:"allen",lastName:"jin",age:18}

• 函数（Function）字面量：定义一个函数

function myFunction(a,b){return a * b;}

4.2 JavaScript变量-名称

变量用于存储数据值，使用关键字var定义变量，使用等号为变量赋值。

<p id="demo"></p>
<script>
    var length;
    length=4;
    document.getElementById("demo").innerHTML=length;

需求：假设y=5，计算x=y+2并显示结果

<p>假设y=5，计算x=y+2并显示结果</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var y=5;
        var x=y+2;
        var demoP=document.getElementById("demo");
        demoP.innerHTML="x="+x;
    }
</script>

4.3 JavaScript操作符

用算术运算符来计算值；

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML=(5+6)*10;
</script>

用赋值运算符给变量赋值

<p id="demo"></p>
<script>
    var x,y,z;
    x=5;
    y=6;
    z=(x+y)*10;
    document.getElementById("demo").innerHTML=z;
</script>

注：关键字用于标识要执行的操作，语句用分号分隔，注释用//表示，对大小写敏感，使用Unicode字符集，驼峰法命名规则lastName。

4.3 JavaScript语句标识符

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误 。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

五、JavaScript 常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

六、Javastript break和Continnue语句

• break语句用于跳出循环

  <button onclick="myFunction()">我在这里</button>
  <p id="demo"></p>
  <script>
      function myFunction() {
          var x = "", i = 0;
          for (i = 0; i < 10; i++) {
              if (i == 3) {
                  break;
              }
              x = x + "数字为" + i + "<hr>";
          }
          document.getElementById("demo").innerHTML = x;
      }
  </script>
  
  

• continue用于跳出循环中的一个迭代

  <button onclick="myFunction()">我在这里</button>
  <p id="demo"></p>
  <script>
      function myFunction() {
          var x = "", i = 0;
          for (i = 0; i < 10; i++) {
              if (i == 3) {
                  continue;
              }
              x = x + "数字为" + i + "<hr>";
          }
          document.getElementById("demo").innerHTML = x;
      }
  </script>
  
  

七、undefined 和 null的区别

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
// null和undefined的值相等，但类型不等

八、JavaScript 类型

• 类型转换

  Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

• 在JavaScript中有5种不同的数据类型：

  • string
  • number
  • boolean
  • object
  • function

• 在JavaScript中有3中对象类型：

  • Object
  • Date
  • Array

• 在JavaScript中有2个不包含任何值得数据类型：

  • ull
  • undefined

九、typeof 操作符

• NaN的数据类型是number
• 数组（Array）的数据类型是object
• 日期（Date）的数据类型为object
• null的数据类型是object
• 未定义变量的数据类型为underfined
• 若对象是JavaScript Array或JavaScript Date，我们无法通过typeof来判断类型，因为返回都是object。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

十、constructor属性

返回所有JavaScript变量的构造函数

"John".constructor      // 返回函数 String()  { [native code] }
(3.14).constructor      // 返回函数 Number()  { [native code] }
false.constructor       // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor   // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor   // 返回函数 Date()    { [native code] }
function () {}.constructor  // 返回函数 Function(){ [native code] }

使用constructor属性来查看对象是否为数组（包含字符串"Array"）

<p>判断是否为数组</p>
<p id="demo"></p>
<script>
    var nums = ['11', '22', '33', '44'];
    document.getElementById("demo").innerHTML = isArray(nums);

    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
</script>

使用constructor属性来查看对象是否为日期（包含字符串"Date"）

<p>判断是否为日期</p>
<p id="demo"></p>
<script>
    var myDate = new Date();
    document.getElementById("demo").innerHTML = isDate(myDate);

    function isDate(myDate) {
        return myDate.constructor.toString().indexOf("Date") > -1;
    }
</script>

十一、date 日期对象

var obj=new Date()

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

十二、数据类型的转换

12.1 字符与数值

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN,不是数字

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

12.2 布尔值与数字

Number(false)     // 返回 0
Number(true)      // 返回 1

12.3 日期与数字

d = new Date();
Number(d)          // 返回 1404568027739
d = new Date();
d.getTime()        // 返回 1404568027739

12.4 不同的数值转换

false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob","Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

十三、RegExp正则

用于所有文本搜索和文本替换的操作，语法：/正则表达式主体/修饰符（可选）

• search()方法使用正则表达式——文本搜索

  var str = "Visit Runoob!"; 
  var n = str.search(/Runoob/i); 
  
  var str = "Visit Runoob!"; 
  var n = str.search("Runoob"); //字符串作为参数
  
  

• replace()方法使用正则表达式——文本替换

  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace(/microsoft/i,"Runoob");
  
  var str = document.getElementById("demo").innerHTML; 
  var txt = str.replace("Microsoft","Runoob");
  
  

13.1 正则表达式修饰符

修饰符可以在全局搜索中不区分大小写

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

13.2 正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
d	查找数字。
s	查找空白字符。
	匹配单词边界。
uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

十四、JavaScript 错误处理

• try语句测试代码块的错误

• catch语句处理错误

• throw语句创建自定义错误

• finally语句在try和catch语句之后，无论是否触发异常，该语句都会执行。

  try {
      ...    //异常的抛出
  } catch(e) {
      ...    //异常的捕获与处理
  } finally {
      ...    //结束处理
  }
  
  

  function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
      if(x == "") throw "值是空的";
      if(isNaN(x)) throw "值不是一个数字";
      x = Number(x);
      if(x > 10) throw "太大";
      if(x < 5) throw "太小";
    }
    catch(err) {
      message.innerHTML = "错误: " + err + ".";
    }
    finally {
      document.getElementById("demo").value = "";
    }
  }
  
  

十五、JavaScript 严格模式

"use strict"指令只允许出现在脚本或函数的开头

• 不允许使用未声明的变量

  "use strict";
  x = 3.14;                // 报错 (x 未定义)
  
  

• 不允许删除变量或对象

  "use strict";
  var x = 3.14;
  delete x;                // 报错
  
  

• 不允许删除函数

  "use strict";
  function x(p1, p2) {};
  delete x;                // 报错 
  
  

• 不允许变量重名

  "use strict";
  function x(p1, p1) {};   // 报错
  
  

• 不允许使用转义字符

  "use strict";
  var x = 10;            // 报错
  
  

• 不允许对只读属性赋值

  "use strict";
  var obj = {};
  Object.defineProperty(obj, "x", {value:0, writable:false});
  obj.x = 3.14;            // 报错
  
  

• 不允许对一个使用getter()方法读取的属性进行赋值

  "use strict";
  var obj = {get x() {return 0} };
  obj.x = 3.14;            // 报错
  
  

• 变量名不能使用"eval"与"arguments"字符串

  "use strict";
  var eval = 3.14;         // 报错
  "use strict";
  var arguments = 3.14;    // 报错
  
  

• 由于一些安全原因，在作用域eval()创建的变量不能被调用

  "use strict";
  eval ("var x = 2");
  alert (x);               // 报错
  
  

• 禁止this关键字指向全局对象

  function f(){
      return !this;
  } 
  // 返回false，因为"this"指向全局对象，"!this"就是false
  
  function f(){ 
      "use strict";
      return !this;
  } 
  // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。