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提交后