第一章

HTML——页面结构
CSS——页面样式
js——页面行为

JavaScript作用：实现网页交互或动态效果，js是一种基于对象和事件驱动，是一种计算机客户端脚本语言，主要在浏览器解释运行，具有安全性能
js特点：动态类型，弱类型，跨平台性，兼容性

js基本用法

<script type = "text/javascript">
	console.log("hello ");
	alert("hello");
</script>

位置：

head标签中
body结束标签之前
body结束标签之后

引入外部js

外部文件定义为 *.js
外部文件可以在HTML中的head或body中引入
一次定义可以重复使用

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>基本结构</title>
		<script src = ""></script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>基本结构</title>
	</head>
	<body>
	</body>
	<script src = ""></script>
</html>

外部脚本文件中不含有<script>标签，只含有js代码
引入外部文件的时，文件js标签中不能有js代码
如果同时有外部js问价引入与内部js代码，需要各自使用js标签
demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>基本结构</title>
		<script src = ""></script>
		<script text = "text/javascript">
			//contents
		</script>
	</head>
	<body>
	</body>
</html>

总结

是一种解释性脚本语言（代码不进行预编译）。
主要用来向 HTML 页面添加交互行为。
可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

第二章

基础语法

js语法特点

弱类型：变量的数据类型可以任意切换
动态类型：变量声明创建时不用指定数据类型

js输出内容的三种方式

document.wrte() 页面输出内容
console.log() 控制台输出
alert() 弹出框输出

js注释

单行注释 //
多行注释 /**/

变量

变量声明

通过var声明
不用指定数据类型

变量命名

区分大小写
以字母 _ & 开头
不是关键字保留字

五种原始数据类型：Number String Boolean Undefined Null

NaN 属于Number类型（Not a Number）
isNaN() 判断是不是 NaN 类型
- isNaN(“123abc”);//true

判断数据类型 typeof

var i = 10;
console.log(typeof i); //number

弱类型：不同类型变量之间可以相互赋值，但在某一时刻，一个变量只存在一种数据类型
字符串的拼接
数据类型之间的转换

隐式类型转换
- 转换成String类型：用“ ”连接
  - var num = “img” + “.img”;
- 转换成Boolean类型：变量前面加 !!
  - !!参数
显示（强制）转换
- 全局函数
  - parseInt(参数); String(参数); Boolean(参数);
NaN转换成布尔类型是false
undefined转化成数值类型是NaN
如果字符串是纯数字：字符串转化为数值类型是数字本身
如果字符串是非纯数字：NaN
强制转换为Number：
parseInt(参数); parseFloat(参数); Number(参数);

程序 = 数据 + 算法
任何复杂的程序算法都可以通过顺序分支循环三种基本的程序逻辑组合实现

第三章

函数的定义和调用

原则：可重复利用
函数的要素：函数名函数的参数函数的返回值
函数的分类
- 内置函数
  -parseInt() Boolean() String() alert()
- 自定义函数
函数的定义——function关键字（返回值可以没有）
匿名函数
- 函数定义时，函数名是可选的，可以定义没有函数名的函数，但该函数必须马上执行或赋值给一个变量（或事件）
  demo

window.onload = function {
	alert('hello');
};

函数的调用：

直接调用函数
- 使用**()**运算符，调用一个函数
- 可以向函数传递参数
- 函数可能有返回值，该返回值可以作为普通数据进行处理
在事件中调用函数

函数的参数

在定义函数时使用了多少个形参，在该函数调用的时候应该给出相同数目的实参（也可以小于）
在函数体中，形参就是一个变量

函数的返回值

rerurn语句表示结束当前函数的执行
return语句可以不带表达式return语句不带表达式时仍会有返回值——undefined
没有return语句的时候也会有返回值 undefined

函数嵌套
全局变量和局部变量

全局变量
- 在所有的函数之外定义，或者没有通过var声明变量
- 其作用范围是同一个网页文件中的所有脚本
局部变量
- 通过var声明且定义在函数体之内的变量
- 只作用于该函数体

事件和事件处理函数

事件：

能被js检测到的活动
用户变化（鼠标或键盘操作等）
状态变化（加载、改变文本框内容等）

事件处理函数

