一、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语句标识符

五、JavaScript 常见的HTML事件

六、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()

十二、数据类型的转换

12.1 字符与数值

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

12.2 布尔值与数字

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

12.3 日期与数字

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

12.4 不同的数值转换

十三、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 正则表达式修饰符

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

13.2 正则表达式模式

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

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

量词:

十四、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 = \010;            // 报错

• 不允许对只读属性赋值

  "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。

05 前端--JavaScript用法总结

原文：https://www.cnblogs.com/xichenHome/p/11679181.html