1. 技术文章
  2. 【JavaScript】整体学习笔记

【JavaScript】整体学习笔记

由 天涯浪子 提交于 2020-02-06 23:19:42

JavaScript简介

JavaScript简称js，为方便起见，以下说明均使用简称。
js是一门Web编程语言，用于编写Web程序。它是解释型语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，因此所有浏览器都支持js。几乎每一个Web页面都包含了html、css 和 js，css和js依托于html起作用。html 定义了网页的内容，css 描述了网页的布局，js 主导了网页的行为。

JavaScript用法

HTML中的 js 语句必须位于 script 标签之间，而 script 标签一般放在 head 标签之间：

<html>
<head>
	<script>
		// 此处可书写 js 语句
	</script>
</head>
<body>
</body>
</html>

这种写法也有缺点：当 js 语句很多时，不容易维护。我们也可以采用引用 js 文件的方式：

<html>
<head>
	<script src="js/test.js"></script>
</head>
<body>
</body>
</html>

JavaScript语法

语法定义了语言结构。js 的语言结构包括：数据类型、字面量、变量、操作符、函数等。

  • 字面量：一般固定值称为字面量。如：3.14、“test”、5 + 6、[1, 2, 3]、{firstName:“John”, lastName:“Doe”}。
  • 变量：它用于存储数据，通过变量名访问，它的值是可变的。在 js 中，使用关键字 var 来定义变量。
  • 操作符：算术运算符、赋值运算符、位运算符、比较运算符、逻辑运算符。
  • 数据类型：string，number，boolean，object，function，undifined，symbol。Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。判断类型可以使用 typeof关键字。如：typeof x，返回 x 的数据类型。
  • 函数：可重复执行的代码块。js 语句可以写在函数内，函数可以重复引用。

JavaScript语句

js 语句是发送给浏览器的命令，告诉浏览器该做什么。如，让浏览器弹出一个警告框：

<script>
		alert("This is test");
	</script>

通常我们在每条可执行的语句结尾添加分号。语句的序列组成了 js 代码。
js 语句通常以一个语句标识符开始，如：var、function、if…else、return、for、for…in、while、try、continue、break等。语句标识符是保留关键字，不能作为变量名使用。
提示：js 是脚本语言。浏览器会逐行地执行语句。而传统编程语言，在执行前会对所有代码进行编译。

JavaScript事件

HTML事件是发生在HTML元素上的事情。当在HTML页面中使用 js 时，js 可以响应这些事件。如：

<html>
<head>
	<script>
		function send(){
		    alert("This is a test");
		}
	</script>
</head>
<body>
    <input type="button" onclick="send()" />
</body>
</html>

HTML事件可以是浏览器行为，也可以是用户行为。如：HTML页面完成加载；HTML按钮被点击等。
示例代码中的 onclick 表示元素的事件属性，类似的事件属性还有很多。如：onload，onkeydown等。

JavaScript对象

js 对象是拥有属性和方法的数据。在 js 中，几乎所有的事物都是对象。初始化一个对象：

var car = {type:"Fiat", model:500, color:"white"};

对象也是变量，但对象可以包含多个值。因此可以说对象是变量的容器。对象属性访问：

car.type;
或
car["type"];

通常，js 字符串是原始值。但我们也可可以使用 new 关键字将字符串定义为一个对象。示例代码：

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

这里再扩展下关系运算符 === 的含义，它表示绝对相等，即数据类型与值都必须相等。示例代码：

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

不同于其它面向对象语言，js 的原始值可以使用其对象对应的属性和方法。 js 在执行方法和属性时把原始值当做对象。
字符串属性有：length、constructor、prototype。
字符串方法有：charAt()、concat()、substr()等。

除了 字符串对象，js 还包括：
原型对象（prototype）：所有的 js 对象都会继承它的属性和方法，通过它可以为对象新增属性。
Number对象：在 js 中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。
Date对象：日期对象用于处理日期和时间。
Array对象：使用单独的变量名来存储一系列的值。
Boolean对象：用于将非布尔值转换为布尔值（true 或 false）。如果对象无初始值或者初始值为：0、-0、null、“”、false、undefined、NaN，那么对象的值为false。否则，其值为true。
Math对象：执行常见的算数任务。
RegExp 对象：字符的模型对象或正则表达式对象。用于字符的检索和替换。

JavaScript null 和 undefined

null 表示空对象，类型是 object。
undifined 表示一个没有设置值的变量，类型是 undifined 。
null 和 undefined 的类型不等，但值相等：

typeof undefined             // undefined
typeof null                       // object
null === undefined          // false
null == undefined             // true

类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN（Not a  Number）

Number(false)     // 返回 0
Number(true)      // 返回 1

d = new Date();
Number(d)          // 返回 1404568027739，等效于 d.getTime()   

String(123)       // 返回 “123”
String(false)        // 返回 "false"

JavaScript正则表达式