由触发时间触发该活动
事件的三要素
- 在哪个html元素上发生
- 发生什么事件
- 程序做何处理
事件绑定的方法
常用的事件类型
- onload 页面加载事件（文档元素）
- onunload 页面退出事件——在用户退出页面时发生
- 表单事件
  - onblur元素失去焦点
  - onfocus 元素得到焦点
  - onsubmit 表单被提交
  - onchange 元素失去焦点并且元素的内容发生改变时
- 鼠标事件
  - onmousemove 鼠标指针在元素上移动时
  - onmouseout当鼠标指针移出元素的时候触发
  - onmouseover 移动到元素上时触发
  - onclick对象被点击时触发
- 键盘事件
  - onkeydown 按下一个键时
  - onkeypress 按下后松开
  - onkeyup 被松开时

js：基于事件驱动

第四章

字符串

demo

var str = "hello world";
console.log(str.length);//11  获取长度
console.log(str.charAt(0));//按照索引找到值  等同于str[0]
console.log(str.indexOf("ello"));//1 查找子串位置，没有就返回-1
var str1 = str.slice(0,5);//截取子串  end如果没有会截取到最后
var str2 = str.split(" ");//分割成数组，此处的分隔符是空格
console.log(str2[0].toUpperCase());//转化成大写，不会对源字符串产生影响
console.log(str2[1].toLowerCase());//转化成小写，不会对原来的字符串产生影响
console.log(str2[0]);//hello
console.log(str2[1]);//world

在这里插入图片描述
2. 字符串小结

字符串由单双引号声明
字符串是不可更改的，故字符串的方法返回的都是全新的字符串，没有改变原始的字符串
字符串方法的命名：小驼峰命名法

数组

demo

var arr1 = [1,2,3,4,5];//通过[]
var arr2 = new Array(1,2,3,4,5);//通过new Array
var arr = [1,"2",3,4,5];//数组中可以是不同的数据类型
console.log(arr.length);//5 数组长度
arr[5] = "io";
console.log(arr.length);//6 数组长度可变
console.log(arr.indexOf(3));//返回元素出现的位置，如果没有就返回-1
console.log(arr.sort());//默认从小到大排序
arr.reserve();//逆序
console.log(arr);//
console.log(arr.shift());//删除并返回数组的第一个元素
console.log(arr);//
console.log(arr.pop());//删除并返回数组的最后一个元素
console.log(arr);
arr.slice(start,end);//返回的是提取的子数组

splice：向数组中添加或删除项目

splice(index,howmany,item1…itemx);
index:整数，规定删除或添加数目的位置
howmany：删除的数目，为0则不会删除
item1…itemx：添加的信息

forEach函数

功能：对数组中每个元素执行一遍提供的函数
语法：arr.forEach(function(currentValue,index,arr){ })
- currentValue：必需。当前元素
- index：可选。当前元素索引值
- arr：可选。当前所属的数组对象
  demo

var arr = [1,2,3,4,5];
arr.forEach(function(value,index,att){
	console.log(value ,index ,att);//值 下标 输出数组
})

在这里插入图片描述

第五章

对象：js是一种基于对象的语言

具有一切面向对象的部分特征
js中，一切皆对象

js中的对象

对象是一系列相关属性和方法的集合
- 属性：通过变量来表示（状态的，静态的）
- 方法：通过函数来实现（过程的，动态的）
是一种数据类型

demo

var dog = {
	name:"lily",//用逗号隔开
	breed:"Husky",
	weight:60,
	jump:function(){//
		//some action...
	}//方法和属性类似，就是值不一样，换成了一个函数
	//最后一个属性不用逗号
}

定义对象

使用一对大括号表示对象，属性和方法写在括号内
属性包括属性名和属性值，之间用冒号
属性和属性之间用逗号
方法同属性类似，只是值的部分是一个函数体
最后一个属性值后面不加逗号

操作

var dog = {
	name:"ayuan",
	breed:"Husky",
	loves:["eat","sleep","play"],
	jump:function(){
		console.log(this);
		console.log(this.name);
	}
}
console.log(dog.name);//对象属性的访问  对象.属性名
console.log(dog["name"]);//对象["属性名"]
console.log(dog.loves);//输出的是数组
dog.weight = 22;//增添属性
console.log(dog.weight);
dog.name = "yuanzi";//修改属性值
console.log(dog.name);//yuanzi
delete(dog.weight);//删除属性
console.log(dog.weight);//undefined
for(var key in dog){//遍历
//key是属性名
//objName是对象名
	console.log(dog[key]);//不可以用dog.key
}

构造方法

