学习导图

基础语法概述

1、什么是JavaScript，有什么用？

JavaScript是运行在浏览器上的脚本语言。简称JS。

2、JavaScript包括三块：ECMAScript、DOM、BOM

ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法

DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。

BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

3、在HTML中怎么嵌入JavaScript代码？

第一种方式：行间事件

<input type="button" value="hello" onclick="window.alert('hello js')" />

JS是一门事件驱动的编程语言，依靠事件驱动，然后执行对应的程序。

JS中的任何一个事件都对应一个事件句柄，例如鼠标单击事件click，对应的事件句柄就是onclick，事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS代码，当触发这个事件之后，这段JS代码则执行了。

JS中的字符串可以使用单引号括起来，也可以使用双引号括起来。

window是JS中的内置BOM顶级对象，代表当前浏览器窗口，window对象有一个alert()函数，该函数可以在浏览器上弹出消息框。window.alert()中的window.可以省略。

JS中的一条语句结束后可以使用“;”结尾，也可以不写。

第二种方式：页面script标签嵌入

<script type="text/javascript">
  /*
              暴露在代码块中的程序，在页面打开时执行，并且遵守自上而下的顺序
  */
    window.alert("helllo world");
    window.alert("helllo js");
  </script>

1. window.alert()的执行会阻塞当前页面的加载一个页面中可以写多个脚本块脚本块的位置没有限制

2.暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行

3. js注释：//单行 / /多行

第三种方式：外部引入

<script type="text/javascript" src="js文件路径"></script>
 <script type="text/javascript" src="js/1.js"></script>

运行结果：

4、Javascript中的变量

变量声明和赋值

语法:
    var 变量名；
    赋值：变量名 = 值；
             var i;
    i=100;
    i=false;
    i="abc";
    i=new Object();

变量未赋值，系统默认赋值undefined

JS是一种弱类型编程语言，无编译阶段，一个变量可以接收任何类型的数据

一行上也可以声明多个变量

函数的定义与调用

语法格式：
    第一种方式： 
    function 函数名(形参列表){
        函数体；    
    }
    第二种方式：
    函数名=function(形参列表){
        函数体；
    }
    js中的函数不需要指定返回值类型。

第一种方式：

   function sum(a,b){
   //a,b形参
    alert(a+b);
    }
   //函数必须手动调用
  //sum(10,20);
  //用户点击按钮，调用函数
  <input type="button" value="计算10和20的和" onclick="sum(10,20)" />

以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。

第二种方式：

sayHello=function(username){
         alert("hello "+username)
        }
      //调用sayHello
      //sayHello("张三");
     //用户点击按钮，调用函数
     <input type="button" value="hello" onclick="sayHello('杰克')" />

JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。

由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制

局部变量和全局变量

全局变量：

在函数体之外声明的变量为全局变量。

全局变量的生命周期：浏览器打开时声明，浏览器关闭时销毁（少用）。耗费内存空间，尽量使用局部变量。

 //全局变量
       var i=100;      
       function access1(){
       alert(i);
       }
       access1();

局部变量：

在函数体中声明的变量，包括形参也为局部变量。

局部变量生命周期：函数开始执行时局部变量内存开辟，函数执行结束之后，局部变量内存空间释放

局部变量生命周期短。

      var username="jack";
       function access2(){
                         //局部变量
         var username="lisi";
         //访问局部变量
         alert(username);
       }
       access2();
       //访问全局变量
       alert(username);

当一个变量声明时没有var关键字，那么不管这个变量在那里声明，都是全局变量。

  function myfun(){
     myname="wangwu";
     }
     myfun();
  alert("myname = "+ myname);

5、JavaScript数据类型

js变量在声明时不需要指定数据类型。 JS数据类型：原始类型，引用类型。

原始类型（ES6之前）：Undefined、Number、String、Boolean、Null

引用类型：Object以及子类

（ES6之后）：基于以上六种新加了一种类型：Symbol

js中有一个运算符typeof,这个运算符在程序运行期间动态获取变量的数据类型。

typeof语法格式：

typeof 变量名

typeof运算结果只能是以下六个字符串之一，注意：全部为小写 ”undefin“ ”number“”string“ ”boolean" “object” “function”

<script type="text/javascript">
      var i;
      alert(typeof i);//"undefined"
      var a=100;
      alert(typeof a);//"number"
      var b="abc";
      alert(typeof b);//"string"
      var c=false;
      alert(typeof c);//"boolean"
      var d=null;
      alert(typeof d);//"object"
      function sayHello(){
      }
      alert(typeof sayHello); //"function"
    </script>

