后端程序员的前端基础-前端三剑客之JavaScript-阿里云开发者社区

1 JavaScript简介

1.1 JavaScript简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。

它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

1.2 JavaScript组成部分

ECMAScript语法

文档对象模型（DOM Document Object Model）

浏览器对象模型(BOM Browser Object Model)

1.3 JavaScript发展史

它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。

2 JavaScript基本语法

2.1 JS的引入方式

JS的两种引入方式

1、直接在页面中添加script标签(任意位置)，然后编写js代码

2、将js代码写到js文件中，然后再引入到当前页面中

注意：

1、js可以写在页面的任意位置，但是js是解释性语言，从上往下依次执行，建议将js代码写在末尾

2、导入外部的js需要单独一个script标签，即不能再导入js的标签中写代码，否则会不执行

<!-- 
    JavaScript引入方式：
    1、内部引入
    在页面任意位置编写script标签，然后编写js代码

    注意：尽量让js标签在网页的下面

    2、外部引入
    在外部写一个*.js文件，然后编写js代码
    然后在需要使用的html页面中引入js文件

    注意：在引入外部的js文件的script标签中不要编写代码，不会执行。
-->
<script>
    //页面弹窗
    alert("hello，js");
</script>

<script src="js/test.js"></script>

2.2 JS的输出方式

alert(“输出内容”); 通过弹窗输出内容

console.log(“输出内容”); 通过控制台输出内容

document.write(“输出内容”) 将内容输出在页面上

<!-- 
    1、alert("内容");   弹框输出数据
    2、console.log("内容");  控制台输出数据  打开开发者工具(f12)
    3、document.write("内容"); 在页面上输出数据
-->
<script>
    //alert("通过弹框输出数据");
    //console.log("通过控制台输出数据")
    document.write("直接在页面上输出数据")
</script>

2.3 JS定义变量

js是弱类型语言。在编码期间数据无需定义类型。然后运行期间动态的识别类型

var 变量名 = 值;

注意：

1、js中var用来表示数据类型(字符串不区分单双引号)

2、var可以省略不写，建议不要省略

3、变量的命名规则：与java一致

<script>
    var a = 10;
    var b = "aa";
    var c = true;
    var d = 'cc';
    e = 20.2
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)
    console.log(e)

</script>

2.4 JS数据类型

js是一门弱类型语言。

JS中的数据类型

基本类型：

Number、String、boolean、undefined、null

引用类型（即java中的对象类型）

Object、数组、函数

<script>

    //基本类型
    var a = 10;
    console.log(typeof a);
    var b = 10.2;
    console.log(typeof b);
    var c = "hello";
    console.log(typeof c);
    var d = 'world';
    console.log(typeof d);
    var e = true;
    console.log(typeof e);
    var f;
    console.log(typeof f); //undefined 未定义类型
    var g = null;
    console.log(typeof g); //null 

    //引用类型
    var date = new Date();
    console.log(date);
    console.log(typeof date);

    //
    /**
    * json对象
    *   简单格式：   {key:value,key:value,key:value,...}
    *   复杂格式：   {key:value,key:value,key:{key:value,key:value,key:value,...}}
    */

    var product = {name:"红米手机",price:20,num:10000}
    console.log(product.name);
    console.log(product.price);
    console.log(product.num);

    console.log(typeof product);

    var emp = {ename:"smith",job:"java开发",dept:{dname:"开发部",location:"武汉"}}
    console.log(emp.ename);
    console.log(emp.job);
    console.log(emp.dept.dname);
    console.log(emp.dept.location);

</script>

注意：

number类型的特殊值

NaN not a number 不是数字

Infinity 无穷大

2.5 JS数据类型转换

string

1、任何类型与String使用+运算的结果都是String类型

2、String类型进行除了+运算以外都会将转换成number类型

3、String类型要想进行+运算，那么需要将其转换成number类型

number类型、string类型、undefind 、object、null都可以转成boolean类型

1、number类型非0即真

2、string类型非""即真

3、object类型真的

4、undefined类型假的

5、null类型假的

<script>
    var a = "123";
    console.log(a+1);
    console.log(parseInt(a)+1);
    console.log(a-1);
    console.log(a*2);

    //var b = "1";
    //var b = -1;
    //var b ;
    //var b = null;
    var b = new Date();
    if(b){
        console.log("真的");
    }else{
        console.log("假的");
    }