正则表达式是由一个字符序列形成的搜索模式。你可以用搜索模式来描述你要查询的内容。
正则表达式可用于所有文本搜索和文本替换的操作。正则表达式通常用于两个字符串方法：search() 和 replace()。
语法：/正则表达式主体/修饰符(可选)
搜索示例：

// 使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);   // 输出为 6

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式，如：str.search("Runoob");

替换示例：

// 使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = "Visit Microsoft!"; 
var txt = str.replace(/microsoft/i, "Runoob");  // 返回 Visit Runoob!

replace() 方法可使用字符串作为参数。如：var txt = str.replace("Microsoft", "Runoob");

正则表达式修饰符的含义：i，执行对大小写不敏感的匹配。

在js中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。它有两个常用的方法：test() 和 exec()。
test() 用于检测一个字符串是否匹配某个模式，如果匹配，返回true；否则，返回false。

var patt = /e/;
patt.test("The best things in life are free!"); // 返回 true

也可以写为：/e/.test("The best things in life are free!")

exec() 用于检索字符串中的正则表达式的匹配。该函数返回一个数组，存放匹配的结果。如果未找到匹配，则返回null。

JavaScript错误处理

当 js 引擎执行 js 代码时，会发生各种错误。可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。可能是由于来自服务器或用户的错误输出而导致的错误。当然，也可能是由于许多其他不可预知的因素。当错误发生时，js 引擎通常会停止，并生成一个错误消息。示例：

<html>
<head>
	<script>
	function message(){
		try {
			adddlert("Welcome guest!");
		} catch(err) {
			var txt = "错误描述：" + err.message;
			alert(txt);
		}
	}
	</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

try { 
    if(x < 5)    throw "太小";
    if(x > 10)   throw "太大";
} catch(err) {
    var txt = "错误描述： " + err;
    alert(txt);
}

JavaScript调试

代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。调试工具可能帮我们快速发现错误代码。
常用的调试方法就是借助浏览器提供的调试工具，按F12键启动，可以设置断点，并借助console.log()方法完成调试。
js中有一个用于调试的关键字：debugger。它用于停止执行 js，效果和在调试工具中设置断点一致。如果调试工具没有启动，则 debugger 关键字无效。

JavaScript表单

HTML表单验证可以通过 js 来完成。示例代码：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
	名字: <input type="text" name="fname">
	<input type="submit" value="提交">
</form>

JSON

JSON 是用于存储和传输数据的格式。常见于服务端向网页传递数据 。
JSON 英文全称 JavaScript Object Notation。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

JSON数据格式为键值对，与 js 对象属性一致。如：“name”: "Runoob"。
JSON对象保存在大括号内。如：{“name”:“Runoob”, “url”:“www.runoob.com”}
JSON数组保存在中括号内。如：

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

JSON字符串转 js 对象：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

// 使用 js 内置函数 JSON.parse() 将字符串转换为 js 对象
var obj = JSON.parse(text);

// 使用数据
var name = obj.sites[1].name；

js 对象转 JSON字符串：var myJSON = JSON.stringify(obj);

JavaScript代码规范

  • 命名规则：驼峰命名法；全局变量和常量大写
  • 运算符两侧使用空格
  • 使用4个空格来缩进代码
  • 一条语句以分号作为结束符
  • 为了便于阅读每行字符建议小于80个

JavaScript函数

JavaScript 使用关键字 function 定义函数。函数可以通过声明定义；可以通过表达式定义；可以通过函数构造器定义。

// 通过声明定义
function functionName(parameters) {
    // 执行的代码
}
// 使用
functionName();

// 通过表达式定义
var x = function (a, b) { // 执行的代码 };
// 使用
var z = x(4, 3);

// 通过函数构造器定义
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

函数声明后不会立即执行，调用时才执行。

自调用函数：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

函数的属性和方法：

// arguments.length 属性返回函数调用过程接收到的参数个数。
function myFunction(a, b) {
    return arguments.length;
}

// toString() 方法将函数作为一个字符串返回
function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();

js 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值：

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

JavaScript闭包

js闭包使得函数拥有私有变量。示例代码：计数器

// 变量初始化时，自调用函数执行一次
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();

计数器受匿名函数的作用域保护，只能通过 add 方法修改。
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

JavaScript Window

所有浏览器都支持 window 对象，它表示浏览器窗口。
所有 js 全局对象，函数以及变量均自动称为window对象的成员。
全局变量是 window 对象的属性；全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性。

window对象的方法：
open()，打开新窗口；
resizeTo()，调整当前窗口的尺寸；
alert()，警告弹窗；
setTimeout()，定时执行；
setInterval() ，间隔指定毫秒数不停地执行指定代码；
…

window对象的属性：screen、location、history、navigator。

JavaScript 库

因为 js 中包含了很多重复的操作，所以出现了很多 js 库，使 js 编码更加简洁。目前最流行的 js 库是 jQuery。

参考资料：https://www.runoob.com/js/js-tutorial.html
标签
javascript
js
html语言
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!