JavaScript basic syntax

Introduction to JavaScript

Overview

JavaScript is a dynamic, weakly typed, interpreted high-level programming language. It is based on prototypes and supports multiple programming paradigms such as object-oriented and functional programming. Usually called js

Author

Brendan Eich (Brendan Eich)

background:

JavaScript was born in 1995. Its original intention was to reduce the pressure on the server and to provide a form verification function on the client. The original name was: Mocha (friction), which was renamed to livescript in the beta version of Netscape navigator 2.0 in September 1995. In December of the same year, it was named JavaScript when deployed in Netscape navigator 2.0 beta3.

standard:

In November 1996, Netscape officially submitted language standards to ECMA (European Computer Manufacturers Association). In June 1997, ECMA formulated the ECMAscript standard specification ECMA_262 based on the JavaScript language. JavaScript became one of the most famous implementations of ECMAscript.

composition:

JavaScript is composed of ECMAscript + DOM + BOM

(1) ECMAscript: defined by ECMA-262, provides core grammatical functions
(2) DOM: the full name is Document Bbject Model document object model, the provider is the IPA that operates web pages
(3) BOM: the full name is Browser Object Model browser Object model, providing methods and interfaces for interacting with the browser

version:

ECMAscript has gone through multiple iterations so far, the main version history is given below
Enter a description of the picture here

JavaScript application

JavaScript is mainly used in browser web, Internet of Things, games, desktop applications and mobile terminal application development and server-side development (if JavaScript can be developed, mobile will be developed with JavaScript)

1. 常见的网页效果【表单验证，轮播图。。。】
2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 。。。

Where to write JavaScript

1. Inline js code (not recommended)

Write js code directly on the label, you need to rely on events (behavior) to trigger

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div οnclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 
	注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

2. Embedded js code

Create a script tag in the HTML page, and write JavaScript code directly in the script tag (js code will directly trigger execution when the page is opened)

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!-- 
	注：script 标签可以放在 head 里面也可以放在 body 里面
-->

3. External chain js code (recommended)

Create a script tag in the HTML page, save the JavaScript code separately in a file with the .js suffix, and then import the external js file by setting the src attribute of the script tag

// 我是 index.js 文件
alert('我是一个弹出层')

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

Comment

1. Single-line comments

It is generally used to describe the function of the following line of code.
You can directly write two / (shortcut key L:ctrl + /)

// 我是一个单行注释

// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

2. Multi-line comments

Generally used to annotate a large section of text or code,
you can write /* **/ directly, and then write the content of the comment between the two * signs (shortcut key: shift + alt + /)

/*
	我是一个多行注释
	我是一个多行注释我
	是一个多行注释
*/

/*
	注释的代码不会执行
	alert('我是一个弹出层')
	alert('我是一个弹出层')
*/
alert('我是一个弹出层')

Variable (emphasis)

1. Definition of variables

Definition: A variable is an abstract concept in a programming language that can store calculation results or represent worth (a container for storing data in the program)

Use: In JavaScript language, variables need to be declared before use

Declaration: Use the var keyword to declare a variable. If the var keyword is omitted, the variable becomes a global variable by default

Role: record specific content and access them through variable names

Principle: When using the var keyword to declare variables, the computer will allocate storage space from memory to store different types of content

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;

Note:
1. A variable name can only store one value
2. When assigning a value to a variable again, the previous value will be overwritten
3. Variable name is case sensitive (js is case sensitive)

2. Naming convention

Identifier: Refers to the names of variables, functions, and attributes in JavaScript. When naming identifiers in JavaScript, you can't do what you want. There are corresponding rules and requirements. The following is the specification of variable naming:

(1) Identifiers can be composed of letters, underscores, numbers and $ signs.
(2) Identifiers cannot start with a number.
(3) Identifiers can be distinguished from lowercase.
(4) Identifiers cannot use JavaScript keywords and reserved words.

3. Naming style

(1) The variable name is as meaningful as possible (semantic)
(2) Follow the camel case naming rule, when it is composed of multiple words, capitalize the first letter from the second word

var wenJing  = "     ";

Enter a description of the picture here

Control output

1. Output to the page: document.write()

2. Pop-up window display: alert()

3. Console output: console.log()

Data type (emphasis)

In programming languages, the value types that can be expressed and manipulated are called data types, and being able to support multiple data types is the basic feature of every programming language.
The data types in the JavaScript language can be simply divided into: basic data types and complex data types.

Enter a description of the picture here

1. Basic data types

(1) Numerical type (number)

All numbers are numeric types (including binary, decimal, hexadecimal, etc.)
NAN (not number), a non-number

(2) String type (string)

All content wrapped by a pair of quotes (single or double quotes)

(3) Boolean type (boolean)

Only two values (true or false)

(4) null type (null)

There is only one value, which is null, which means empty

(5)undefined类型（undefined）

There is only one value, which is undefined, which means there is no value

例:
var str = "我是文字";
var num = 1;
var flag = false;
console.log(str);
console.log(num);

// if (flag == true) {
//     console.log('赢了');
// } else {
//     console.log('没了')
// }
var num1;
var num2;
console.log(num1);

2. Complex data types

Complex data types: object, function, RegExp, etc., not to mention

Keyword to determine data type

1.isNaN keyword

isNAN can determine whether a variable is a number

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