</script>

2.6 JS运算符

算术运算符

关系运算符

赋值运算符

逻辑运算符

三目运算符

<!-- 
算术运算符
  +  -  *  /  %  ++ --
关系运算符
  > < >= <= == != ===
逻辑运算符
  || && !
赋值运算符
  =  +=  -=  *=  /=  %=
三目运算符
  表达式 ?  结果1: 结果2;
-->

<script>
    var a = 5;
    console.log(a/2);

    var b = "12";
    var c = 12;
    console.log(b == c); //true     比较内容是否相等
    console.log(b === c); //false   比较内容是否相等，同时比较类型是否相等
</script>

2.7 JS控制流程语句

if分支

switch分支

for循环、while循环、do while循环

<script>
      // for(var i = 0 ; i < 10 ;i++){
      //  console.log("hello"+i)
      // }
      
      // var arr = [1,2,3,4,5,6,7];
      // for(var i = 0 ; i < arr.length ; i++){
      //  console.log(arr[i])
      // }
      
      // for(var index in arr){
      //  console.log(index)
      // }
      
      //九九乘法表,输出在页面上
      document.write("<table>")
      for(var i = 1 ; i < 10 ; i++){
        document.write("<tr>")
        for(var j = 1 ; j <= i ; j++){
          document.write("<td>")
          document.write(j+"*"+i + "=" + i*j)
          document.write("</td>")
        }
        document.write("</tr>")
      }
      document.write("</table>")
    </script>

2.8 JS数组

js中的数组定义方式：

静态定义

var 数组名 = [值1,值2,…];

动态定义

var 数组名 = new Array(值1,值2,…);

var 数组名 = new Array(数组的长度);

js中的数组的特点：

数组的长度是可以改变的

如果数组的长度变长，那么后面的元素用undefined表示
如果数组的长度变短，那么后面的元素就被删除掉了
如果数组的长度为0，那么表示清空数组

数组中可以存储任意数据类型
for in循环和for循环的区别：

forin循环会默认过滤掉多余的undefined元素(扩容之后数组中的undefined元素)

数组常用的方法：

数组名.push(元素); 向数组的最后一个位置添加元素

数组名.pop(); 从数组中移除最后一个元素

<script>
    // var arr = [1,2,3,4,5];
    // console.log(arr[2]);
    //var arr = new Array(1,2,3,4,5);
    //console.log(arr[0]);

    // var arr = new Array(3);
    // console.log(arr[0]);

    var arr = [1,'a',undefined,new Date,undefined,undefined];
    // for(var i in arr){
    //  console.log(arr[i])
    // }
    //arr.length = 6;

    //arr.length = 3;

    //arr.length = 0;

    //console.log(arr);

    // for(var i = 0 ; i < arr.length; i++){
    //  console.log(arr[i])
    // }

    arr.push(6);

    arr.pop();
    for(var i in arr){
        console.log(arr[i])
    }

</script>

2.9 JS函数

java中的方法定义：

访问修饰符修饰符返回值类型方法名(参数列表){

方法体;

}

js中方法的定义：

  <!-- 
  
  js中方法的定义：
      命名函数
      语法：
      function 函数名(参数列表){
      方法体;
      }
  
      匿名函数(在js中函数也是一个对象)
      var 函数对象名 = function(参数列表){
      方法体;
      }
  js中的函数调用：
  
  
  js中函数的特点：
      1、形参和实参可以不一致
      2、如果实参的数量大于形参的数量，那么后面的实参就没有作用了
      3、如果实参的数量小于形参的数量，那么后面的形参用undefined表示
      4、js中将所有的参数封装到了arguments对象中(数组)
      5、js中的函数不允许重载(后面的函数会覆盖前面的函数)
  
  js函数的返回值
      如果函数需要返回值，则直接在函数中，添加return 返回的值
      如果要退出函数，那么也可以直接使用return
  -->

