day01 js ECMAScript基础语法 DOM事件三步走
一.JavaScript和ECMAScript的关系
ECMAScript是JavaScript的规格, JavaScript是ECMAScript的一种实现, 在日常场合这两个词可以互换
二.但事实上, JavaScript比ECMAScript的含义多得多,一个完整的JavaScript实现应该由以下三个部分组成
1.ECMAScript: 核心
2.DOM:文档对象模型
3.BOM:浏览器对象模型
三.js的引入方式
加载顺序,从上往下,script: 正常应写到所有标签之后
外接方式:<script type="text/javascript" src="./index.js"></script>
内接方式:<script type="text/javascript"></script>
四.ECMAScript5基础语法
1.var 声明变量
1.1.变量的命名规则
和python不同的是可以使用美刀$符号来命名
保留字: 此语言保留的,将来可能成为关键字, 不允许用做变量名, 不用记, IDE会给你提示
其他规则与python相同
1.2.声明并赋值
var a = 2; //每行结束为什么要加一个分号; 因为这些js文件上线的时候要压缩,以节省文件大小; 分号在其中起分隔作用
1.3.先声明再赋值
var b;
b=3;
1.4.声明的变量挂载到了哪里?
window.a //变量的落脚点, python是global, 这里是窗口window,可省略不写
2.测试语句,输入 输出
var a = prompt('今天是什么天气?'); //js 自带的弹出的输入框, 基本不用这个.
console.log(a); //控制台输出内容, 测试
alert(a); //弹出框测试
3.基本数据类型
直接量: 即常量,也称为字面量: 包括数字和字符串
3.1.number
var a = 123;
console.log(typeof a) //typeof 变量名: 检查当前变量是什么数据类型
var a1 = 5/0; //特殊情况: 不报错
console.log(typeof a1) //输出:Infinity(无限大), 类型:number
var a3 = 1234.5678;
console.log(sa3.toFixed(2)); //四舍五入, 括号里面的是保留的小数个数
3.2.1.string
var str = '123';
console.log(typeof str)
3.2.2.字符串的拼接
var name = 'bajie';
var age = 18;
var str = name + " is " + age + " years old."; //正常使用js语法, 用+号拼接
var str1 = `${name} is ${age} years old.`; //使用es6的模板字符串, 整个字符串反引号``, 里面用shell的变量引用方法替换
3.3.boolean
var b1 = false; //flase 和 true都是小写
console.log(typeof b1)
3.4.null
var c1 = null; //输出null本身 类型:object
console.log(c1)
3.5.undefined
console.log(e) //这时变量e还未定义,会报错:Uncaught ReferenceError: e is not defined
var e;
console.log(e);
console.log(typeof e); //只声明没有赋值的变量,输出是undefined,类型是undefined
4.引用数据类型
Function
Object
Array
Date
5.运算符
赋值运算符
= 也有 += -= *= /= %=等
算数运算符
+ - * / %
还有++ 和--, 用法和c语言一样
比较运算符
== != > < <= >=
有个 === !== 和is差不多
console.log(26 == '26'); //结果是true, 当比较时: 比较的是数值(如有字符串会隐式转成数值)
console.log(26 === '26'); //结果是false, 等同于: 要求内存地址相同,即数值和数据类型都相同
6.数据类型转换
6.1.*号运算符的隐式转换
var a = "one";
var b = "two";
console.log(a*b); //输出:NaN(not a number), 类型: number,乘法隐式转换成number
6.2.-号运算符的隐式转换
var a = 3;
var b = '1';
var c = a - b;
console.log(c); //只要出现了减号, 无论是字符串还是数值,个数是几个,运算后的结果都是数值
6.3.+号运算符的隐式转换
var a = 2;
var c = '2'
var ac = a + c; //'22' 数值 + 字符串 = 字符串(浏览器的隐式转换)
console.log(typeof ac);
console.log(typeof (66+'')); //小技巧: 数字+一个空的字符串, 就能隐式转换成字符串
6.4.将数值转成字符串 String(123) 和 a.toString()
var a = 123;
console.log(String(a));
console.log(a.toString());
6.5.将字符串转成数值
console.log(parseInt('66.55'));
console.log(parseInt('66bajieai2018'));
console.log(parseInt(66.55)); //结果都是数值66, 1.将字符串转换数值, 2.净化作用, 只保留开头的数字 3.截取功能,只保留小数点前面的内容
console.log(Number('123.432abc')); //输出NaN; 没有净化作用, 有字母时, 返回的结果是NaN, 类型是number
console.log(Number('123.432')); //输出123.432; 将字符串转换成number类型, 这个没有截取
console.log(parseFloat('123.432abc55.6cdf')); //输出123.432; 和parseInt()类似, 返回浮点数(浮点数不用截取); 也有净化作用: 返回开头的浮点,其他不
6.6.任何数据类型都可转为boolean类型
var a1 = '123';
var a2 = -123;
var a3 = Infinity;
var a4 = NaN;
var a5 = 0;
var a6;
var a7 = null;
console.log(Boolean(a1),Boolean(a2),Boolean(a3),Boolean(a4),Boolean(a5),Boolean(a6),Boolean(a7)); //true true true false false false false
7.流程控制
7.1.if(){}else if(){}else{}
var age = 10;
if(age > 18){ //用法和c语言的一样
console.log('go to school');
}else{
console.log('go to home');
}
7.2.&& ||
和python的 and 和 or的用法一样
7.3.switch(){}
var age = 20;
switch (age) { //用法和c语言的一样
case 18: console.log('is 18 man'); break;
case 19: console.log('is 19 man'); break;
case 20: console.log('is 20 man');
default: console.log('is other man');
}
7.4.while(){}
循环三步走: 1,初始化循环变量 2,判断循环条件 3,更新循环变量
var a = 1;
while(a<=9){ //用法和c语言的一样
console.log(a);
a++;
}
7.5.do{}while()
先做一次, 再去while
var a = 0;
do{
console.log(a);
}while(a>3)
7.6.for(){}
for(var i = 0; i<=100; i++) {
if (i%2==0) {
console.log(i);
}
}
8.常用内置对象
8.1.Array: 数组,列表
8.1.1.创建数组
var arr = ['bajie','wukong','datang']; //方式一.字面量方式创建
console.log(arr);
-----------------------------------------
var arr1 = []; //方式一.字面量方式创建: 先建立空列表,再进行赋值
arr1[0] = 'xixi';
console.log(arr1);
-----------------------------------------
var arr = new Array(); //方式二.构造函数方式创建: 先建立空列表,再进行赋值 (es5中没有class,我们创建函数对象用new; 构造函数的首字母大写)
arr[0] = 'bajie'
console.log(arr);
'''
(3) ["bajie", "wukong", "datang"] //数组里包括属性和方法(__proto__:原型,可以理解成是数组的父类)
0: "bajie" //1.数组自己的属性和方法
1: "wukong"
2: "datang"
length: 3
__proto__: Array(0) //2.继承父类的属性和方法
'''
8.1.1.数组常用的方法
var a1 = [1,2,3];
var a2 = ['a','b','c'];
var a3 = a1.concat(a2); //合并数组: 合并两个数组为一个新的数组, 源两数组不变
console.log(a3); //应用场景:懒加载会用到这个,追加元素到列表中
var a4 = a2.join(''); //拼接成字符串: 把数组中的元素用什么东西拼接成字符串 源数组不变
console.log(a4);
var a5 = a1.toString(); //转换成字符串: 每个元素之间使用逗号隔开 等同于a1.join(',') 源数组不变
console.log(a5);
console.log(typeof a5);
var a6 = a2.slice(1,4); //切片: 猜到开头猜不到结尾 源数组不变
console.log(a6);
a2.push('d'); //追加一个元素: 注意: 返回值不是新列表, 而是新列表的长度 直接改源数组
console.log(a2);
a2.push('e','f'); //追加多个元素:
console.log(a2);
a2.push(['g','h']); //追加一个列表:
console.log(a2)
a11.unshift(1); //追加一个元素: 是从前面追加 直接改源数组
console.log(a11);
var a7 = a1.pop(); //弹出元素: 最后一个元素,返回值是弹出的元素. 注意: 不能按下标弹出 直接改源数组
console.log(a7);
console.log(a1);
var a11 = [1,2,3,4];
a11.shift(); //弹出元素: 从前面弹出一个元素 直接改源数组
console.log(a11);
a2.reverse(); //反转数组: 直接改源数组
console.log(a2);
var a9 = [1,4,11,9,2,3,10,5,65]; //排序: 按第一个数或首字母排序 直接改源数组
a9.sort();
console.log(a9);
console.log(Array.isArray(a9)); //判断: 是不是数组 true false
arr = ['bajie','wukong','datang'];
for(var i = 0; i < arr.length; i++){ //遍历数组
console.log(arr[i]);
document.write(arr[i]);
}
8.2.String
8.2.1.字符串的创建
var str = 'bajie'; //方式一: 字面量声明字符串并赋值
var str = new String(); //方式二: 构造方法声明字符串: 这个在控制台可以显示父类挂载的方法
console.log(str);
8.2.2.字符串常用的方法
var str1 = 'ba12a3';
var str2 = 'jie';
console.log(str1.concat(str1,str2,str2)); //拼接字符串: 几个字符串拼接成一个新的字符串 源两字符串不变
console.log(str.charAt(0)); //索引: 按索引取一个字符 源字符串不变
console.log(str1.replace('b',123456)); //替换: 字符串中元素的替换 源字符串不变
console.log(str1.indexOf(2)); //查找下标: 查找char在字符串中的索引, 没有则返回 -1 源字符串不变
console.log(str1.slice(0,1)); //切片: 猜开头,猜不到结尾 源字符串不变
console.log(str1.split('a')); //分割: 返回一个数组 如果有第二个参数,表示的是: 返回数组的长度 源字符串不变
console.log(str1.substr(0,2)); //切片: 和slice一样 源字符串不变
console.log(str1.toLowerCase()); //转小写: 源字符串不变
console.log(str1.toUpperCase()); //转大写: 源字符串不变
str3 = ' bajie '
console.log(str3.trim()); //去空白: 去掉两边的空白 源字符串不变
8.3.Date
8.3.1.创建日期对象
var date = new Date(); //创建日期对象只有这一种方式
8.3.2.日期对象常用的方法
console.log(date); //Date Fri Nov 15 2019 19:42:43 GMT+0800 (中国标准时间)
console.log(date.getDate()); //日: 1-31
console.log(date.getMonth()); //月份: 0-11 显示的时候要+1: 1-12
console.log(date.getFullYear()); //年:
console.log(date.getDay()); //星期: 0-6
console.log(date.getHours()); //小时: 0-23
console.log(date.getMinutes()); //分钟: 0-59
console.log(date.getSeconds()); //秒: 0-59
console.log(date.toLocaleString()); //2019/11/15 下午8:36:22
8.4.Math内置对象
console.log(Math.random()); //求随机数: 范围:0~1 猜到了开头, 猜不到结尾
console.log(200+Math.random()*(500-200)); //求随机数: 生成一个 200~500 之间的随机数
console.log(Math.min(45,66)); //求最小值
console.log(Math.max(45,66)); //求最大值
console.log(Math.floor(1.234)); //向下取整
console.log(Math.ceil(1.234)); //向上取整
8.5.Function函数
8.5.1.创建函数 function add(){}
add(6,9); //调用函数: 和python不同的是, 调用时可以在任何地方(可以在定义函数之前调用)
function add(x,y) { //声明函数
alert(x+y);
return x + y; //使用return返回值
}
add(5,6); //调用函数
console.log((add(5,6)));
8.5.2.伪数组: arguments
function add(x) {
console.log(x); //形参和实参的数量不用一一对应
console.log(arguments); //arguments是个伪数组: 所有的实参元素都会传到这个伪元素里
// arguments.push('wukong'); //伪数组不能用数组函数的功能, 但是可以使用遍历和索引
// console.log(arguments);
console.log(arguments[1]); //有数组的下标和长度
}
add('bajie',123)
五.DOM: 文档对象模型: Document object model
1.js输出到浏览器页面上,而不是控制台上
document.write('<h1>八戒</h1>') //1.可以标签 2.可以是文本
2.文档对象:
整个文档对象: document: //html文件里的所有内容
查看文档对象的方法: console.dir(document)
获取html: document.documentElement
获取body: document.body
3.函数对象:
var add = function () { //函数对象: 就是一个匿名函数,然后赋值给一个变量
alert(123321);
};
add();
4.js的入口函数: 窗口加载
4.1.有类似css的层叠性: 即有事件覆盖现象,只有最后一个窗口加载被执行,怎么办? 只写一个窗口加载
4.2.正常的script应该写到文档的最后,才能在js里获取到各种对象: 因为js的代码是从上到下顺序执行的
现在我就是要把script写到上面? 使用入口函数:
window.onload = function(){ //onload是一个函数,这个window.onload的意思是窗口加载: 包括先加载的文档, 后加载的图片资源,最后执行js代码
console.log(document);
console.log(document.documentElement);
console.log(documnet.body); //这样再获取document的各种对象就没问题了
}
4.3.窗口加载这个函数是异步函数: 加载时看到窗口加载,跳过这个: 先加载完文档,再回来加载这个窗口加载函数
4.4.窗口加载的问题:
由于加载顺序是文档,图片,js,如果网络等原因图片没有加载成功,那么js就无法操作
如何解决?
把窗口加载改成文档加载:
document.onload = function(){ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(document);
console.dir(document);
console.log(document.documentElement);
console.log(document.body);
window.onload = function() {
console.log(document.body);
};
//异步: 不等待, 下面的代码不会等上面的代码执行完采取执行.(所以"窗口加载"这个函数是异步函数)
var add = function () {
alert(123321);
};
add();
</script>
</head>
<body>
<script>
console.log(document.body);
</script>
</body>
</html>
六.DOM事件三步走:
1.事件三步走:
1.1.获取事件源(获取你的标签)
var obj1 = document.getElementById('box')
var obj2 = document.getElementsByClassName('box')[0]
var obj3 = document.getElementsByTagName('div')[0]
1.2.事件(比如点击)
obj1.onclick = function(){ }
1.3.事件驱动程序
obj1.style.backgroudColor = 'green';
2.例:单击事件
需求: 默认盒子200*200 红色, 点击盒子让盒子变成绿色
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var objDiv = document.getElementById('box');
console.log(objDiv);
var objDiv2 = document.getElementsByClassName('box')[0];
console.log(objDiv2);
var objDiv3 = document.getElementsByTagName('div'); //1.获取到的是一个: 伪数组
console.log(objDiv3[0]);
//还有一种获取DOM的方式, 现在基本不用了
var objDiv4 = document.querySelector('.box'); //按类名获取标签: 多个类名时, 只能获取第一个标签
var objDiv5 = document.querySelector('#box'); //按id获取标签
objDiv.onclick = function () { //2.事件: 函数里的代码默认不会被执行,只有(事件)点击的时候才会执行
console.log(objDiv.style); //3.驱动程序:
objDiv.style.backgroundColor = "green"; //当这句执行时, 样式被加到了行内标签里, 优先级最高
}
</script>
</body>
</html>
3.驱动程序: 简单的流程控制
不停地点击,在红色和绿色之间交替变换:
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var isRed = true; //搞个标志记录盒子的两种颜色状态,然后驱动程序里判断两种状态,做不同的设置
var objDiv = document.getElementsByTagName('div')[0];
objDiv.onclick = function () {
if(isRed){
objDiv.style.backgroundColor = 'green';
isRed = false;
}else{
objDiv.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
</html>
4.1.1.盒子的显示与隐藏:
方式一: 使用display实现
1.获取事件源
2.事件
3.驱动程序
objDiv.style.display = 'none';
this.innerText = '显示'; //this相当于python中的self; innerText: 设置文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script>
var objBtn = document.getElementById('btn');
var objDiv = document.getElementById('box');
var isShow = true;
objBtn.onclick = function () {
if(isShow){
objDiv.style.display = 'none';
isShow = false;
this.innerText = '显示';
}else{
objDiv.style.display = 'block';
isShow = true;
this.innerText = '隐藏';
}
}
</script>
</body>
</html>
4.1.2盒子的显示与隐藏:
方式一: 使用display实现:获取事件源的简化代码
1.获取事件源
可以用名为$的函数封装起来, 返回事件源对象
$是函数名, 理论上可以是任何合法的标识名, 只是习惯用$
function $(id){
return document.getElementById(id);
}
2.事件
$('btn').onclick = function () { }
3.驱动程序
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box"></div>
<script>
function $(id){
return document.getElementById(id);
}
var isShow = true;
$('btn').onclick = function () {
if(isShow){
$('box').style.display = 'none';
isShow = false;
this.innerText = '显示';
}else{
$('box').style.display = 'block';
isShow = true;
this.innerText = '隐藏';
}
}
</script>
</body>
</html>
4.2.盒子的显示与隐藏:
方式二: 提前写好隐藏的样式, 用标签属性添加隐藏样式的类名
(实际和方式一一样也是使用的display属性)
1.获取事件源
2.事件
3.驱动程序
$('box').className += ' active'; //因为 = 是赋值, 会把className之前原有的属性覆盖掉, 所以用 += , ' active':注意value前面有个小技巧: 有个空格
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
.active{
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div id="box" class="app"></div>
<script>
function $(id){
return document.getElementById(id);
}
$('btn').onclick = function () {
console.log($('box').className); //这里用到的是标签的属性: $('').className; 刚刚用到的是标签样式属性: $('').style.display
$('box').className += ' active';
}
</script>
</body>
</html>
5.标签属性的简单介绍
$('myImg').src = './guanggao.jpg';
$('myImg').alt = 'guanggao';
$('myImg').className = '';
$('myImg').title = '';
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="btn">隐藏</button>
<img src="" alt="" id="myImg">
<script>
function $(id){
return document.getElementById(id);
}
$('btn').onclick = function () {
$('myImg').src = './guanggao.jpg';
$('myImg').alt = 'guanggao';
}
</script>
</body>
</html>
6.事件类型:
onclick 单击鼠标时
onmouseover 鼠标悬停
onmouseout 鼠标移出
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点, 表示文本框等获得鼠标光标
onblur 失去焦点, 表示文本框失去鼠标光标
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
七.BOM: 浏览器对象模型: browser object model