js中比较字符串使用"==",没有equals方法。

 //求和，要求a,b数据类型必须为数字，不能为其他类型
       //sum作用只是求和
       function sum(a,b){
         if(typeof a=="number" && typeof b=="number"){
           return a+b;
         }
         alert(a+","+b+"必须都为数字！");
       }
       var result=sum(false,"abc");
       alert(result);//Undefined
        var result1=sum(1,2);
       alert(result1);

Undefined类型

Undefined只有一个值为：undefined。

当一个变量没有赋值系统默认赋值undefined

Number类型

Number类型包括那些值？ -1，0 1 2 3 3.14 100… NaN Infinty 整数，小数…无穷大…

 //关于NaN（表示Not a Number 不是一个数字，属于Number类型）
       //什么情况下结果为NaN？
       //运算结果本来是一个数字，最后计算完不是一个数字时，值为NaN.
       var x=100;
       var y="中国人";
       alert(x/y);//除号结果应该为一个数字，但是运算过程中导致结果不是数字，最后结果为NaN

 //Infinity (当除数为0时，结果为无穷大)
       alert(10/0);

isNaN函数：

isNaN(数值)，结果为true表示不是一个数字，false表示是一个数字

//关于isNaN函数？
       //语法： isNaN(数值)，结果为true表示不是一个数字，false表示是一个数字
        function sum(a,b){
         if(isNaN(a)||isNaN(b)){
           alert("参数必须为数字")
           return;
         }
         return a+b;
       }
      alert(sum(10,20));

parseInt()函数

//parseInt():可以将字符串自动转换成数字，并且取整数
      alert(parseInt("3.9999"));//3
      alert(parseInt(3.9999));//3

parseFloat()函数

//parseFloat():可以将字符串自动转换成数字      
      alert(parseFloat("3.14")+1);//4.140000000000001
      alert(parseFloat("3.3")+1);//4.3

Math.ceil()函数（向上取整！）

//Math.ceil()
      alert(Math.ceil("2.1"));//3

Boolean类型

在Boolean类型中有一个函数：Boolean();

语法：

Boolean(数据);

作用：将非布尔类型转换为布尔类型

String类型

js中字符串可以使用双引号，也可以使用单引号

js中怎样创建字符串对象？

var s="abc";

使用JS内置的支持类String：var s2=new String("abc");

注意：String类为内置类，父类Object

string与String属性通用

关于string类型常用函数和属性

常用属性：

length 获取字符串长度

常用函数：

indexOf 返回 String 对象内第一次出现子字符串的字符位置。

lastIndexOf 返回 String 对象中子字符串最后出现的位置。

replace 返回替换后的字符串。

substr 返回一个从指定位置开始的指定长度的子字符串。

substring 返回位于 String 对象中指定位置的子字符串。

split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回。

toLowerCase 返回一个字符串，该字符串中的字母被转换为小写字母。

toUpperCase 返回一个字符串，该字符串中的所有字母都被转化为大写字母

.......

 //原始类型string
       var x="abc";
       alert(typeof x);//"string"
 //大string(属于Object类型)
       var y=new String("abc");// "object"
       alert(typeof y);
  //获取字符串长度
       alert(x.length); //3
       alert(y.length); //3
  //indexOf
       alert("http://www.baidu.com".indexOf("https")); //-1
       alert("http://www.baidu.com".indexOf("http")); //0
   //判断一个字符串是否包含一个字符串
        //alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" :"不包含"); //不包含
   //replace
       alert("name=value%name=value%name=value".replace("%","&"));
//sunstr和substring区别？
    //stringvar.substr(start [, length ])
    alert("abcdefxyz".substr(2,4));//cdef
    //strVariable.substring(start, end) 注意：不包含end
    alert("abcdefxyz".substring(2,4));//cd

Object类型

Object类型为所有类型超类，自定义的任何类型默认继承Object

Object类包括的属性： prototype属性。作用：给类动态的扩展属性和函数 constructor属性

在js中自定义的类默认继承Object类，继承Object类的所有属性和方法

js中怎么定义类？怎么new对象？

        定义类语法：
           function 类名(形参){
          }
                     类名=function(形参){
          } 
        创建对象语法: 
        new 构造方法名(实参)；//构造方法名和类名一致

示例代码：（1）

            function User(a,b,c){
         //声明属性
         this.sno=a;
         this.sname=b;
         this.sage=c;
       }
       //创建对象
       var u1=new User(111,"zhangsan",30);
       //访问对象属性
       alert(u1.sno);
       alert(u1.sname);
       alert(u1.sage);  
    var u2=new User(222,"王三",20);
       alert(u2.sno);
       alert(u2.sname);
       alert(u2.sage);  
      //访问对象属性还可以这样
       alert(u2["sno"]);
       alert(u2["sname"]);
       alert(u2["sage"]);