<script>
    function f1(){
        console.log("f1函数...")
    }
    //函数调用
    //f1();
    function f2(name,age){
        console.log(name);
        console.log(age);
    }
    //函数调用
    //f2("cxk",30);

    var f3 = function(){
        console.log("匿名函数...")
    }
    //函数调用
    //f3();

    var f4 = function(a,b){
        //console.log(a+"======"+b)
        console.log(arguments.length);

        var sum = 0;
        for(var i = 0 ;i < arguments.length ; i++){
            sum += arguments[i];
        }
        console.log(sum);
    }

    //f4(10,20,30);
    //f4(10);
    //f4(10,20,30,40,50);

    function f5(){
        console.log("js中的函数")
    }
    function f5(a,b){
        console.log("js中的函数（重载）")
    }
    //f5(10,20);


    function f6(a,b){
        return a+b;
    }

     var result = f6(10,20);
     console.log(result);

</script>

2.10 JS事件

JS事件组成：

事件源

事件的源头（可以是页面上任意一个元素，如：button、img等等、键盘、鼠标…）

事件类型

不同的事件类型。如：单击事件、双击事件、鼠标移入、鼠标移除、键盘按下、输入框失去焦点、内容改表等等

事件监听

监听事件类型

事件回调函数

当事件触发之后执行的函数

事件名称	描述

onchange	HTML 元素内容改变
onclick	用户点击 HTML 元素
ondblclick	双击
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标

onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘按键按下后抬起
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

onsubmit	表单提交
onblur	当输入框失去焦点
oninput	输入框内容改变

 <!-- 
  事件：
    事件源
      事件的源头。可以是页面上任意一个元素，如：button、img等等、键盘、鼠标
    事件类型
      不同的事件类型。如：单击事件、双击事件、鼠标移入、鼠标移除、键盘按下、失去焦点、内容改表等等
    事件监听
      对事件类型进行监听
    事件回调
      当事件触发之后执行函数
 -->

<script>
    //页面加载完成之后执行
    window.onload = function(){
        console.log(document.getElementById("username"))
    }
</script>

<button onclick="f1()">点击一下</button>
<button ondblclick="f2()">双击两下</button>

<input type="text" name="username" onblur="f3()" id="username"/><span id="uSpan"></span> 

<select onchange="f4()" id="sel">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="5">5</option>
</select>

<img src="images/8.jpg" width="200px" height="200px" onmouseover="f5()" onmouseout="f6()">

<input oninput="f7()" type="text" name="searchName" />

<!-- 事件冒泡   submit按钮本身就有提交表单的作用  阻止事件:return false -->
<form action="" method="get" onsubmit="return f3()">
    用户名：<input type="text" name="username" onblur="f3()" id="username"/><span id="uSpan"></span>
    <input type="submit" value="登录" />
</form>


<script>

    function f1(){
        alert("按钮被点击了...");
    }
    function f2(){
        alert("按钮被双击了...");
    }
    function f3(){
        //1、获取输入框中的内容 2、判断是否合法
        var username = document.getElementById("username").value;
        if(username.length >= 6){
            document.getElementById("uSpan").innerHTML = "用户名可用";
            document.getElementById("uSpan").style.color = 'green';
            return true;
        }else{
            document.getElementById("uSpan").innerHTML = "用户名不可用";
            document.getElementById("uSpan").style.color = 'red';
            return false;
        }

        //alert("失去了焦点...");
    }
    function f4(){
        alert("下拉框内容改变..."+document.getElementById("sel").value);
    }

    function f5(){
        console.log("进来了...");
    }

    function f6(){
        console.log("出去了...");
    }
    function f7(){
        console.log("改变了....")
    }

    window.onkeydown = function(e){
        //console.log("键盘按下....")
        if(e.keyCode == 13){
            console.log("执行登录操作....")
        }
        //console.log(e.keyCode)
    }
    function f8(){
        console.log("表单提交了....")
    }

</script>

3 DOM（Document Object Model）

元素：标签以及标签所包含的内容

元素属性：标签的属性

节点：元素、属性、文本统称为节点（元素—标签节点、属性—属性节点、文本—文本节点）

节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是text

3.1 获取元素节点

document对象指代的就是一个网页文档，document对象提供属性、函数大多都是获取网页文档中的元素

通过标签的id属性获取元素节点单个

document.getElementById(“id名称”)

通过class样式名获取元素节点多个

document.getElementsByClassName(“class名称”)

通过标签名称获取元素节点多个

document.getElementsByTagName(“元素节点”)

