WEB——04.javaScript

作用：负责给页面添加动态效果。

语言特点：

• 属于弱类型语言：

  • java: String name = “tom”; int age = 18; name=30;报错
  • javaScript: let name=“tom”; let age = 18; name=30;不报错

• 属于脚本语言，不需要编译直接解析运行。

• 基于面向对象

• 安全性强:JS语言只能访问浏览器内部的数据，浏览器以外的程序或磁盘中的数据禁止访问

• 交互性强：因为JS语言是嵌入在Html页面中的语言，随着页面一起传递到客户端，运行在客户端的语言，离用户更近一些，java语言运行在服务器的语言，所以JS语言交互性更强。

如何在html页面中添加js代码。当事件发生执行

• 内联：在标签的事件属性中添加js代码，当事件触发时执行。
  • 事件：系统给提供的特点的时间点。
  • 点击事件：在用户点击元素时触发的时间点

• 内部：在html页面中任意位置添加script标签，在标签体内写js代码

• 外部：在单独的js文件中写js代码，在html页面中通过script标签属性引入

变量

• js属于弱类型语言

  • java: String name = “tom”; int age = 18; name=30;报错
  • javaScript: let name=“tom”; let age = 18; name=30;不报错

• let和var关键字的区别

  • let和var关键字的区别使用let声明的变量, 作用域和Java语言一样

  • 使用var声明的变量, 相当于声明的是一个全局变量

  • 举例:
    java:
    for(int i=0;i<10;i++){
    int y=i+1;
    }
    int z = y-i; 报错: i超出了作用域
    JavaScript:
    for(let i=0;i<10;i++){
    let y=i+1;
    }
    let z = y-i; 不会报错,但是y和i 是访问不到的
    for(var i=0;i<10;i++){
    var y=i+1;
    }
    var z = y-i; y和i是可以访问的

数据类型

• JavaScript中只有引用类型(对象类型)

• 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

  引用数据类型：对象(Object)、数组(Array)、函数(Function)。

  • 常见的对象类型
  • number：数值类型，相当于java中所有数值类型的综合
  • string：字符串，可以用单引号或双引号修饰
  • boolean：布尔值。true/false
  • undefined：未定义，当变量只声明不赋值时，变量的类型为未定义
  • 获取变量类型的方式：typeof 变量

• **注：***Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

• 数组:

var cars = new Array();
cars[0] = "Aaab";
cars[1] = "Volvo";
cars[2] = "BMW";
var cars = new Array("Aaab","Volvo","BMW");
var cars = ["Saab","Volvo","BMW"];

• JavaScript对象

对象由花括号分割。在括号内部，对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分隔。
var person = {firstname:"John",lastnamr:"Doe",id:5566};
var person={
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};
name=person.lastname;
name=person["lastname"];

• 声明变量类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

运算符

• 算术运算符: ±*/%, JS除法会自动根据结果转换整数还是小数

  • java: int x=5; int y = 2; x/y = 2;
  • js: let x = 5; let y = 2; x/y = 2.5;

• 关系运算符: > < >= <= != = = 和===

  • ==: 先统一等号两边的类型,再比较值 “666”==666 true
  • ===: 先比价类型,类型相同之后再比较值 “666”==666 false

• 逻辑运算符: && ,|| , !

• 三目运算符: 条件?值1:值2

各种语句

• if else
• while
• do while
• for
• switch case

方法

• java：public 返回值类型 方法名(参数列表){方法体}

• JS：function 方法名(参数列表){方法体}

• 常见的四种方法：

  • 无参无返回值
  • 无参有返回值
  • 有参无返回值
  • 有参有返回值

• 声明方法的三种方式：

  • function 方法名(参数列表){方法体}
  • let 方法名 = function(参数列表){方法体}
  • let 方法名 = new Function(“参数1”,“参数2”,“方法体”){}

• 注：如果变量没有声明。他将自动成为全局变量

• 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

  以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

NaN

• Not a Number:不是数
• isNaN(变量)判断变量是否是NaN,true代表是NaN false,false代表不是NaN

JavaScript中的内置对象

• 内置对象：number,string,boolean,undefined等。
• BOM：Browser Object Model浏览器对象模型，包含和浏览器相关的内容
• DOM：Document Object Model文档对象模型，文档指html标签，包含和页面 相关内容

BOM浏览器对象模型

• 包含和浏览器相关的内容
• window对象：该对象的属性和方法称为全局属性和全局方法，访问时可以省略掉window

window对象常见的方法

• alret(“xxx”):弹出提示框
• confirm(“xxx”):弹出提示框
• prompt(“xxx”)弹出文本框
• parseInt():将字符串或小数转成整数
• parseFloat():将字符串转成整数或小数
• isNaN()判断变量是否时NaN
• console.log()浏览器控制台输出
• let timer = setInterval(方法,时间间隔) 定时器
• clearInterval(timer)停止定时器
• setTimeout(方法，时间间隔)只执行一次的定时器

0
0

window对象中常见的属性

• location位置
  • location.href获取或修改浏览器的请求地址
  • loication.reload()刷新页面
  • location.search获取浏览器地址栏中的参数

location.href = "http://www.baidu.com"
location.href
'https://www.baidu.com/'
lication.reload()

• history历史(只当前浏览器页卡的历史，关闭后则清除)
  • history.length历史页面数量
  • history.back()返回上一页面
  • history.forward()前往下一页面
  • history.go(n)n是正值前进 负值后退 0代表刷新

DOM文档对象模型

• 和页面相关内容

• 通过元素的id获取元素对象

  let 元素对象 = document.getElementById(“元素id”);

• 通过CSS中接触到的选择器获取元素对象

​ let 元素对象 = document.querySelector(“选择器”)；

• 获取和修改元素的文本内容

  元素对象.innerText;//修改

  元素对象.innerText=“xxx”//修改

• 获取和修改表单中的控件的值
  控件.value //获取
  控件.value=“xxx” //修改

这是div

• 创建元素对象

  let 元素对象 = document.createElement(“标签名”);

• 添加元素对象

​ document.body.appendChild(元素对象);

• 给元素的属性赋值

​ 元素对象.src = “1.jpg”;

​ 元素对象.属性=“值”；

平方练习




结果:



  

简单的计算器








  结果：

帅哥美女练习

猜数字游戏



结果：
  

向表格中添加元素






    
员工列表
    

        
姓名
        
工资
        
工作
    

自定义对象

• 定义一个空的Person对象

• 直接实例化对象

 //直接实例化对象
    let p2={};
    p2.name = "张三";
    p2.age = 20;
    p2.run = function () {
      console.log("张三的方法执行了!");
    }
    p2.run();

• 实例化自带属性和方法的对象

 //实例化自带属性和方法的对象
    let p3 = {
      name : "刘备",
      age  :30,
      run : function () {
        alert(this.name+":"+this.age);
      }
    };
    p3.run();

//通过自定义对象封装数据
    let arr = [{name:"小米手机",price:"3000",count:500},
      {name:"小米电视",price:"3000",count:500},
      {name:"华为手机",price:"3000",count:500},
      {name:"华为电视",price:"3000",count:500}]

    for (let item of arr) {
      let tr = document.createElement("tr");
      let nameTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let count = document.createElement("td");
      let table = document.querySelector("table");
      nameTd.innerText = item.name;
      priceTd.innerText = item.price;
      count.innerText = item.count;
      tr.append(nameTd,priceTd,count);
      table.append(tr)

    }

​ 商品列表

商品名	价格	库存
小米手机	3000	500
小米电视	3000	500
华为手机	3000	500
华为电视	3000	500