1. Introduction to javascript
1.1 A Brief History of Javascript
While the WEB is developing day by day, the size and complexity of webpages are increasing. Due to the limitation of network speed, frequent data exchange with the server to complete simple form verification will only increase the burden on users. At that time, it was at the forefront of technological innovation. The Netscape (Netscape) company , decided to set out to develop a client language to handle this simple authentication.
In 1995, Brendan Eich (Brendan Eich), who worked for **Netscape , began to develop a scripting language called LiveScript for the upcoming Netscape Navigator 2 browser to be released in February 1996 . In order to complete the development of LiveScript as soon as possible, Netscape and Sun established a development alliance. On the eve of the official release of Netscape Navigator 2, Netscape temporarily renamed LiveScript to JavaScript in order to take advantage of the media hype about Java.
Due to the increasing attention of JavaScript 1.0, in 1996, Microsoft added a JavaScript implementation named ** JScript ** to its Internet Explorer 3, which means that there are two different versions of JavaScript, resulting in JavaScript does not have a standardized syntax and features.
In 1997, a proposal based on JavaScript 1.1 was submitted to the European Computer Manufacturers Association (ECMA , European Computer Manufacturers Association). The association designated Technical Committee #39 (TC39) to " standardize the syntax and semantics of a general-purpose, cross-platform, vendor-neutral scripting language ." TC39 was composed of programmers from Netscape, Sun, Microsoft, Borland, and other companies concerned with the development of scripting languages. After several months of hard work, they completed the ECMA-262 standard, defining a new scripting language called ECMAScript . **
Brandon Edge (1961～), the inventor of JavaScript, is currently (2005-2014) CTO at Mozilla Corporation. On April 3, 2014, he was forced to resign after ten days as the CEO of Mozilla.
In May 2017, the decentralized web browser "Brave" initiated by Brendan Eich completed an ICO offering of approximately US$35 million in just 30 seconds.
1.2 ECMAScript version development
In June 1998, ECMAScript version 2.0 was released.
In December 1999, ECMAScript version 3.0 was released, becoming the prevailing standard for JavaScript and widely supported.
In October 2007, the draft version 4.0 of ECMAScript was released, which greatly upgraded version 3.0. After the release of the draft, because the goal of version 4.0 was too radical, serious differences occurred among all parties on whether to pass this standard. Big companies led by Yahoo, Microsoft, and Google oppose major upgrades of JavaScript and advocate minor changes; Mozilla, headed by JavaScript creator Brendan Eich, insists on the current draft.
In July 2008, due to the great differences among the parties and the radical debate, ECMA decided at a meeting to suspend the development of ECMAScript 4.0, and release a small part of it involving the improvement of existing functions as ECMAScript 3.1, while expanding other radical ideas. The range will be put into a later version. Due to the atmosphere of the meeting, the project code name of this version is Harmony (harmony). Shortly after the meeting, ECMAScript 3.1 was renamed ECMAScript 5.
In December 2009, ECMAScript version 5.0 was officially released. The Harmony project was divided into two parts. Some more feasible ideas were named JavaScript.next and continued to be developed, and later evolved into ECMAScript 6; some less mature ideas were regarded as JavaScript.next.next in the further future Think again.
In June 2011, ECMAscript version 5.1 was released and became an ISO international standard (ISO/IEC 16262:2011). https://babeljs.io/learn-es2015/
In March 2013, the ECMAScript 6 draft was frozen and no new features were added. New features are envisaged to be put into ECMAScript 7.
In December 2013, a draft of ECMAScript 6 was released. This is followed by a 12-month discussion period to hear feedback from all parties.
On June 17, 2015, ECMAScript 6 released the official version, namely ECMAScript 2015. http://www.ecma-international.org/ecma-262/6.0/
ES 2016（ES7）http://www.ecma-international.org/ecma-262/7.0/
ES 2017（ES8）http://www.ecma-international.org/ecma-262/8.0/
ES 2018（ES9）http://www.ecma-international.org/ecma-262/9.0/
ES 2019（ES10）http://www.ecma-international.org/ecma-262/10.0/
JS will release new features every once in a while, and browsers can only meet these needs through constant upgrades, and the support for new features in different versions of the same browser is also different.
Browser and JS new features : https://caniuse.com/
For example, the support for the newly added arrow function (arrow function) in the es6 specification is as follows:
It can be seen that all versions of IE do not support it at all, and the chrome 45 version only starts to support it.
If you want to use the new features of JS and want to be compatible with old browser versions, then you need a conversion tool: convert the new feature code of JS into JS code that old browsers can support. And Babel is such a tool.
Babel, the official introduction to a JavaScript compiler. To put it simply, it is to convert the code using ES6 and above features into the corresponding ES5 code so that old browsers can run.
URL: https://babeljs.io/
1.3 Application
data verification
Read and write HTML elements, dynamically modify styles
interact with the user
web effects
WEB game production
Server-side programming based on Node.js technology
Javascript has many uses, and we learn and accumulate at any time.
1.4 ECMAScript scripting language
Scripting languages such as Javascript, JScript, and ActionScript are all implemented based on the ECMAScript standard.
The syntax for declaring variables, manipulating arrays, etc. is exactly the same in JavaScript, JScript and ActionScript because they are all ECMAScript. However, they have their own unique methods in terms of operating browser objects, etc., and these are extensions of their respective languages.
JavaScript is composed of ECMAScript core syntax, DOM and BOM.
ECMAScript core syntax: JS syntax format, constant variables, data types, process statements, functions, built-in objects, etc.
BOM: Browser Object Model The browser object model encapsulates the APIs related to operating browsers
DOM: Document Object Model The document object model encapsulates APIs related to manipulating documents
Two, javascript basics
2.1 JS syntax
- Every JS statement must end with a semicolon
- Strictly case sensitive Example: a and A are two completely different things
- Ignore all newlines and spaces. Their purpose is to improve the readability of the program.
2.2 Comments in JS
Comments in html:
Comments in css: /* comment text */
Notes in js:
// single line comment
/* Multi-line comment */
2.3 Introduction of JS
- Inline method: with the help of event attributes in html such as: onmouseover onmouseout onclick, etc.
- Embed script code: write js code in script tag with the help of script tag
- Import external JS code: import external independent js files with the help of script tags
Note: script tags can be embedded anywhere in the html document;
Multiple script tags can be embedded in an html file;
You can no longer write JS code in the script tag of the external JS file imported through the src attribute.
2.4 The way of data output
-
alert() warning box effect: a bullet box will pop up to the page, and you must click OK to continue executing the code; there will be a blocking effect
-
console.log() console print log
3. Constants
3.1 Overview
Constants: Also known as literals, literally means what you see is what you see. It does not change during program execution.
As above, "Hello Javascript!!" output on the console is a literal
Constants are divided into: numeric constants, string constants, Boolean constants, etc.
3.2 Numeric constants
Value: Integer (10, 23), Float (1.34, 3.14)
The common base numbers in life are decimal numbers, which are composed of numbers between 0 and 9, and every decimal is as follows: 10 20 34 56 and so on
In addition to decimal, the program may also encounter binary, octal, hexadecimal and other base numbers
The underlying operation of the computer is performed in the form of two's complement
Binary, composed of 0 and 1, prefixed with 0b such as: 0b1000 0111
Octal, composed of numbers between 0 and 7, prefixed with 0, 0o, 0O such as: 0o76
Hexadecimal, composed of 1 - 9, af, af represents a number between 10 - 15, prefix identification 0x such as: 0xa1f6
3.3 String constants
The text wrapped in double quotes or single quotes is a bit similar to the various words we say in life, such as: "Hello" "Hello" 'male'
If you want to add some special symbols, you need to use the escape character "\", as follows:
\n Newline
\t tab character
\r Enter
\" "
\’ ’
\\ \
3.4 Boolean Constants
There are only two boolean values: true and false
4. Variables
4.1 Overview
Variable: A container used to store informational data. During program execution, changes can occur.
Information data: It can be the constants mentioned above, or it can be all the things such as functions, arrays, regular expressions, etc. that will be discussed later.
4.2 Declaration of variables
Variables are declared using the keyword var .
Grammatical format var variable name = initialization value ;
Explain that the initialization value on the right side of the assignment operator "=" is assigned to the variable declared with var on the left side, then this variable opens up a space in memory to store the initialization value.
Example var str = "Hello"; var num = 10;
//第一步：使用var关键字声明一个变量, 变量名为 num
// var num;
// console.log("num:",num);//num: undefined undefined未被定义的
// //第二步：对声明的变量进行赋值 将字面量 10 赋给变量 num
// num = 10;// = 赋值运算符 运算顺序：从右向左
// console.log("num:",num);//num: 10
//上面两步可以简写为一步
var num = 10;
console.log("num:",num);//num: 10
4.3 Variable Naming Rules
-
Consists of numbers, letters, underscores, and dollar signs ($)
-
number cannot start with
-
Cannot be keywords and reserved words in JS
-
See the name and know the meaning
-
Camel case naming: the first letter is lowercase, multiple words, starting from the second word, the first letter is capitalized such as: getMaxNum
-
Keep names as short as possible
4.4 How to declare multiple variables
-
The first type: each is declared with var and ends with a semicolon
-
The second method: If you declare multiple variables in a row, you can use a var, separate the variables with commas, and end with a semicolon
//多个变量的声明方式一 // var a = 1; // var b = 2; // var c = 3; //多个变量的声明方式二 var a = 10, b = 20, c = 30; console.log("a:",a,",b:",b,",c:",c);
4.5 Variable promotion
We can use the variable declared later, even if the variable is assigned, it is undefined
// console.log(a);//报错：Error: a is not defined 在整个程序种，不管是调用前还是调用后，都不存在这个变量的声明，直接调用会报错
//先声明变量 b 并赋值 10
var b = 10;
//再调用
console.log(b);//10
//变量的提升演示
//先调用
console.log(c);//undefined 未被定义的；变量已经被声明，但是没有被赋值
//再声明变量 c 并赋值 20
var c = 20;
console.log(c);//20
Reasons for variable hoisting:
The JS engine in the browser is divided into two steps when parsing JS code: the pre-parsing stage and the running stage.
Pre-parsing stage: It will check whether there is a declaration statement in JS, and if so, it will be promoted to the top of all JS statements in the current scope
Run phase: perform assignment operations
So above, the promotion of variables demonstrates part of the code, which is equivalent to the following code
var c;
console.log(c);//undefined
c = 20;
console.log(c);//20
5. Variable data type
Variable data types are divided into two categories: basic data types and reference data types.
5.1 Basic data types
Number numeric type: integer 10, 20 decimal 10.23 3.14 Infinity NaN (Not a Number) is not a number
String string type: text wrapped in double quotes or single quotes such as: var str = "Hello"; then the data type of the variable str is the string type
Boolean Boolean type: there are and only two values true and false
Null type: Null pointer object which is a special object
Undefined: The variable is declared but not assigned a value
5.2 Reference data types
Object object type (all built-in objects are of this type, such as: numeric Array object, string String object, RegExp object, etc.)
Function function type
Six, data type detection
Detection is performed through the typeof keyword, and the detection syntax is as follows:
typeof variable name
typeof(variable name)
//数值类型
var a = 10,
b = 3.14;
console.log("a:",a,"数据类型是：",typeof a,",b:",b,"数据类型是：",typeof(b));//a: 10 数据类型是： number ,b: 3.14 数据类型是： number
a = Infinity;
b = NaN;
console.log("a:",a,"数据类型是：",typeof a,",b:",b,"数据类型是：",typeof(b));//a: Infinity 数据类型是： number ,b: NaN 数据类型是： number
console.log("10/0=",10/0);//10/0= Infinity
console.log(10 - "hehe");//NaN
//字符串类型
a = "hello";
b = '1000';
console.log("a:",a,"数据类型是：",typeof a,",b:",b,"数据类型是：",typeof(b));//a: hello 数据类型是： string ,b: 1000 数据类型是： string
//布尔类型
a = true;
b = false;
console.log("a:",a,"数据类型是：",typeof a,",b:",b,"数据类型是：",typeof(b));//a: true 数据类型是： boolean ,b: false 数据类型是： boolean
//Null空指针类型
a = null;
//Undefined 未被定义的
b = undefined;
console.log("a:",a,"数据类型是：",typeof a,",b:",b,"数据类型是：",typeof(b));//a: null 数据类型是： object ,b: undefined 数据类型是： undefined
console.log(document.getElementById('box'));//null
var c;
console.log(c);//undefined
7. Conversion between data types
7.1 Implicit conversions
With the help of operators + - * / % etc.
The operator "+" can be: mathematical addition operation, string concatenation operation if there is a string, positive sign
var a = 10,
b = "20",
c = 10.4;
console.log("a+b+c=",a+b+c);//a+b+c=102010.4
console.log("a+c+b=",a+c+b);//a+c+b=20.420
console.log("b+a+c=",b+a+c);//b+a+c=201010.4
console.log(a+c);//20.4
console.log(+b);//20
console.log(a-b);//-10
console.log(10-true);//9
console.log(10-false);//10
console.log(10 - "a");//NaN
console.log(10 - "");//10
console.log(10 - null);//10
console.log(10 - undefined);//NaN
7.2 Explicit conversions
Implemented with built-in methods or wrapper classes
Built-in method:
parseInt() converts other data types to integer types; rounding of values
parseFloat() converts other data types to floating-point numbers; floating-point numbers
toString() Convert other data types to string types
Wrapper class:
Number() converts other data types to numeric types
String() converts other data types to string types
Boolean() Convert other data types to Boolean types
var a = 10,
b = true,
c = "hello100",
d = "100hello";
//toString() 转字符串的方法
console.log(a.toString(),"数据类型：",typeof(a.toString()));//10 数据类型： string
console.log(b.toString(),"数据类型：",typeof(b.toString()));//true 数据类型： string
//parseInt() 转整数
console.log(parseInt(10.23));//10
console.log(parseInt(b));//NaN
console.log(parseInt(c));//NaN
console.log(parseInt(d));//100
//parseFloat() 转浮点数 用法同parseInt()
// Number() 将其它数据类型转换为数值类型
console.log(Number(b));//1
console.log(Number(c));//NaN
console.log(Number(d));//NaN
console.log(Number(false));//0
console.log(Number(''));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number("100"));//100
//String() 将其它数据类型转换为字符串型
//Boolean() 将其它数据类型转换为布尔类型 布尔只有两个值 true和false
console.log(Boolean(a));//true
console.log(Boolean(1));//true
console.log(Boolean(c));//true
console.log(Boolean(d));//true
console.log(Boolean(0));//false
console.log(Boolean(''));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false
Eight, prompt
prompt() Information prompt box; Prompt the user to enter information in the specified input box
prompt(msg,ipt) method
Parameter msg Set the text prompt information, string type
Content in the ipt input box, string type
Return value returns the data entered by the user, string type
//声明一个变量 sex， 来接收用户输入的 性别
var sex = prompt("请输入您的性别：","女");
//声明一个变量 num， 来接收用户输入的 年龄
var num = prompt("请输入您的年龄：","16");
num = parseInt(num);