Web前端（六）-JavaScript（引入方式、注释、语法、变量、数据类型、运算符、各种语句、方法相关、页面相关、NaN、对象相关、对象分类、BOM浏览器对象模型）
-
作用: 用来给页面添加动态的效果
-
-
语言特点:
-
属于脚本语言, 不需要编译 直接解析执行.
-
属于弱类型语言, 变量声明时不需要指定类型
-
Java: int x = 10; String name="tom"; x="Jerry";编译报错
-
JavaScript: let x=10; let name="tom"; x="Jerry"; 不会报错
-
-
安全性高: 这门语言由于是嵌入到html页面中,最终执行在客户端浏览器中的语言,所以对安全性要求较高 , 只允许访问浏览器内部的数据,浏览器意外磁盘上的数据不允许访问.
-
交互性强: JS语言是嵌入到html页面中,最终在客户端的浏览器中执行的,可以直接面对用户进行交互, 而Java语言是运行在服务器端的,交互性比JavaScript肯定要差一些
-
引入方式
-
如何在html页面中添加JavaScript代码
-
三种引入方式:
-
内联: 在标签的事件属性中添加JS代码,当事件触发时代码执行
-
事件: 是系统提供的一些特定时间点
-
点击事件: 当用户点击了某个元素时需要执行js代码,那么把js代码写到点击事件之中即可执行
-
-
内部:在页面的任意位置添加script标签,在标签体内写JS代码
-
外部:在单独的js文件中写JS代码, 在HTML页面中通过script标签的src属性引入到页面中, 如果script标签引入了文件 则不能在标签体内写js代码
-
注释
-
HTML: <!--注释内容-->
CSS: /*注释内容*/
JavaScript: //单行注释 /*多行注释*/
注释快捷键: ctrl+shift+/ JavaScript中单行注释: Ctrl+/
JavaScript语法
变量, 数据类型,运算符,各种语句, 方法,面向对象
变量
-
JavaScript属于弱类型语言
-
Java: int age=18; String name="tom"; Person p = new Person()
-
JavaScript:
-
let age=18; let name="tom"; let p = new Person();
-
var age=18; var name="tom"; var p = new Person();
-
-
let和var的区别
-
推荐使用let, let声明的变量, 变量的作用域和Java语言类似
-
使用var声明的变量,不管在什么位置声明的 都相当于是一个全局变量
for(int i=0;i<10;i++){
int y = i+1;
}
int z = i; //在java中会报错,因为i是局部变量出了for循环不能访问
for(var i=0;i<10;i++){
var y = i+1;
}
var z = i; //在JavaScript中不会报错,因为i属于全局变量, 使用let声明变量则和java作用域一样 -
-
数据类型
-
JavaScript中 只有对象类型
-
几种常见的对象类型:
-
数值: number 相当于Java中所有数值类型的总和
-
字符串: string 单引号和双引号都可以修饰
-
布尔值: boolean true和false
-
未定义: undefined 当变量只声明不赋值时,此时变量为undefined
-
-
typeof 变量 获取变量的对象类型
运算符
-
和java大体相同
-
算数运算符: + - * / % 除法会自动转换整数或小数
-
Java: int x=5; int y=2; int z = x/y; z=2;
-
JS: let x=5; let y=2; let z=x/y; z=2.5; 如果x=6, z=3
-
-
关系运算符: > < >= <= != 和=
-
==: 先统一等号两边变量的类型再比较值 "666"666 true
-
===: 先比较类型,类型相等后再比较值 "666"=666 false
-
-
逻辑运算符: &&, ||, !
-
赋值运算符: = += -= *= /= %= ++ --
-
三目运算符: 条件?值1:值2
各种语句
-
if else
-
for
-
while
-
do while
-
switch case
方法相关
-
方法声明:
-
Java: public 返回值类型 方法名(参数列表){方法体}
-
JS : function 方法名(参数列表){方法体}
-
-
声明常见的四种方法:
-
无参无返回值
-
无参有返回值
-
有参无返回值
-
有参有返回值
-
-
声明方法的三种方式:
-
function 方法名(参数列表){方法体}
-
let 方法名 = function(参数列表){方法体}
-
let 方法名 = new Function("参数1","参数2","方法体");
-
和页面相关的方法
-
通过选择器获取页面中的元素对象
let d = document.querySelector("div");
-
获取和修改元素的文本内容
d.innerText; //获取
d.innerText="xxxx"; //修改
-
获取和修改form表单中控件的值
let i = document.querySelector("#i1");
i.value; //获取控件的值
i.value="xxx"; //修改控件的值
NaN
-
Not a Number: 不是一个数
-
isNaN(变量) : 判断变量是否是数值 或字符串里面的内容是否是数值 ,
-
true:代表是NaN (不是数)
-
false:代表不是NaN (是数值)
-
对象相关
-
如何定义对象和实例化对象
//定义一个对象 定义一个空对象 没有属性 没有方法
// 类似Java中创建一个空的Person.java 类文件
let Person = function () {}
//实例化对象
let p = new Person();
//可以动态给对象添加属性和方法 (java中不允许)
p.name="张三";
p.age=18;
p.run=function () {
alert(this.name+":"+this.age);
}
//调用对象的方法
//p.run();
//定义一个带有构造方法的对象
let Car = function (name,price) {
this.name=name;
this.price=price;
this.cell = function () {
alert("我叫"+this.name+"售价:"+this.price+"元!");
}
}
//实例化对象
let c1 = new Car("蔚来Es8",580000);
c1.cell(); -
直接实例化对象
//直接实例化空对象 这种写法不需要定义对象
let p1 = {};
//动态添加属性和方法
p1.name="李白";
p1.age=18;
p1.run = function () {
alert(this.name+":"+this.age);
}
p1.run();
//实例化带属性和方法的对象
let p2 = {
name:"张三",
age:66,
run:function () {
alert(this.name+":"+this.age);
}
}
p2.run();
JavaScript中对象分类
-
分为三大类:
-
内置对象: number,string,boolean等
-
BOM浏览器对象模型(包含浏览器相关内容)
-
DOM文档对象模型(包含页面相关内容)
-
BOM浏览器对象模型
-
window: 此对象里面的属性和方法称为全局属性和全局方法,访问时可以省略掉window.
-
window中常见的方法:
-
alert(); 弹出提示框
-
confirm(); 弹出确认框
-
prompt(); 弹出文本框
-
isNaN(); 判断变量是否是NaN
-
parseInt(); 将字符串或小数转成整数
-
parseFloat(); 将字符串转成小数
-
let timer = setInterval(方法,时间间隔); 定时器 ,当需要每隔一段时间做某件事的时候使用定时器
-
clearInterval(timer); 停止定时器
-
setTimeout(方法,时间间隔); 开启只执行一次的定时器
-