通过name属性获取元素节点多个返回数组

document.getElementsByName(“name名称”)

<p id="p1">这是一个p标签</p>
<input type="text" id="in">
<button class="btn">这是一个按钮</button>
<button class="btn">这是另一个按钮</button>
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />排球
<!-- 
    获取元素节点：
        通过标签的id属性获取元素节点   单个
          1、document.getElementById("id名称")
        通过class样式名获取元素节点   多个
          2、document.getElementsByClassName("class名称")
        通过标签名称获取元素节点      多个
          3、document.getElementsByTagName("元素节点")
        通过name属性获取元素节点      多个
          4、document.getElementsByName("name名称")
-->
<script>
    // var p = document.getElementById("p1");
    // alert(p);
    // var inp = document.getElementById("in");
    // alert(inp);
    // var btn = document.getElementsByClassName("btn");
    // alert(btn[0]);
    // var p = document.getElementsByTagName("p");
    // alert(p[0]);
    var inputs = document.getElementsByName("hobby");
    alert(inputs.length);
</script>

3.2 操作文本节点

两个标签之间的内容为文本节点

元素节点.innerHTML 获取|设置元素的文本节点

元素节点.innerText 获取|设置元素的文本节点（不包含元素标签）

<p id="p1"><span>这是一个p标签</span></p>
<button onclick="f1()">获取文本内容</button>
<button onclick="f2()">设置文本内容</button>

<script>
  //1、获取元素节点
  var p = document.getElementById("p1");
  function f1(){
    //获取文本节点上的内容
    //alert(p.innerHTML);
    alert(p.innerText);
  }
  function f2(){
    //设置文本节点上的内容
    p.innerHTML = "这是设置上去的值";
  }
</script>

3.3 操作属性节点

元素节点.属性名设置|获取元素节点的属性值

<img src="images/1.jpg" width="200px" height="200px">
<button onclick="f1()">切换图片</button>
<input type="text" name="username"> 
<button onclick="f2()">获取输入框中的内容</button>

<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />排球

<button onclick="f3()" id="btn">全选</button>


<script>
  function f1(){
    //1、获取img这个元素节点
    var img = document.getElementsByTagName("img")[0];
    //2、修改src属性
    if(img.src == 'http://127.0.0.1:8848/03_JavaScript/images/8.jpg'){
      img.src = "images/1.jpg";
    }else{
      img.src = "images/8.jpg";
    }
  }
  function f2(){
    //1、获取input这个元素节点
    var input = document.getElementsByName("username")[0];
    alert(input.value);
  }
  
  function f3(){
    var btn = document.getElementById("btn");
    if(btn.innerHTML == '全选'){
      //1、获取所有的复选框
      var hobbys = document.getElementsByName("hobby");
      //2、改变checked
      for(var i = 0 ; i < hobbys.length ; i++){
        hobbys[i].checked = true;
      }
      //3、将按钮上的字改成全不选
      btn.innerHTML = '全不选';
    }else{
      //1、获取所有的复选框
      var hobbys = document.getElementsByName("hobby");
      //2、改变checked
      for(var i = 0 ; i < hobbys.length ; i++){
        hobbys[i].checked = false;
      }
      //3、将按钮上的字改成全不选
      btn.innerHTML = '全选';
    }
  }
</script>

3.4 操作元素节点

创建元素：document.createElement()

追加元素：appendChild()

删除当前元素的指定子元素

removeChild()

删除当前元素及其所有的子元素

