JavaScript基础
知识内容：
1.JavaScript简介
2.如何编写JavaScript
3.JavaScript基础知识
4.其他
参考资料：《JavaScript高级程序设计》
一、JavaScript简介
1.JavaScript是什么
JavaScript是一门编程语言，简称js，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理
JavaScript的特点如下：
- js是一门弱类型语言，其变量类型采用弱类型，并未使用严格的数据类型 （灵活性）
- 是一种解释性脚本语言（代码不进行预编译），官方名称为 ECMAScript（因定义语言的标准为 ECMA-262）
- 主要是用来向html页面添加交互行为（可以直接嵌入html页面，也可以单独写成文件，结构和行为分离）
- js有事件驱动机制，js对用户的响应，是以事件驱动的方式进行的。在网页中执行了某种操作所产生的动作，称为“事件”，如按下鼠标、移动窗口等
- JavaScript具有跨平台性，JavaScript依赖于浏览器本身，与操作环境无关，只要设备有浏览器，就可以运行js语言
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" id="user" > 9 <input type="button" onclick="GetData();" value="点我" /> 10 <script> 11 function GetData(){ 12 var i = document.getElementById('user'); 13 alert(i.value); 14 } 15 </script> 16 </body> 17 </html>
2.JavaScript实现
js最初是一门为了网页交互而设计的语言，一个完整的Javascript实现由下列三个部分组成：
- ECMAScript (核心)
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
严格来说，js是ECMAScript的实现，是ECMAScript+BOM+DOM组成的一种web开发技术
3.JavaScript代码执行顺序
- 非事件处理代码：从上到下顺序执行
- 事件处理代码：待非事件处理代码执行完之后并且事件被触发时执行
二、编写JavaScript的三种方式
1.在HTML的script标签中编写JavaScript
- HTML的head中
- HTML的body代码块底部(推荐)
将script标签放在head中：
1 <!-- __author__ = 'wyb' --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>在HTML中的script标签中编写JavaScript</title> 7 8 <script> 9 function hello() { 10 document.getElementById("message").innerHTML = "在HTML中的script标签中编写JavaScript"; 11 } 12 </script> 13 14 </head> 15 <body> 16 17 <div id="message"></div> 18 <!--button是一个按钮控件，其onclick属性定义当用户单击按钮时执行的JavaScript脚本--> 19 <button type="button" onclick="hello();">Try it</button> 20 21 </body> 22 </html>
注：由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已
将script标签放在body代码块底部如下：
1 <!-- __author__ = 'wyb' --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>在HTML中的script标签中编写JavaScript</title> 7 </head> 8 <body> 9 10 <div id="message"></div> 11 <!--button是一个按钮控件，其onclick属性定义当用户单击按钮时执行的JavaScript脚本--> 12 <button type="button" onclick="hello();">Try it</button> 13 14 <!--将script标签放在body代码块底部--> 15 <script> 16 function hello() { 17 document.getElementById("message").innerHTML = "将script标签放在body代码块底部"; 18 } 19 </script> 20 21 </body> 22 </html>
2.引入外部的JS文件
1 - 引入外部的js文件 2 <script src='js文件路径'> </script> 此时JavaScript代码在js文件路径中的JavaScript文件中 3 4 注: JS代码最好放置在 <body>标签内部的最下方
3.在浏览器的console中编写
浏览器右键点击 -> 选中检查 -> 选中以下的console:
然后即可在这里编写JavaScript代码
三、JavaScript基础知识
1.JavaScript变量
JavaScript中的变量是松散类型的，可以保存任何值，关于JavaScript中的变量类型看最下面的详细介绍
变量定义：
1 name = "wyb" # 全局变量 2 var name = "wyb" # 局部变量
注：未经过初始化的变量的值为undefined；在函数中用var定义的变量将成为局部变量，这个变量在函数退出后就会被销毁
JavaScript中的变量类型(数据类型)：
JavaScript中所有变量类型(数据类型)可以分为两类：
- 基本类型：undefined、null、布尔、数字、字符串
- 引用类型：对象(数组、字典等)
(1)动态的属性
对于引用类型的变量，我们可以为其添加属性和方法，也可以改变和删除其属性和方法
1 var person = new Object(); // 创建对象
2 person.name = "wyb";
3 alert(person.name);
(2)复制变量值
基本类型和引用类型复制变量值的方式是不同的
- 基本类型：再创建一个新值赋给新变量，也就是说这两个变量完全独立，只不过值是一样的，保存值的内存地址不一样，赋值完后这两个变量可以参与任何操作而不会互相影响
- 引用类型：把存储在变量对象中的值复制一份放到为新变量分配的内存地址中，但是这次复制的是一个指针，这个指针指向对象，赋值完后者两个变量实际上引用的同一个对象
1 var num1 = 5;
2 var num2;
3 num2 = num1;
4 console.log(num1, num2); // 5 5
5
6 num1 = 3;
7 console.log(num1, num2); // 3 5
1 var obj1 = new Object();
2 var obj2 = obj1;
3 obj1.name = "wyb";
4 console.log(obj1.name, obj2.name); // "wyb" "wyb"
(3)传递参数
JavaScript中所有参数都是按值传递：
- 传递基本类型的变量值时，被传递的值会复制给局部变量，因此局部变量的变化不会反映到函数外部
- 传递引用类型的变量值时，会把这个值在内存中的地址复制给局部变量，因此这个局部变量的变化会反映在函数的外部
1 function addTen(num){
2 num += 10;
3 return num;
4 }
5
6 var count = 20;
7 var result = addTen(count);
8 console.log(count, result); // 20 30
1 function setName(obj){
2 obj.name = "wyb";
3 }
4
5 var person = new Object();
6 setName(person);
7 console.log(person.name); // "wyb"
1 function setName(obj){
2 obj.name = "wyb";
3 obj = new Object();
4 obj.name = "Greg";
5 }
6
7 var person = new Object();
8 setName(person);
9 console.log(person.name); // "wyb" -> 说明传递参数时是按值传递
2.补充说明
(1)语法区分大小写
JavaScript的语法区分大小写，例如test和Test是两个不同的变量
(2)标识符
标识符：变量、函数、属性的名字或者函数的参数
JavaScript中的标识符的格式规则：
- 第一个字符必须是字母或下划线或美元符号
- 其他字符可以是字母、下划线、美元符号或数字
- 不能把关键字、保留字、true、false、null用作标识符
注：按照惯例，JavaScript中的标识符采用驼峰命名法，也就是第一个字母小写，后面每个单词的首字母大写
标识符命名实例：setInterval、myCar、doSomethingImportant
(3)注释
JavaScript中的注释类似C、C++：
- // 单行注释
- /**/ 多行注释
1 // 这是注释内容 2 /* 3 这是注释内容 4 */
(4)语句
JavaScript中的语句必须以分号结尾(es5标准)
(5)关键字和保留字
详细看这里：http://www.itxueyuan.org/view/6627.html
3.操作符
算术运算符(y的值为5)：
赋值运算符(x的值为10，y的值为5)：
布尔运算符：
- !：非
- &&：与
- ||：或
关系操作符：
- <：小于
- >：大于
- <=：小于等于
- >=：大于等于
相等操作符：
- ==：相等
- !=：不相等
- !==：全等
- ===：不全等
注：上面两个和下面两个操作符的区别是上面比较时会自动转换数据类型进行比较，而下面一个不会
实例：
条件操作符：
variable = boolean_expression ? true_value : false_value;
实例：var max = (num1 > num2) ? num1 : num2; // 如果num1大于num2，max赋值为num1否则赋值为num2
四、其他
1.序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2.URL转义
- decodeURI( ) 对URI解码
- decodeURIComponent( ) 对URI解码
- encodeURI( ) 对整个URI进行编码
- encodeURIComponent( ) 对URL中某一段进行编码
- URIError 由URl的编码和解码方法抛出
3.eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
-
语法: eval(string)
-
返回值:通过计算 string 得到的值（如果有的话）。
-
注: 该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数
4.JavaScript的输出
(1)JavaScript常规输出
- console.log() 在浏览器的命令行中输出
(2)log 封装输出
普通封装：
1 var log = function (){ 2 // arguments 在JavaScript 的函数中 保存所有的参数 3 console.log(arguments); 4 // 在js中 可以不声明参数 但是任然可以使用参数 5 } 6 7 log(1) 8 log("test", "hello") 9 log("debug", "log")
完全封装(输出效果和原生log一样)：
1 var log = function() { 2 console.log.apply(console, arguments) 3 } 4 5 // 循环 6 // 在循环体内, 通过 i 变量得到当前是第几次循环 7 var i = 1 8 while(i < 5) { 9 log(i) 10 i++ 11 }
(3)向文档对象中输出
注：文档对象->可以理解为当前页面
1 document.write("向文档对象中写入内容") 2 document.write(666)
(4)弹框输出
1 alert("弹框输出内容") 2 alert(666)
浙公网安备 33010602011771号