Javascript快速入门

JS引入方式

内部脚本：将JS代码定义在HTML页面中
- JS代码必须位于<script>和</script>之间
- 在HTML文档中，可以在任意地方放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可以改善显示速度
外部脚本：引入外部JS文件到HTML页面中

html 复制代码

<script src="url.js"></script>

语法

仅列出笔者认为需要辨析的语法

循环语句:for x of xxx...

输出语句

windows.alert()写入警告框
document.write()写入html输出
console.log()写入浏览器控制台

变量

JS是弱类型语言，一个变量能接受不同值

var：作用域比较大，全局变量；可重复定义；
let：定义局部变量，不能重复定义；

==和===的区别：==会进行类型转换，===不会

函数

方法一

javascript 复制代码

function functionName(参数){
	//代码语句
}

不需要指定形参类型和方法返回值

方法二

javascript 复制代码

var functionName = function(参数）{
	//code
	}

箭头函数

(...) => (...)

JS对象

Array对象

javascropt 复制代码

var arr = new Array(1,2,3,4);
var arr = [1,2,3,4];

数组长度可变，数据类型可不一致

.Length属性：数组长度

forEach()方法：遍历数组中有值的元素。需要接受一个函数来处理遍历到的元素

javascript 复制代码

arr.forEach(function(e){
	console.log(e);
	})

Push()方法：添加元素到数组的尾部

Splice()方法：删除元素。splice(start, deleteCount)

String对象

charAt()方法：返回在指定位置的字符

indexOf()：检索指定子串/字符在字符串中出现的位置

trim()：去除字符串两边的空格

substring()：提取指定两个索引间的子字符串

自定义对象

js 复制代码

var objectName = {
	attr1 : value1,
	attr2 : value2,
	functionName: function(p1, p2...){}//:function可以省略
};

JSON对象

JSON：JavaScript对象标记法

JSON本质是文本类型，需要用单引号定义

所有的key必须用双引号包裹

JSON,parse():将字符串转化为JSON对象

JSON.stringfy():将JSON对象转化为JSON字符串

BOM对象

BOM：浏览器对象模型，允许JS与浏览器对话

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window对象

window.alert()：弹出警告框。window.可以省略
window.confirm():显示带有确认和取消按钮的对话框，返回一个布尔类型
setInterval()：按照指定周期调用函数或计算表达式
setTimeout()：在指定毫秒数后调用函数或计算表达式

Location对象

从window.location获取

window.location.href：地址栏中的url信息

DOM对象

DOM：文档对象模型，将标记语言的各个组成部分封装为对应的对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Core DOM：所有文档类型的标准模型
XML DOM：XML文档的标准模型
HTML DOM：HTML文档的标准模型
- Image
- Button

获取元素的四种方式

document.getElementById('h1');根据id属性值获取，返回单个Element对象
document.getElementsByTagName('div')：根据标签名称获取，返回Element对象的数组
document.getElemensByName('hobby')
document.getElementsByClassName();

JS事件监听

事件绑定

通过HTML标签中的事件属性进行绑定

js 复制代码

<input type="button" onclick="on()" value="button1">
<script>
	function on(){}
</script>

通过DOM元素绑定

js 复制代码

document.getElementById('btn').onclick=function(){}

常见事件：

onclick：鼠标单击
onblur：元素失去焦点
onfocus：元素获得焦点
onload：被加载完成
onsubmit：表单提交啊
onkedown：键盘按下
onmouseover：鼠标悬停
onmouseout：鼠标移开