remove()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul id="city">
      <li>北京</li>
      <li id="wh">武汉</li>
      <li>上海</li>
      <li>杭州</li>
    </ul>
    <input type="text" name="name" id="name" />
    <button id="btn1">点击添加(默认在最后)</button>
    
    <button id="btn2">点击添加(指定的位置之前)</button>
    
    <button onclick="f3()">点击删除</button>
    
    <a href="19_jsBOM对象.html">123</a>
    <script>
      document.getElementById("btn1").onclick = function(){
        //1、获取输入框中的内容
        var name = document.getElementById("name").value;
        if(name == null || name == '' || name == undefined){
          alert("输入内容不能为空"); 
          return;
        }
        
        //创建li标签
        var li = document.createElement("li");
        //给li标签设置文本节点
        li.innerHTML = name;
        //将创建的li标签添加到ul中
        var ul = document.getElementById("city");
        ul.appendChild(li);
      }
      
      document.getElementById("btn2").onclick = function(){
        //1、获取输入框中的内容
        var name = document.getElementById("name").value;
        if(name == null || name == '' || name == undefined){
          alert("输入内容不能为空"); 
          return;
        }
        //创建li标签
        var li = document.createElement("li");
        //给li标签设置文本节点
        li.innerHTML = name;
        //将创建的li标签添加到ul中并且在指定的wh之前
        var ul = document.getElementById("city");
        ul.insertBefore(li,document.getElementById("wh"))
      }
      function f3(){
        //获取ul标签
        //var ul = document.getElementById("city");
        //删除当前元素的指定子元素
        //ul.removeChild(document.getElementById("wh"));
        
        var wh = document.getElementById("wh");
        //删除当前元素及其所有的子元素
        wh.remove();
      }
    </script>
    
  </body>
</html>

4 BOM(Broswer Object Model)

4.1 Window

指整个浏览器对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

4.2 Screen

包含屏幕信息

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

console.log(screen.availWidth);
console.log(screen.availHeight);

4.3 Navigator

包含浏览器内部信息

浏览器代号:navigator.appCodeName

浏览器名称: navigator.appName

浏览器版本:navigator.appVersion

硬件平台:navigator.platform

用户代理:navigator.userAgent

<div id="example"></div>
<script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

4.4 History

相当于浏览器上的前进后退

window.history 对象包含浏览器的历史。

history.back()

history.forward()

history.go(n)

4.5 Location

浏览器地址栏信息

//跳转到指定的页面
location.href = "http://www.baidu.com";
//刷新页面
location.reload();

4.6 定时器

setTimeout 只执行一次

参数1：定时任务的函数，参数2：多长时间之后执行(毫秒)

setInterval 执行多次

参数1：定时任务的函数，参数2：执行的周期(毫秒)

clearInterval(t); 结束定时任务

<script>
    //setTimeout：任务只会执行一次    参数1：定时任务的回调函数  参数2：延迟时间
    // window.setTimeout(function(){
    //  console.log("定时器执行了")
    // },2000)

    var t ;
    function f1(){
        //setInterval：任务会多次执行   参数1：定时任务的回调函数  参数2：执行周期
        t = window.setInterval(function(){
            console.log("定时器执行了")
        },1000);
    }
    function f2(){
        //结束定时器 参数：定时器对象
        window.clearInterval(t);
    }
</script>

后端程序员的前端基础-前端三剑客之JavaScript

1 JavaScript简介

1.1 JavaScript简介

1.2 JavaScript组成部分

1.3 JavaScript发展史

2 JavaScript基本语法

2.1 JS的引入方式

2.2 JS的输出方式

2.3 JS定义变量

2.4 JS数据类型

2.5 JS数据类型转换

2.6 JS运算符

2.7 JS控制流程语句

2.8 JS数组

js中的数组定义方式：

js中的数组的特点：

2.9 JS函数

2.10 JS事件

3 DOM（Document Object Model）

3.1 获取元素节点

3.2 操作文本节点

3.3 操作属性节点

3.4 操作元素节点

4 BOM(Broswer Object Model)

4.1 Window

4.2 Screen

4.3 Navigator

4.4 History

4.5 Location

4.6 定时器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

后端程序员的前端基础-前端三剑客之JavaScript

1 JavaScript简介

1.1 JavaScript简介

1.2 JavaScript组成部分

1.3 JavaScript发展史

2 JavaScript基本语法

2.1 JS的引入方式

2.2 JS的输出方式

2.3 JS定义变量

2.4 JS数据类型

2.5 JS数据类型转换

2.6 JS运算符

2.7 JS控制流程语句

2.8 JS数组

js中的数组定义方式：

js中的数组的特点：

2.9 JS函数

2.10 JS事件

3 DOM（Document Object Model）

3.1 获取元素节点

3.2 操作文本节点

3.3 操作属性节点

3.4 操作元素节点

4 BOM(Broswer Object Model)

4.1 Window

4.2 Screen

4.3 Navigator

4.4 History

4.5 Location

4.6 定时器

热门文章

最新文章

相关课程

相关电子书

相关实验场景