示例代码：（2）

Product=function(pno,pname,price){
       //属性
       this.pno=pno;
       this.pname=pname;
       this.price=price;
       //函数
       this.getPrice=function(){
         return this.price;
       }
     }
     var xigua=new Product(111,"西瓜",4.0);
     var pri=xigua.getPrice();
     alert(pri);;//4.0

示例代码：（3）

//可以通过prototype属性动态的给类扩展属性和函数
       Product.prototype.getPname=function(){
         return this.pname;
       }
       //调用getPname函数
       var pname=xigua.getPname();
       alert(pame);

null NaN undefined三个的区别

//三个数据类型不一致

  //三个数据类型不一致
      alert(typeof null); //"object"
      alert(typeof NaN);  //"number"
      alert(typeof undefined); //"undefined"

js中有两个特殊的运算符

==(等同运算符，值判断值是否相等)

===(全等运算符，即判断值是否相等，也判断数据类型是否相等)

6.JavaScript中的事件

js中常用的事件：

blur失去焦点

focus获得焦点

click鼠标单击

dblclick鼠标双击

keydown键盘按下

keyup键盘弹起

mousedown鼠标按下

mouseover鼠标经过

mousemove鼠标移动

mouseout鼠标离开

mouseup鼠标弹起

reset表单重置

submit表单提交

change下拉列表选中项改变，或文本框内容改变

load页面加载完毕（整个HTML页面全部元素加载完毕之后发生）

select文本被选定

任何一个事件都对应一个事件句柄，

在事件前加ononXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性形式存在）

注册事件的两种方式：

第一种：直接在标签中使用事件句柄

               function sayHello(){
         alert("hello  js");
       }
<input type="button" value="hello" onclick="sayHello()" />

第二种：使用js代码完成注册

 <script type="text/javascript">
    function doSome(){
      alert("do Some");
    }
     //第一步：先获取按钮对象（document,内置对象，document代替整个HTML页面）
    var btnObj= document.getElementById("mybut");
     //第二步：给按钮对象的onclick属性赋值
     btnObj.onclick=doSome;//注意：不能有小括号 
              //将回调函数doSome注册到click事件上
    var mybtn1=document.getElementById("mybtn1");
    mybtn1.onclick=function(){//匿名函数，也是回调函数
      alert("text....."); //click事件发生之后才会调用
    }
    document.getElementById("mybtn2").onclick=function(){
      alert("text2.....");
    }
  </script>

js通过keydown事件演示捕获回车键，ESC键

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js捕捉回车键ESC键</title>
  </head>
  <body>
    <script type="text/javascript">
      window.onload=function(){
        var usernameElt=document.getElementById("username");
        usernameElt.onkeydown=function(event){
          //获取键值 回车：13 ESC:27
          //对于键盘事件对象来说，都有keyCode属性,获取键值
          //ale(event.keyCode);
          if(event.keyCode === 13){
            alert("正在进行登录...");
          }else if(event.keyCode === 27){
            alert("正在进行退出..");
          }
        }
      }
    </script>
    <input type="text" id="username" />
  </body>
</html>

JS的void运算符

  void运算符语法：void(表达式)
      运算原理：执行表达式，但是不返回结果
      javascript:作用：告诉浏览器后面为js代码，javascript:不能省略。
<a href="javascript:void(0)" onclick="window.alert('text')">既保留超链接的样式，同时用户点击该超链接执行js代码，但页面不跳转</a>

7.JavaScript控制语

switch

while

do…while

for

break

continue

for…in

with

   //创建数组
       var arr=[true,false,1,3,"abc",3.14];//js数组元素类型随意，自动扩容
       ///遍历数组
       for(var i=0;i<arr.length;i++){
         alert(arr[i]);
       }
   //for...in
       for(var i in arr){
         alert(arr[i]);
       }
     User=function(username,password){
         this.username=username;
         this.password=password;
       }
       var u=new User("张三",222);
       alert(u.username+","+u.password);
       alert(u["username"]+","+u["password"]);  
             //with    
       with(u){
         alert(username+","+password);
       }

JavaScript控制语句与Java控制语句相类似

JavaScript----ECMAScript（核心语法）

基础语法概述

1、什么是JavaScript，有什么用？

2、JavaScript包括三块：ECMAScript、DOM、BOM

3、在HTML中怎么嵌入JavaScript代码？

4、Javascript中的变量

5、JavaScript数据类型

6.JavaScript中的事件

7.JavaScript控制语

热门文章

最新文章

相关课程

相关电子书

相关实验场景