Javascript-Overview

2020-06-15

1. 概论

JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程
在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行
一般来说，完整的JavaScript包括以下几个部分：
ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
JavaScript的基本特点如下：
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释型语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用异常处理try{}catch(){}

1.1. 示例

<!DOCTYPE HTML>
<html>
    <head>
    <title>简单的JavaScript Hello World</title>
        <script type="text/javascript">
            document.write("Hello, world!");   // 在浏览器视窗内直接显示
            alert("Hello, world!");            // 弹窗显示
            console.log("Hello, world!");      // 在控制台（console）里显示，需要先开启开发工具控制台
        </script>
    </head>
    <body>
　　　　HTML内容……
    </body>
</html>

或是在浏览器的地址栏中使用javascript:，以交互方式表示

1	javascript:alert("Hello world!");

2. 数据类型

The latest ECMAScript(ES6) standard defines seven data types: Out of which six data types are Primitive(predefined).

Numbers: 5, 6.5, 7 etc.
String: “Hello GeeksforGeeks” etc.
Boolean: Represent a logical entity and can have two values: true or false.
Null: This type has only one value : null.
Undefined: A variable that has not been assigned a value is undefined.
Object: It is the most important data-type and
forms the building blocks for modern JavaScript. We will learn about
these data types in details in further articles.

2.1. 命名

在JavaScript中创建标识符的规则是，标识符的名称不应该是任何预定义的单词（称为关键字），第一个字符必须是一个字母、一个下划线（_）或一个美元符号（$）

2.2. 无类型(untyped)

// creating variable to store a number
var num = 5;

// store string in the variable num
num = "GeeksforGeeks";

2.3. let/const

在ES2015之后，我们现在有了两个新的变量容器：let和const

3. 作用域

Global Scope – Scope outside the outermost function attached to Window.
Local Scope – Inside the function being executed.

5
let globalVar = "This is a global variable"; 
  
function fun() { 
  let localVar = "This is a local variable"; 
  
  console.log(globalVar); 
  console.log(localVar); 
} 
  
fun();

4. 使用

在Hmtl文件中插入

The code surrounded by the <script> and </script> tags is called a script blog.
<script> tags can be put between the <head> and </head> tags or between <body> and </body> tags.

type attribute was the most important attribute of <script> tag. However, it is no longer used. Browser understands that <script> tag has JavaScript code inside it.

Create a .js file. Add <script src=”relative_path_to_file/file_name.js”></script> in the end of <body> tag inside HTML file.

Page is known as document for the purpose of scripting in a web page.
Properties of the document can be referenced by writing document followed by a dot, followed by the property name. The document has lots of properties.
After <script> tag browser starts to interpret the text as JavaScript until the </script> comes.

4.1. 示例: Code to write something to a web page using JavaScript

<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
	<title></title> 
</head> 
<body> 
<p id="ResultsP"></p> 
<script type="text/javascript">//Script Block 1 
document.getElementById('ResultsP').innerHTML ='Hello World!'; 
</script> 
</body> 
<html>

document.getElementById(‘ResultsP’).innerHTML = ‘Hello World!’;

The code simply means: “Get me the document element with id ResultsP and set the HTML inside that element to Hello World!”
重要的是，访问该段的代码必须在该段之后，否则，代码将试图访问一个在页面中存在之前的段落，并抛出一个错误。

5. 函数

function calcAddition(number1, number2)  
{  
    return number1 + number2;  
}

返回值类型不用标

6. 闭包

和python基本一致

function foo(outer_arg) { 

	function inner(inner_arg) { 
		return outer_arg + inner_arg; 
	} 
	return inner; 
} 
var get_func_inner = foo(5); 

console.log(get_func_inner(4)); 
console.log(get_func_inner(3)); 

output:
9
8

// 匿名函数不行
function outer()  
{ 
    var arr = []; 
    var i; 
    for (i = 0; i < 4; i++)  
    { 
        // storing anonymus function 
        arr[i] = function () { return i; } 
    } 
  
    // returning the array. 
    return arr; 
} 
  
var get_arr = outer(); 
  
console.log(get_arr[0]()); 
console.log(get_arr[1]()); 
console.log(get_arr[2]()); 
console.log(get_arr[3]()); 

Output:
4
4
4
4

7. 参考

JavaScript - 维基百科，自由的百科全书