能够创造出对象的特殊函数
使用function关键字声明（构造函数的首字母大写）
构造函数中，this指代实例对象
通过new关键字调用构造函数
demo

function Movie(title,type,rating,showtime){
	this.title = title;//this的使用，通过this定义和访问实例对象的方法和属性
	this.type = type;
	this.rating = rating;
	this.showtime = showtime;
}
var movie = new Movie("title1","type1","rating1","showtime1");
for(var key in movie){
	console.log(movie[key]);
}

内置对象

String Array Math Date …
js中的对象分类

宿主对象：window document event
内置对象：Array String
自定义对象（dog等）

String
- 创建String对象
Array
- 创建array实例对象
  - var movie = new Array(“007”,“指环王”);
  - var movie = [“007”,“指环王”];
Math
- 不需要创建对象，直接使用
- 四舍五入：Math.round();
- 向下取整：Math.floor()
- 向上取整：Math.ceil()
- 生成0~1随机数（不包含0和1）：Math.random()
- 取最大值：Math.max()
- 取最小值：Math.min()
Date
- demo

var date = new Date();
console.log(date.toLocaleString());//2020/1/9 下午1:48:08
console.log(date.getFullYear());//2020
console.log(date.getMonth());//0  月份从0开始
console.log(date.getDate());//当前日

console.log(date.getHours());//当前时
console.log(date.getMinutes());//当前分
console.log(date.getSeconds());//当前秒

除了undefined，js中的一切都可以看做是对象

第六章

js的组成：BOM DOM ECMAscript

BOM（Browser Object Model）浏览器对象模型

浏览器提供的用户与浏览器窗口之间交互的对象及操作接口的集合
window:history location navigator screen document

window对象

弹出框
- 警告框alert
- 确认窗口confirm
- 输入框prompt
  demo

alert("to get better");//
confirm("sure？");//会有确定和取消的选项
prompt("what","here");//message是提示框中显示的内容，default是单行文本框中默认的内容

延迟执行
demo

var timeout = setTimeout(
function(){
alert("hello");},3000);//语句必须是函数类型，否则不会生效
clearTimeOut(timeout);//清除时延

周期执行
demo

var interval = setInterval(function(){alert("2");},1000);
setTimeout(function(){clearInterval(interval);},3000);

窗口操作
- window.open(url,name,features,replace);
  - url：在打开的窗口中加载文档的url名称
  - name：新打开窗口的名称
  - features：新开窗口的特性
  - replace：是否替换窗口中浏览的当前历史，布尔值
- 关闭窗口：window.close()

history对象（可以访问浏览器窗口的浏览历史）

history.back();后退到上一个访问过的页面
history.forward();前进到下一个访问过的页面
history.go(n);跳转到某个访问过的页面
go(n)如果n为正数，则前进到第n个访问过的网页
如果n为负数，则后退到第n个访问过的网页

location对象包含当前窗口的URL信息

location.host 主机和端口号
location.hostname 主机名
location.href 当前页面的URL
location.port 端口号
location.reload：重新加载当前页面
location.hash 设置或返回URL的锚部分（从“#”开始）
location.search 设置或返回当前URL的查询部分

navigator对象包含浏览器的信息，类型版本等等

在这里插入图片描述

screen对象包含客户端显示屏幕的相关信息

在这里插入图片描述

document对象指向当前窗口内的文档节点

document.write(); 将一串文本写入文档流

第七章

DOM（Document Object Model）：文档对象模型
访问增加删除修改

DOM分类：

核心DOM：用于任何结构化文档的标准模型
HTML DOM：用于HTML文档的标准模型
XML DOM：用于XML文档的标准模型

DOM树

DOM将HTML文档抽象为树形结构（DOM树）
HTML中的每一项内容都可以在DOM树中找到
对文档内容的操作即对DOM树的操作

HTML文档中的所有内容都是节点

整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

DOM 节点

是一个对象，拥有属性和方法

元素节点

HTML开始标签中的属性为元素节点对象的属性
HTML开始标签中的事件属性为元素节点对象的方法
元素节点对象中的方法函数中的this指向当前触发事件的元素

属性节点
文本节点

空格换行空格属于文本节点

节点关系：父节点子节点同胞节点

访问节点

直接获取节点

通过id属性获得结点
- document.getElementById([id名称]);
通过标签名获得所有同名标签，得到的是数组
- document.getElementsByTagName([tag]);
通过类名获得所有类名相同的标签，得到的是数组
- document.gettElementsByClassName([className]);

