JavaScript learning experience

1. Foreword:

I read the Little Red Book (JavaScript Advanced Programming) some time ago, but I didn’t plan to read it, and I didn’t take detailed notes. After reading it, I felt a little empty and felt something was wrong. It’s hard to remember what I learned, and I don’t have a deep impression. I feel frustrated. I can’t even learn how to do front-end using JS. The backend has learned js, you decide whether to die or not.

So I read it, read it again, and decided to blog about it to enhance my impression and make reading notes for future reading and for everyone's reference and discussion.

Warm reminder: Notes and words will be subjective, and knowledge should be recorded with emphasis.

2. History of JavaScript

• Origin: It is said that in 1995, at the end of the last century, Netscape launched the Navigator browser. The company is pursuing not only static HTML, but also dynamic effects. They also want to be able to handle the verification of the form. Don't always wait until the backend to know whether the form input is legal or not, especially in that era. We waited for minutes at a time, and now we wait for ten seconds without wanting to turn it off, while complaining about some broken website.

• Get started: Just do it if you have a goal. There are many great people at Netscape. Brendan Eich developed JavaScript in 10 days (it says 10 days online). When it first came out, it was called LiveScript, but in order to capitalize on the popularity of the popular star Java, it was changed to JavaScript, so in fact they have nothing to do with each other.

• Competition: Seeing that Netscape has js, Microsoft felt that it was not good and my IE was going to be killed. At the same time, it also felt that js had a bright future, so I made a JavaScript implementation called JScript.

• Standards: The js competition between Netscape and Microsoft has led to version inconsistencies. With industry concerns, the standardization of JavaScript has been put on the agenda. The ECMA organization went to do this, and finally came up with ECMAScript as a standard in 1997. Here ECMAscript and JavaScript can be seen as expressing the same thing

3. ECMAScript

ECMAScript (hereinafter referred to as ES) is formulated by ECMA-262, and ES is mainly about language The basis of grammar is the existence of a standard. If you insist on distinguishing ES and JS, ES is the basic language standard, and JS is the language implemented on the basis of this standard.

About ES versions: ES has gone through many versions since it was formulated in 1997. The previous versions were all minor modifications. Important version:

• ES3, the third version, is the first real modification to the standard

• 2009 ES5 is currently supported by all major popular browsers

• The ES6 published in 2015 has also become popular.

• Versions will be released every year after 2015, but browsers are not yet able to support it.

4. JavaScript implementation

Javascript consists of three parts:

1.ECMAScript: The core part is the grammatical basis of js. We will continue to write about its syntax later.
2.DOM (Text Object Model): Application programming interface for operating HTML documents. About DOM:

• The emergence of DOM makes it possible to implement dynamic HTML (DHTML), which can change the appearance and content of web pages without reloading the page.

• Problems caused by DOM: Mainly in terms of compatibility, Netscape and Microsoft have their own opinions, resulting in browser incompatibility. This problem has not been solved. W3C has started planning DOM

• ##DOM levels: DOM1, DOM2, DOM3. The levels here are equivalent to the DOM versions, which means that DOM is constantly improving. Now the latest is DOM3

3.BOM (browser model): Use BOM to control parts other than the page displayed by the browser

5. JavaScript usage:

(1) Tag attributes: The key to using js in web pages is to use the

<script> tag, which has 6 attributes:

1. async: optional , indicating that the script will be downloaded immediately, but will not hinder other operations on the page. That is, asynchronous scripts only apply to external script files.

2. defer: Optional, indicating that the script can be delayed until the document is completely parsed and displayed. That is, delayed scripts are only suitable for external script files.

3. src: Optional, indicating an external file containing the code to be executed.

4. type: Default text/Javascript. js is executed by default and does not need to be specified.

5. charset: Optional, indicating the character set of the code specified through the src attribute. Most browsers will ignore its value and few people use it.

6. language: obsolete

   Commonly used are the first 4
   

(2)Usage: use

<script> : There are two operations:

1. Write the code directly in the tag, that is, embed the code in the html. This method is not recommended. Such as:

<script>
 function helloWorld(){
    alert("hello world!");
 }
 helloWorld();</script>

2. Another way to introduce external files through the src attribute.

<script src="js/hello.js"></script>

Use external reference js files as much as possible, advantages:

• Maintainability: embedded code in html, maintenance Difficult and poorly readable, it would be much easier to maintain in a separate js file.

• 可缓存：浏览器可以根据具体的设置缓存链接的所用外部js文件

• 适应未来：通过外部文件来包含js无须对XHML的特别处理和注释hack。HTML和XHTML的包含文件的语法相同。

特别注意：<script>在使用了src属性后，不要在内嵌代码，此时的内嵌的代码不会被执行。只会执行src对应文件的代码。

(3)位置：关于<script> 在HTML文档中的位置：

在HTML4中规定<script> 标签可以放在 <head>和<body> 标签内。
由于浏览器解析HTML文档是由上到下，且在遇到<script> 标签后会先解析和执行js代码，并中断HTML的加载，所以放在<head> 标签中是会使得HTML文档可视内容中断加载。
画重点:所以<script> 标签的位置首考虑放在<body> 标签底部。例如：

<html>
    <head>
       <title>hello js</title>
    </head>
    <body>
        <p>hello js!</p>
        <!-- js文件放在body底部 -->
        <script src="example.js"></script>
    </body></html>

六、JavaScript的平稳退化方案

什么是平稳退化：就是有些浏览器不支持js，当然现在几乎没有浏览器这么菜啦，还有就是js功能被禁用。这时就需要没有js的情况下你的网页怎么友好一点交互，不会搞得太难看，太尴尬。
使用<noscript> 标签，应用场景：

• 浏览器不支持JavaScript

• 浏览器支持脚本，但脚本被禁止了

例子：当浏览器不支持js或禁用js时就会显示出noscript标签中的内容，若浏览器能执行js则noscript就被隐藏。

<html>
    <head>
        <script src="example.js"></script>
    </head>
    <body>
        <noscript>
         <p>本页面需要浏览器支持JavaScript</p>
        </noscript>
    </body></html>

The above is the detailed content of JavaScript learning experience. For more information, please follow other related articles on the PHP Chinese website!