JavaScript Basics
JavaScript composition
JS composed of three parts, they are: ECMAScript, DOM, BOM.
ECMAScript
Because Netscape developed JavaScript, a year after Microsoft has developed to imitate JavaScript JScript, JavaScript has become the global standard in order to allow several co ECMA (European Computer Manufacturers Association) organized customize the standard JavaScript language, known as ECMAScript standard.
JUDGMENT
Document Object Model (Document Object Model). DOM entire page is mapped to a node of a multilayer structure. HTML pages are composed of certain types of nodes, and these nodes in turn contain different types of data.
GOOD
Browser object model (Browser Object Model). You can access the browser window BOM, the operation of the browser window.
The relationship between ECMAScript, DOM, BOM
ECMAScript is used to operate the tool page on the platform or operating platform
DOM is running on the platform of the page
BOM is operating platform, BOM rules (grammar) is based on the rule of ECMAScript
JavaScript and ECMAScript specification
JavaScript standardization organization is the ECMA - the European Information and Communication Systems Standards Association provides standardized solutions based on Javascript (ECMA originally the first letter of the European Computer Manufacturers Association abbreviation). This standardized version of JavaScript is called ECMAScript, work the same way in all applications support this Standard. Companies can use the open standard language to develop their implementation of JavaScript version. ECMAScript documented in standard ECMA-262 specification.
ECMA-262 standards by the International Organization for Standardization ( the ISO ) in ISO-16262. You can here find this file specification. ECMAScript specification does not describe the Document Object Model ( the DOM ), the model consists of World Wide Web Consortium ( the W3C to develop). HTML DOM defines a method for file object script operation.
ECMAScript and JavaScript documents Specification
ECMAScript specification is a set of requirements to achieve the ECMAScript; if you want to achieve standards-compliant language features in ECMAScript implementation or engines (eg V8 Firefox or Chrome in SpiderMonkey in), then it is very useful.
ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.
ECMAScript specification uses JavaScript programmers may not be familiar with the terminology and grammar. Although the description of the ECMAScript language may be different, but the language itself remains unchanged. JavaScript support all the features listed in the ECMAScript specification.
Document describes the JavaScript language for JavaScript programmers.
JavaScript code location
Internal JavaScript
. 1 <Script> 2 // this code JavaScript . 3 </ Script>
Typically written in JavaScript internal </ body> later; or <body> </ body> inside; Or written in <head> </ head>, such as:
. 1 <head> 2 the window.onload = function () { . 3 // this code JavaScript . 4 } . 5 </ head>
External JavaScript
The introduction of external JS file current page, similar to the introduction of external CSS file, the code is as follows:
1 <script src="script.js"></script>
Inline JavaScript processor
Example:
1 <the Button onclick = "createParagraph ()"> point I ah </ button>
Strongly not recommended to write JS code, which will allow pollution JavaScript to HTML, and inefficient.
Of these three, generally using an internal JavaScript in practice, the actual development using external JavaScript, hardly used inline JavaScript processor.
JavaScript is case sensitive
JS is case-sensitive and uses the Unicode character set. Such as:
var A = 10 ; var A =. 11 ; the console.log (A); the console.log (A); / * the result is 10 . 11 shows, a and A are not the same variable * /
Comments in JavaScript
Like HTML and CSS, JavaScript code can also add notes, the browser will ignore them, annotate just as your colleagues (and you, if after six months to write their own look at the code you will say, what is this garbage thing. ) provide guidance on how the code works. Comments very useful and should always use, especially in large applications. Notes divided into two categories:
After the single-line comments added double slash, such as:
// la la la, I is a comment ~~~
In and * / / * and add multi-line comments, such as:
/ * Multi-line Comment 1 multi-line Note 2 multi-line comments 3 * /
JavaScript code execution order
When the browser executes the code to a length of JS, typically from top to bottom, left to right order of execution code. such as:
1 var a = 10; 2 var b = 11; 3 console.log(a); 4 console.log(b); 5 console.log(a + b); 7 /* 8 控制台显示的结果为： 9 10 10 11 11 21 12 */
JavaScript 语句
JS 当中的语句表示 JS 向宿主环境发送的命令。
例如下面的语句是向控制台中输出计算 10 + 2 的结果。
console.log(10 + 2); // 在每一条语句的后面都带有一个分号，表示语句结束
当然 JS 允许我们将分号省掉，但是无论是从代码的维护成本还是其他因素考虑，都不建议将每条语句后面的分号省略掉。
需要注意的是，如果分号前面的语句为空，则没有意义。
JavaScript 的输出方式
通常使用的有两种输出方式
// 第一种 console.log(); // 第二种 document.write();
console.log(); 是将数据输出到浏览器的控制台中，一般用来调试 JS 代码
document.write(): 是将数据输出到网页的页面中，此方式可以直接解析标签。如：
document.write(<strong>内容</strong>);
我们通常将 console.log(); 这种输出代码的形式称之为 代码打印
并且，我们一般使用 console.log(); 来打印数据 而不是 document.write(); ，因为后者会影响页面布局，某些情况下，后者甚至会覆盖页面。
JavaScript 中的表达式
一般情况下，表达式需要得到一个结果
例如 11 + 3 就是一个表达式，我们在创建这个表达式的时候，就希望得到 11 + 3 的结果
console.log(11 + 3); // 将 11 + 3 的结果 打印到浏览器的控制台中
JavaScript 的弹窗
JS 中的弹窗有三种方式，它们分别是：
// 第一种，警告对话框，只有确认键 alert(); // 没有返回值，返回 undefined; 不同的浏览器，显示不同 // 第二种，模态对话框(确认框)，有确认件和取消键 confirm(); // 返回 Boolean 类型：true、false 表示选择确定还是取消 // 第三种，对话框，对话框中包含一条文字信息，用来提示用户输入文字,有确认键和取消键以及输入框 prompt(); // 如果文本输入框中为空,则返回一个空字符串，如果用户点击"取消"按钮，则返回null
注意事项：
alert 对话框使用在无需用户确认的情况下,否则应该使用其他类型的对话框
confirm 对话框是弹出式，直到这个对话框被点击后, 后面的脚本才会运行. 请勿滥用此功能
prompt 和 alert 以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。因此，你不应该过度使用该方法。
查找并解决 JavaScript 代码的错误
错误类型
一般来说，代码错误主要分为两种：
语法错误：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义，你就能够顺利修复它们。
逻辑错误：有些代码语法虽正确，但执行结果和预期相悖，这里便存在着逻辑错误。这意味着程序虽能运行，但会给出错误的结果。由于一般你不会收到来自这些错误的提示，它们通常比语法错误更难修复。
解决 BUG 的方法
以下是几种常见的 bug 形式
有报错
当在控制台中看到报错信息时，我们要观看它报的什么错，一般来说，我们可以很直观的看到报错信息。如：
Cannot set property 'onclick' of null // 不是onc1ick为nu11，是onclick不能加给nu1l xxx is not defined // xxx 未定义
有报错但是代码没有问题
解决方法：反向查找
发生这种情况时，我们要观看报错信息，如果在报错信息中没有找到来源，我们要根据报错的变量，向上逐步查找来源，如果没有找到，那就继续向上查找。
没有报错，没有结果
解决方法：反向查找
解决方法：
解决 bug 的通用方式
使用 console.log("1");
将 console.log("1"); 逐行使用，哪行代码打印不出来，哪行就出现了问题(最好的方式是，将 "1" 换位当前测试行的变量名，同时，变量名不要手写，而是将当前变量名 copy 一下)
定位 bug 信息的工具(工具帮助找到定位 bug 的信息)
打断点：让浏览器逐行执行代码
1. 使用 JS 提供的关键字：debugger (debugger要配合控制台使用)
2. 使用浏览器提供的控制台 sources，在 sources 选项中找到要需要断点的文件，点击要进行断点的行号，之后一步步执行。
以下有几种常见的错误类型
SyntaxError: missing ; before statement (语法错误：语句缺少分号)
这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。例如如果我们把 checkGuess() 函数中的这一行 :
let userGuess = Number(guessField.value); // 改成 let userGuess === Number(guessField.value);
将抛出一个错误。因为系统认为你在做其他事情。请不要把赋值运算符（=，为一个变量赋值）和严格等于运算符（===，比较两个值是否相等，返回 true/false）弄混淆。
SyntaxError: missing) after argument list (语法错误：参数表末尾缺少括号)
顾名思义：此错误通常意味着 函数 or 方法 调用或的结束括号忘写了。
SyntaxError: missing: after property id (语法错误：属性 ID 后缺少冒号)
JS 对象的形式有错时通常会导致此类错误，如：
function checkGuess() { //写成了 function checkGuess( {
浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！
SyntaxError: missing} after function body (语法错误：函数末尾缺少花括号)
通常意味着函数或条件结构中丢失了一个花括号。如果我们将 checkGuess() 函数末尾的花括号删除，就会得到这个错误。
SyntaxError: expected expression, got'string' (语法错误：得到一个 'string' 而非表达式)
↑↑↑↑↑↑ 或者 ↓↓↓↓↓↓
SyntaxError: unterminated string literal (语法错误：字符串字面量未正常结束)
这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 'string' 将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。
Notes: 错误出现时，转到错误所在的行观察是否能发现问题所在。记住，错误不一定在那一行，甚至可能是由某个不相关的问题造成的！