day42--webday04
JavaScript
-
作用: 负责给页面添加动态效果
-
语言特点:
-
属于脚本语言(不需要编译直接由浏览器解析执行)
-
基于面向对象
-
属于弱类型语言
java: String name="tom"; int age = 18; int x; x="abc";报错
JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"
-
安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
-
交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所以交互性JS语言会更强一些
如何在HTML页面中添加JS语言
-
三种引入方式:
-
内联: 在标签的事件属性中添加js代码,当事件触发时执行.
-
事件: 是系统提供的一系列时间点.
-
点击事件: 当点击元素时触发的时间点
-
内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
-
外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面
变量, 数据类型,运算符,各种语句,方法,面向对象
变量
-
JS属于弱类型语言
java: String name="tom"; int age = 18; int x; x="abc";报错
JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"
-
let和var关键字的区别, 作用域有区别
-
使用let声明的变量,作用域和Java语言的作用域类似
-
使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量
Plain Text
java:
for(int i=0;i<10;i++){
int y = i+1;
}
int z = i+y; 报错 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){
let y = i+1;
}
let z = i+y; 不报错,但是访问不到i和y 因为超出了作用域
for(var i=0;i<10;i++){
var y = i+1;
}
var z = i+y; 不仅不报错还能够访问到i和y的值
数据类型
-
JavaScript中只有对象类型
-
常见的对象类型包括:
-
字符串: string 可以用单引号或双引号修饰
-
数值: number 相当于Java中所有数值类型的综合
-
布尔值: boolean true和false
-
未定义: undefined 当变量只声明不赋值时属于未定义
-
获取变量类型的方法 typeof 变量;
运算符
-
算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数
-
Java: int x =5 ; int y = 2; x/y = 2;
-
JS : let x =5; let y = 2; x/y =2.5; x=6 x/y=3;
-
关系运算符: > < >= <= != ==和===
-
==: 先统一两个变量的类型 再比较值
"666"==666 true
-
===:先比较类型,类型相同后再比较值
"666"===666 false
-
逻辑运算符: && || !
-
赋值运算符: = += -= *= /= %= ++ --
-
三目运算符: 条件?值1:值2
各种语句:
-
if else
-
for
-
while
-
do while
-
switch case
方法
-
java: public 返回值类型 方法名(参数列表){方法体}
-
JS: function 方法名(参数列表){方法体}
-
常见的四种方法:
-
无参无返回值
-
有参五返回值
-
无参有返回值
和页面相关的方法
-
通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector("选择器")
-
获取和修改元素的文本内容
元素对象.innerText = "xxx"; 修改文本内容
元素对象.innerText 获取文本内容
-
获取和修改input控件的值
控件对象.value="xxx"; 修改
控件对象.value 获取
NaN
-
Not a Number: 不是一个数
-
isNaN(x) 判断变量是否是NaN
JavaScript对象分类
-
内置对象:包括string,number,boolean等
-
BOM: Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容
-
DOM: Document Object Model, 文档对象模型,包括和页面标签相关的内容
BOM浏览器对象模型
-
window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.
-
window中常见的方法:
-
alert("xxx")弹出提示框
-
confirm("xxx") 弹出确认框
-
prompt("xxx") 弹出文本框
-
isNaN(x) 判断变量是否是NaN
-
parseInt()和parseFloat() 把字符串转成整数或小数
-
console.log() 控制台输出
-
let timer = setInterval(方法,时间间隔) 开启定时器
-
clearInterval(timer) 停止定时器
-
setTimeout(方法,时间间隔) 开启只执行一次的定时器
-
window对象中常见的属性
-
location位置
-
location.href 获取和修改浏览器的请求地址
-
location.reload() 刷新页面
-
history历史
-
history.length 获取历史页面数量
-
history.back() 返回上一页面
-
history.forward() 前往下一页面
