javascript之路
01-认识JavaScript
初始JavaScript
JavaScript是一种直译脚本语言,是一种动态类型,弱类型,基于原型的语言
前端三层结构层-html,表现层-CSS,行为层-JavaScript
JavaScript通常用来操作HTML页面,响应用户操作,验证数据等等
Java和JavaScript的关系,jQuery和JavaScript的关系
JavaScript是布兰登·艾奇在1995年5月份创建
ECMAScript:语法规则,一个标准,JavaScript的实现;DOM:(一个对象)提供方法让JavaScript来操作html的标签节点;BOM:提供方法,以便于JavaScript操作浏览器
二.JavaScript代码写在哪里?
写在html页面中.外部引入,写在标签里面
1)html页面中:标签里面
2) 外部引入:`
3) 标签中:
三.写JavaScript需要注意什么?
严格区分大小写
语法字符半角字符
完整语句后面用;结束
缩进对齐
四.弹窗与调试
常用调试方法
1) alert(“内容”);
2) console.log(“内容”);
几种不好看的系统弹窗
1) alert(“你好”);
2) confirm(“确定?”);
3) prompt(“请输入你的姓名:”);
五.获取元素,注册事件,产生行为
获取的元素.事件 = 反应;
获取元素(这里元素也叫节点/DOM对象)
1) 通过元素ID获取
document.getElementById('元素ID名')
2) 注册事件
document.getElementById('元素ID名').onclick
3) 反应,行为
document.getElementById('元素ID名').onclick =function(){
alert("你好!");
}
六.JS注释
//单行注释
/* 多行注释 */
七.获取元素的几种常用方式
常见元素获取
document.getElementById()//通过ID获取,获取某一个元素,所有浏览器兼容
document.getElementsByClassName()//通过class类名获取,获取是一组,不支持IE8及以下
document.getElementsByTagName()//通过标签名获取,获取是一组,所有浏览器兼容
document.getElementsByName()//通过name获取,获取是一组,很少用,所有浏览器兼容
document.querySelector()//通过css选择器获取,获取第一个元素,支持IE8及以上
document.querySelectorAll()//通过css选择器获取,获取所有满足这个选择器的一组元素,支持IE8及以上
特殊元素获取
document.documentElement//HTML标签获取
document.head//head标签获取
document.title//title标签获取
document.body//body标签获取
操作HTML内容(这不是事件)
操作标签元素的HTML内容,就是一个行为
document.getElementById("元素ID名").innerHTML ="我是通过JS来增加的";
innerHTML 不解析标签
innerText 解析标签
document.getElementById("wrap").innerHTML = "<a href=' ' >百度</a>"
document.getElementById("wrap").innerText = "<a href=' '>谷歌</a>"
八.JS DOM0级事件的简单认识
事件
方法 / 函数
this
九.定义变量
关键词 变量名 = 值; => 就是把右边的值赋值给左边的变量名,变量名是自己取的
变量命名规则
1)严格区分大小写
2)见名之意
3)不能以数字开头
4)不要使用中文变量名
5)不能使用关键字和保留关键字
6) 可以使用数字 , 字母 , _ , $
ES5定义变量,关键词var
在JavaScript中,{},if,for这些里面的都称之为块级作用域
varmood;//声明不赋值
varmood1 = happy;//声明再赋值
varmood1 = sad;//同层级多次重复声明同一个变量没有意义
1)可以重复申明变量,而且是合法的,并且是无害
2)同一个变量名可以多次赋值
3)可以在代码块内修改代码块之外声明的变量
varmyVar ="zhaoge";
functionfn(str){
returnmyVar ="goudan"+ str;
}
fn("dada");
console.log(myVar);
4) 在全局范围内都有效
varmyVar = [];
for(vari =0; i <10; i++) {
myVar[i] =function(){
console.log(i);
}
}
myVar[6]();
5) 存在生命提升(在声明这个变量之前使用这个变量也是有效的)
6) var声明变量会被提到的三条规则
不要把var语句放在代码块中
不要把var语句放在循环体中
每个函数都使用单一的var语句
ES6定义变量,关键词let,const
使用let声明变量:
异同:用法相同,不同在于let声明的变量只在代码块中生效(也就是块级作用域,后面详细的讲)
1) 只在let命令所在的代码块内有效
2) let声明的变量是定义在块内,但这个变量也可以作用在这个块的子块中
3) let声明变量时,不允许相同的作用域名重复声明同一个变量
4) 在同一个作用域不能和var声明同一个变量名
5) 不存在生命提升,也就是说let声明的变量只有声明了才能使用
注意:就算外层代码块已经用var声明了同一个变量名,在子块里面用let再次声明这个变量名,在这个字块里面也是不能提前使用的.这种现象称之为暂时性死区(TDZ)
5) 用let声明的变量块内和块外相同变量名互不影响
使用const声明变量(常量):
const声明变量,其实是声明的常量,一旦使用const声明,常量的值就不能改变
1) 改变常量值不起作用,重新复制也不会生效
2) 和let一样只在自己的块级作用域内有效
3) 不可重复声明同一个变量名
4) 必须声明就赋值,不能先声明,后面用的时候再去赋值
5) 不会有变量提升
6) 块外和块内的相同变量名互不影响
十二.常见事件(记住)
了解一些基础事件
鼠标事件
事件事件名
onclick左键单击
ondblclick左键双击
onmouseover / onmouseenter(推荐使用)鼠标移入
onmouseout / onmouseleave(推荐使用)鼠标移除
onmousedown鼠标按下
onmousemove鼠标移动
onmouseup鼠标抬起(鼠标松开)
onmousetextmenu右键单击
键盘事件
事件事件名
onkeydown / onkeypress按键按下
onkeyup按键抬起
系统事件
事件事件名
onload加载完成之后
onerror加载出错后
onresize窗口调整大小时
onscroll滚动时
表单事件
事件事件名
onfocus获取焦点后
onblur失去焦点后
onchange改变内容后
onreset重置后
onselect选择后
onsubmit提交后
网友评论