通过节点关系获取

通过父节点
子节点
前后兄弟节点

特殊元素节点

document.documentElement 返回 html 元素
document.head 返回html中的head元素
document.body 返回html文档中的body元素

元素节点元素树

在这里插入图片描述

元素节点内容

var txt = document.getElementById("top").innerHTML;//读取
document.write(txt);

innerHTML

DOM中元素节点的属性，相当于一个容器
用于获取或改变任意元素的节点的内容，该属性可读可写

innerText
textContent

元素节点属性

获取某一元素节点的属性

node.getAttribute(attrName);

设置某一元素节点的属性

node.setAttribute(attrName,value);
- 当属性存在时，为修改相应的属性值
- 当属性不存在时，为添加相应属性

删除某一元素节点的属性

node.removeAttribute(attrName);

判断某一元素节点是否含有某属性

node.hasAttribute(attrName);
返回值为布尔类型

第八章

在这里插入图片描述

DOM节点操作

var body = document.body;//获得body元素
var btn = document.createElement("button");//创建元素节点
var text = document.createTextNode("hello!");//创建文本节点
body.appendChild(btn);//默认添加到最后
body.insertBefore(text,btn);//在btn之前添加
var btn2 = document.createElement("button");
body.replaceChild(btn2,btn);//用btn2替换节点btn
body.removeChild("btn2");//删除节点
var img = new Image();//等价于document.createElement("img");
img.src = "某个src";
img.width = 200 + "px";
img.height = 200 + "px";

table对象

var table = document.createElement("table");
table.rows
table.createCaption();//为表格创建一个caption元素
table.insertRow(2);//在表格中的指定位置插入一个空的tr元素
table.deleteRow(2);//从表格中删除指定位置的行
var tr = table.insertRow();
tr.cells;//返回表格中所有td或th元素的集合
tr.insertCell(3);//在一行的指定位置插入一个空的td元素
tr.deleteCell(4);//删除表格行中指定的td元素
var td = tr.insertCell();//创建td标签
var th = document.createElement("th");//创建th标签

第九章

DOM中每个元素节点都有一个style对象管理元素的样式
style对象的属性（即各个样式信息）都是可读可写的
document.getElementById(“id”).style.property = “值”;

规则：

CSS样式属性名为单个单词，在js中以相同的名称来表示
CSS样式属性为多个单词，在js中将第一个单词加上首字母大写的第二个单词，且没有横线
- color——style.color
- front——style.front
- font-family——style.fontFamily
- background-color——style.backgroundColor

第十章

事件冒泡

事件按照从目标元素到根元素（document对象）的顺序触发
即事件的发生顺序为：button - div - body - html - document

使用stopPropagation()方法阻止事件冒泡

Java the world

发布了33 篇原创文章 · 获赞 5 · 访问量 685

私信关注

JavaScript综述

第一章

js基本用法

demo

总结

第二章

基础语法

变量

第三章

函数的定义和调用

事件和事件处理函数

第四章

字符串

数组

第五章

内置对象

第六章

BOM（Browser Object Model）浏览器对象模型

window对象

history对象（可以访问浏览器窗口的浏览历史）

location对象包含当前窗口的URL信息

navigator对象包含浏览器的信息，类型版本等等

screen对象包含客户端显示屏幕的相关信息

document对象指向当前窗口内的文档节点

第七章

DOM 节点

访问节点

元素节点元素树

元素节点内容

元素节点属性

第八章

DOM节点操作

第九章

第十章

猜你喜欢

JavaScript综述

第一章

js基本用法

demo

总结

第二章

基础语法

变量

第三章

函数的定义和调用

事件和事件处理函数

第四章

字符串

数组

第五章

内置对象

第六章

BOM（Browser Object Model）浏览器对象模型

window对象

history对象（可以访问浏览器窗口的浏览历史）

location对象包含当前窗口的URL信息

navigator对象 包含浏览器的信息，类型 版本等等

screen对象 包含客户端显示屏幕的相关信息

document对象 指向当前窗口内的文档节点

第七章

DOM 节点

访问节点

元素节点 元素树

元素节点内容

元素节点属性

第八章

DOM节点操作

第九章

第十章

猜你喜欢

navigator对象包含浏览器的信息，类型版本等等

screen对象包含客户端显示屏幕的相关信息

document对象指向当前窗口内的文档节点

元素节点元素树