JavaScript基础

时间 2019-11-13

标签 javascript 基础栏目 JavaScript 繁體版

原文原文链接

知识内容：html

1.JavaScript简介web

2.如何编写JavaScriptexpress

3.JavaScript基础知识编程

4.其余数组

参考资料：《JavaScript高级程序设计》浏览器

1、JavaScript简介markdown

1.JavaScript是什么app

JavaScript是一门编程语言，简称js，浏览器内置了JavaScript语言的解释器，因此在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器能够解释并作出相应的处理编程语言

JavaScript的特色以下：ide

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>

JavaScript示例代码

2.JavaScript实现

js最初是一门为了网页交互而设计的语言，一个完整的Javascript实现由下列三个部分组成：

ECMAScript (核心)
文档对象模型（DOM）
浏览器对象模型（BOM）

严格来讲，js是ECMAScript的实现，是ECMAScript+BOM+DOM组成的一种web开发技术

3.JavaScript代码执行顺序

非事件处理代码：从上到下顺序执行
事件处理代码：待非事件处理代码执行完以后而且事件被触发时执行

2、编写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代码

3、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

4、其余

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)