2.typeof keyword

JavaScript has data types, so we sometimes need to know what type of data we store, and
use the typeof keyword to judge the
syntax: typeof variable

/* 多种类型的变量 */
var age = 18; 
var name=" "; 
var isFun = true; 
var a;

console.log(typeof age);    //number
console.log(typeof name);   //string
console.log(typeof a);      //undefined
console.log(typeof isFun);  //boolean

Data type conversion

Among the basic data types of JavaScript, strings, numbers, and other types are mutually convertible, and this conversion can be divided into two types. One is performing arithmetic is performed by default automatically converted , and the second is cast

Force conversion between data types:

1.Number (variable)

Convert other data types to numeric types

You can force a variable into a numeric type
Can be converted to decimals, Hu keeps decimals
Can convert boolean
It will return NAN when it encounters non-convertible

2.parseInt (variable)

Convert other data types to numeric types

Check from the first digit, and convert if it is a number, until one is not a digital content
The beginning is not a number, so it will be directly converted to NAN
I don’t know the decimal point, I can only keep the decimal point

3.parseFloat (variable)

Convert other data types to numeric types

Check from the first one, and convert to a number that is not a number.
If the beginning is not a number, then it will return NAN directly
Recognize the decimal point once

4. Variable.toString()

Convert other data types to string types

There are some data types that cannot use the toString() method, such as undefined and null

5. String (variable)

Convert other data types to string types

All data types are available

6.Boolean (variable)

Convert other data types to boolean

In js, there are only ", 0, null, undefined, NaN, these are false

Automatic conversion

1. Mathematical operators other than wigs

Both sides of the operator are operable numbers
If either side of the operator is not a operable number, NaN will be returned
Addition cannot be used

2. Use addition

In js, +there are; two meanings
String concatenation: As long as +there are two sides to any side of a string, it will be string concatenation
Adding: only +on both sides digital time, will perform mathematical operations

JavaScript operators

It is the symbols used when performing operations in the code, not only mathematical operations, we also have many operations in js

Enter a description of the picture here

Arithmetic Operator

+Addition operation

Only when both sides of the symbol are numbers, will the addition be performed
As long as either side of the symbol is a string, the string will be spliced

- Subtraction

Will perform subtraction
Will automatically convert both sides into numbers for calculation

* multiplication

Will perform multiplication
Will automatically convert both sides into numbers for calculation

/ division

Will perform division
Both sides will be automatically converted into numbers for calculation

% Surplus

Will perform remainder operations
Will automatically convert both sides into numbers for calculation

Assignment operation

Is the =right value assigned to =the variable name on the left
var num = 100；

2.+=

    var age = 18;
    a += 10;
    console.log(a) // 28

a += 10 Equivalent to a = a + 10

3.-=

    var a = 10;
    a -= 10;
    console.log(a); //=> 0

，，，，a -= 10 Equivalent to a = a - 10

4.*=

    var a = 10;
    a *= 10;
    console.log(a); //=> 100

a *= 10 Equivalent to a = a * 10

5./=

    var a = 10;
    a /= 10;
    console.log(a); //=> 1

a /= 10 Equivalent to a = a / 10

6.%=

    var a = 10;
    a %= 10;
    console.log(a); //=> 0

a %= 10 Equivalent to a = a % 10

Relational operator

==
- Whether the values on both sides of the comparison symbol are equal, regardless of the data type
- 1 == '1' ==》true
- The two values are the same, so get true
=== congruent
- Compare whether the value and data type on both sides of the symbol are equal
- 1 === '1'==>false
- Although the two values are the same, because the data type of the value is different, it is false
!=
- Compare whether the values on both sides of the symbol are not equal
- 1 != '1'==>false
- Because the values on both sides are equal, you get false when they are not equal.
!== Not equal
- Compare whether the values and types on both sides of the symbol are not equal
- 1 != '1' true
- Because the data type of the amount is different, it gets true
>=
- Compare whether the value on the left is greater than or equal to the value on the right
- 1 >= 1 true
- 1 >= 0 true
- 1 >= 2 false
<=
- Compare whether the value on the left is less than or equal to the value on the right
- 1 <= 2 true
- 1 <= 1 true
- 1 <= 0 false
>
- Compare whether the value on the left is greater than the value on the right
- 1 > 0 true
- 1 > 1 false
- 1 > 2 false
<
- Compare whether the value on the left is less than the value on the right
- 1 < 2 true
- 1 < 1 false
- 1 < 0 false

Logical Operators

&&
- And operation
- Must sign on the left trueand on the right is true, will not returntrue
- As long as one side is not true, it will returnfalse
- true && true true
- true && false false
- false && true false
- false && false false
||
- OR operation
- If the left side of the symbol is true or the right side is true, both will return true
- Only return false if both sides are false
- true || true true
- true || false true
- false || true true
- false || false false
!
- Perform negation
- If it is true, it will become false
- If it is false, it will become true
- !true false
- !false true

Increment and decrement operations (unary operator)

++

Auto-increment
Divided into two, front++ and rear++
Preface ++, will automatically +1 the value first, and then return

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

var num = 10;
num++
console.log(num)
// 会返回 11，并且把 a 的值变成 11

After setting ++, the value will be returned first, in the automatic+1

var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

—
- Decrement
- Divided into two, pre - and post -
- And ++operators for the same reason