front-end study day13

JavaScript

JS

简介

JavaScript,一种直译式脚本语言,是一种动态类型、基于原型的语言,内置支持类。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能.

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息
  • 控制cookies,包括创建和修改等

NOTE:

  1. js代码可以存放于html内部,也可以保存在外部(需要在html中引用)

  2. 通常建议将js代码放在body中的底部,这样可以减少影响页面加载的可能

  3. 注释使用///**/

变量

在js中,有两种类型的变量:

  • 全局变量,声明方式: name = 'wangzhiliang'
  • 局部变量,声明方式: var name = 'wangzhiliang'

NOTE:

  1. 变量名是大小写敏感的
  2. 变量名以字母开头(也可以以$_开头,但是不推荐这样做.)

基本数据类型

  • 数字
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var page = 111;
var age = Number(18);
var a1 = 1, a2 = 2, a3 = 3;
<!-- 将字符串转换成整形, 不成功则返回NaN, 可通过isNaN()来判断. -->
parseInt("1.2");
<!-- 将字符串转换成浮点型, 不成功则返回NaN -->
parseFloat("1.2");
</script>
  • 布尔
1
2
3
4
5
<script type="text/javascript">
var flag_true = true
var flag_false = false
var flag = Boolen(1==1)
</script>
  • 字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
var name = "tom";
var name = String("tom");
var age_str = String(8);
<!-- 常用方法:
1. obj.trim() 去除字符串两边的空格
2. obj.charAt(index) 查找对应索引的字符
3. obj.substring(start,end) 获取子字符串
4. obj.indexOf(char) 查找指定字符的索引值,如果有多个,仅显示第一个出现的索引
5. obj.length 获取字符串长度
-->
</script>

NOTE: 索引从0开始!

  • 数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
<!-- 定义数组 -->
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')
<!-- 常用方法:
1. obj.push(ele) 尾部追加
2. obj.unshift(ele) 头部追入
3. obj.splice(index,0,'content') 指定位置插入
4. obj.pop() 数组尾部获取
5. obj.shift() 数组头部获取
6. obj.splice(index,count) 指定位置删除count个字符
7. obj.slice(start,end) 切片
8. newArray = obj1.concat(obj2) 合并
9. obj.reverse() 反转
10. obj.join('char') 使用‘char'拼接字符串
11. obj.length 获取数组长度,即元素个数
-->
</script>
  • 字典
1
2
3
4
5
6
<script type="text/javascript">
<!-- 定义字典 -->
var items = {'k1': 123, 'k2': 'tony'}
console.log(items['k1'])
</script>

还有两种特殊的类型:

  1. undefined,表示为定义: var name;

  2. null,一个特殊值.

语句

条件语句之if:

1
2
3
4
5
6
7
8
9
var age=22;
if(age<18){
document.write("你还年轻.")
}else if(age>20){
document.write("青春不再了")
}else{
document.write("不说啥了")
}

条件语句之switch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var day=new Date().getDay();
switch (day)
{
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
default: //如果不符合上述条件,则执行default语句
x="Looking forward to the Weekend";
}
}

数组的for循环:

1
2
3
4
5
6
7
8
9
10
11
var names = ['a','b','c']
<!-- 方式一 -->
for(var i=0;i<names.length;i++)){
console.log(names[i])
}
<!-- 方式二 -->
for(var index in names){
console.log(names[index])
}

字典的for循环:

1
2
3
4
5
6
var names = {"name": "alex", "age": 18};
for(var index in names){
console.log(index);
console.log(names[index]);
}

while循环:

1
2
3
4
5
6
7
8
9
10
11
12
var names = ['a','b','c','d']
var i = 0
while(i<names.length){
console.log(names[i])
i++
if(i==1){
continue;
}else if(i==3){
break;
}
}

异常处理

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。

描述这种情况的技术术语是:JavaScript 将抛出一个错误。

而捕获错误就需要用到try...catch...语句:

  • try 语句允许我们定义在执行时进行错误测试的代码块。
  • catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
  • JavaScript 语句 try 和 catch 是成对出现的。

实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var txt="";
try{
adddlert("Welcome guest!");
}
catch(err){
txt="本页有一个错误。\n\n";
txt+="错误描述:" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
</script>

函数

声明普通函数:

1
2
3
function functionName(parameters) {
执行的代码
}

NOTE: 函数声明后不会立即执行,在我们要使用时调用即可.

还有两种特殊的函数:

  1. 定义匿名函数:
1
2
3
4
var fun = function(){
console.log("匿名函数,没有函数名,通过变量调用")
}
fun()
  1. 定义自执行函数:
1
2
3
(function(){
console.log("声明后立即执行")
})()

序列化和反序列化

将一个值序列化为一个JSON字符串:

JSON.stringify(value)

将一个JSON字符串反序列化为对象:

JSON.parse(str)

参考资料:

转义

一般情况下,网址是由大小写字母、数字和一些特殊字符组成的。如果包含了中文,就需要进行转码了。

常用方法:

  • encodeURI(URI)
  • decodeURI(URI)
  • encodeURIComponent(URI)
  • decodeURIComponent(URI)

如果是对值进行转义:

  • escape()
  • unescape()

当URI函数使用错误返回错误:

  • URIError

eval

eval(string), 将一个JS代码字符串求值成特定对象.

DOM

1. 简介

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构:

dom树

DOM是浏览器提供的,和js无关.但是js可以通过dom接口去操作html.

DOM节点

看上图可知:

  1. 将整个html文档作为根节点
  2. 每个 HTML 元素是元素节点,节点又分为两种类型
    1. 父子节点
    2. 同级节点
  3. HTML 元素内的文本是文本节点
  4. 每个 HTML 属性是属性节点
  5. 注释是注释节点

操作DOM

1
2
3
<body>
<div id='top'></div>
</body>

现在,我想要修改上面的div元素.应该怎么做:

  1. 找到它
  2. 修改它

要找到符合条件的目标(比如修改p标签),就需要使用选择器了.常用选择器有:

  • document.getElementById() #返回带有指定 ID 的元素。
  • document.getElementsByTagName() #返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
  • document.getElementsByClassName() #返回包含带有指定类名的所有元素的节点列表。
  • document.getElementsByName(‘name’) #返回带有指定名称的对象的集合

这里,可以使用id来找到它:

var d = document.getElementById('top')

修改它,可以使用:

  1. innerText
  2. innerHTML

现在,就往div中添加内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id='top'></div>
<script type="text/javascript">
var d = document.getElementById('top')
<!-- 设置文本内容 -->
d.innerText = '123'
<!-- 设置html内容
d.innerHTML = '<p>添加一个p标签.</p>'
-->
</script>
</body>

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

一些常用事件:

属性此事件发生在何时
onabort图像的加载被中断。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。

day13 end