Javascript basic syntax

- html: Markup Language
- JavaScript: programing language

preface

Development history of JavaScript (js)

1. 1994 Netscape, Inc(Netscape)Released Navigator Browser 0.9 This is the first mature web browsing in the world
 It's a blockbuster. But this is a veritable browser--You can only browse the page, and the browser cannot interact with users,The problem was solved at that time
 There are two ways, one is to use the existing language,Allow them to be embedded directly in web pages. The other is to invent a new language.
liveScript ==> javaScript ==> ECMAscript
2. 1995 year Sun The company will Oak Language renamed Java，Officially launched to the market. Sun The company hyped and promised that the language could be used"Primary compilation
 Write, run everywhere"(Write Once, Run Anywhere)，It looks likely to dominate the future.
3. Netscape company moved and decided to cooperate with Sun The company formed an alliance
4. 34 Year old system programmer Brendan Eich Here we go. In April 1995, Netscape hired him,It took him only 10 days to finish the job
Javascript It's designed. (polypeptide language)
5.
(1)draw lessons from C Basic grammar of language
(2)draw lessons from Java Data type and memory management of language
(3)draw lessons from Scheme Language to promote functions to"First class citizen"(first class)Status of
(4)draw lessons from Self Language, using prototype based(prototype)Inheritance mechanism of

What can JS do

1. Common web page effects [form verification, rotation diagram...]
2. And H5 Cooperate to realize the game [Fruit Ninja: http://www.jq22.com/demo/html5-fruit-ninja/]
3. Implement application level applications[ http://naotu.baidu.com]
4. Achieve statistical effect[ http://echarts.baidu.com/examples/]
5. Geographic positioning and other functions[ http://lbsyun.baidu.com/jsdemo.htm#i4_5]
6. Online learning programming[ https://codecombat.163.com/play/]
7. js It can realize artificial intelligence [face recognition]
8. . . . 

Composition of JavaScript

 - ECMASCRIPT: Defined javascript Syntax specification of,Describes the basic syntax and data types of the language
 - BOM (Browser Object Model): Browser object model
 - There is a set of mature software that can operate the browser API，adopt BOM You can operate the browser, such as pop-up box, browser jump, and get
 Resolution, etc
 - DOM (Document Object Model): Document object model
 - There is a mature set of tools that can operate page elements API，adopt DOM You can operate the elements in the page. For example, add one div，reduce
 Less div，to div Change position, etc

Summary: JS is to achieve various effects on Web pages through fixed syntax and operating browser and tag structure

Writing position of JavaScript

• Hanlin Academician

	 a) a label
            <a href="javascript:js code;"></a>
	 b) wrong a Tag (behavior attribute: click, mouse in,)
            For example:<button Behavior attribute="js code">Button</button>
                <button onclick="alert('hellowrold')">Button</button>

• embedded

	a) script Label internal writing js code
           <script>
               js code
           </scrip>
	b) script The code inside the tag is executed when the page is refreshed
	c) script In principle, the label can be written in html Anywhere in the document, but we write at the bottom
	d) Can write multiple pairs script Tag, the code is executed from top to bottom

• External chain

	a) script There is one in the label src Attribute label internal writing js code
	b) Can write multiple pairs script Tag, the code is executed from top to bottom
	c) External files demo1.js，direct writing js code

Comments in JS

• To learn a language well, first learn the notes of a language, because the notes are for us and developers
• Write a comment that will help us read the code later

Single-Line Comments

• It is generally used to describe the function of the following line of code
• You can write two /, or press ctrl +/

// I'm a single line note
// The following code indicates that a pop-up layer appears in the browser
alert('I am a pop-up layer')

multiline comment

• It is usually used to write a long paragraph or comment on a piece of code
• You can write / * * / directly, and then write a comment between the two asterisks
  • The shortcut keys of each editor are different. vscode is crtl+shift+a

Variable (key)

• A variable is a container that holds data in a program
• Variable is the identifier of data stored in computer memory. The data stored in memory can be obtained according to the variable name
• In other words, we store a data in memory, and then give the data a name so that we can find it again in the future
• Syntax: var variable name = value

Defining variables and assignment

// Define a variable
var num;
// Assign a value to a variable
num = 100;
// Define a variable and assign a value to it at the same time
var num2 = 200

• be careful
  1. A variable name can store only one value
  2. When you assign a value to a variable again, the previous value is gone
  3. Variable names are case sensitive (JS is strictly case sensitive)

Naming rules and naming conventions for variables

• Rule: it must be observed. If you don't observe it, you will make an error
  1. Make a variable name as meaningful as possible (semantically)
  2. Follow the hump naming rules. When multiple words are composed, the first letter shall be capitalized from the second word
  3. Do not use Chinese
• Specification: it is recommended to comply with (default by the developer). No error will be reported if it is not complied with
  1. Variable names should be as meaningful as possible
  2. Follow the hump naming rules. When multiple words are composed, the first letter shall be capitalized from the second word
  3. Do not use Chinese

Data type (key)

• It refers to the type of data we store in memory
• Yes, we usually divide it into two categories: basic data types and complex data types

Basic data type

• Value type (Number)
  • All numbers are numeric types (including binary, decimal, hexadecimal, etc.)
  • NaN (not a number), a non number
• String type (string)
  • Everything enclosed in quotation marks (single quotation marks or double quotation marks)
• Boolean type
  • Only two (true or false)
• Null type (null)
  • There is only one, null, which means the defined null value
• Undefined type (undefined)
  • Only one is' undefined ', which means undefined
• If it is not defined (declared), an error is reported

Complex data type

• Object type (object)
• Array type (array)
• function type
• other

Judge data type

• Now that we have separated the data types, we need to know what type of data we store
• Use the typeof keyword to judge
• The result of typeof is a string

// The first way to use
var n1 = 100;
console.log(typeof n1);
// The second way to use
var s1 = 'abcdefg';
console.log(typeof(s1))

Determine whether a variable is a number

• You can use the isNaN method to determine whether a variable is a number
• isNaN: is not a number

// If the variable is a number
var n1 = 100;
console.log(isNaN(n1)); //=> false
// If the variable is not a number
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

Data type conversion

• Conversion between data types, such as number to string, string to Boolean, Boolean to number, etc

Convert other data types to values

• number (variable)
  • You can cast a variable to a numeric type
  • Decimals can be converted and retained
  • Boolean values can be converted
  • NaN will be returned in case of non convertible
• parseInt (variable)
  • Check from the first place. If it is a number, it will be converted until a content that is not a number
  • If the beginning is not a number, NaN is returned
  • Do not know the decimal point, only integer can be retained
• parseFloat (variable)
  • Check from the first place. If it is a number, it will be converted until a content that is not a number
  • If the beginning is not a number, NaN is returned
  • Know the decimal point once
• Mathematical operations other than addition
  • Operators are operable numbers on both sides
  • If either side of the operator is not an operable number, NaN is returned
  • Addition cannot be used

Convert other data types to strings

• Variable. toString()

  Some data types cannot use toString methods, such as undefined and null

• String (variable)

  All data types are OK

• Use addition

  In JS, + has two meanings
  String splicing: as long as any side of + is a string, string splicing will be carried out
  Addition operation: only when both sides of + are numbers, the number operation will be carried out

Convert other data types to Boolean

• Boolean (variable)

  In js, only '', 0, null, undefined, NaN and are false, and the rest are true

operator

• It is the symbols used in the operation in the code. It is not only mathematical operation, but also there are many operation methods in js

Mathematical operator

1. +

   Addition is performed only when there are numbers on both sides of the symbol
   As long as either side of the symbol is a string type, string splicing will be performed

2. -

   Can perform subtraction
   It will automatically convert both sides into numbers for calculation

3. *

   Can perform multiplication
   It will automatically convert both sides into numbers for operation

4. /

   Can perform division
   It will automatically convert both sides into numbers for operation

5. %

   Can perform remainder operation
   It will automatically convert both sides into numbers for operation

Assignment Operators

1. =

   Is to assign the value on the right of = to the variable name on the left of the equal sign
   var num = 100;
   Is to assign 100 to the num variable
   Then the value of the num variable is 100

2. +=

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

   a += 10 is equivalent to a = a + 10

3. -=

   var a = 10;

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

   a -= 10 is equivalent to a = a - 10

4. *=

   var a = 10;
   a *= 10;
   console.log(a);
   

   a *= 10 equals a = a * 10

5. /=

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

   a /= 10 is equivalent to a = a / 10

6. %=

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

   A% = 10 is equivalent to a = a% 10

Comparison operator

1. ==

   • Compares whether the values on both sides of the symbol are equal, regardless of the data type

     1 == '1'
     Although the two values are the same, they get false because the data types are different

2. ===

   • Compare whether the values and data types on both sides of the symbol are equal

     1 ==='1'
     Although the two values are the same, they get false because the data types are different

3. !=

   • Compare whether the values on both sides of the symbol are unequal

     1 != '1'
     Because the values on both sides are equal, we get false when comparing them

4. !==

   • Compare whether the values and data types on both sides of the symbol are different

     1 !== '1'
     Because the data types on both sides are different, you get true

5. >=

   • Compare whether the value on the left is greater than or equal to the value on the right

     1 > = 1 the result is true
     1 > = 0 the result is true
     1 > = 2 the result is false

6. <=

   • Compare whether the value on the left is less than or equal to the value on the right

     1 < = 2 the result is true
     1 < = 1 the result is true
     1 < = 0 result is false

7. >

   • Compare whether the value on the left is greater than the value on the right

     1 > 0 the result is true
     1 > 1 the result is false
     1 > 2 the result is false

8. <

   • Compare whether the value on the left is less than the value on the right

     1 < 2 the result is true
     1 < 1 results in false
     1 < 0 result is false

Logical operator

1. &&
   • Operations performed and

     The left side of the symbol must be true and the right side must be true to return true
     As long as one side is not true, false is returned
     True & & true the result is true
     True & & false the result is false
     False & & true the result is false
     False & & false results in true

   • All are true, and the last true value is output
   • If false, stop from the false place and output
     1. False values: false, "", NaN, null, undefined
     2. Output: false, NaN, null, undefined
2. ||
   • Operation of or

     If the left side of the symbol is true or the right side is true, true will be returned
     False is returned only when both sides are false
     True & & true the result is true
     True & & false the result is false
     False & & true the result is false
     False & & false results in true

   • Both are false, and the last false value is output
   • If it is true, stop and output from the true place
3. !
   • Inverse operation

     If it is true, false will be returned
     If it is false, it will become true
     ! true the result is false
     ! false the result is true

Self addition and self subtraction operator (unary operator)

1. ++
   • Self increment operation
   • There are two types, pre + + and post++
   • Pre + +, the value will be automatically + 1 and then returned

     var a = 10;
     console.log(++a);
     // Will return 11 and change the value of a to 11
     

   • After + +, the value will be returned first, and then automatically + 1

     var a = 10;
     console.log(a++);
     // It returns 10 and changes the value of a to 11
     

2. --
   • Perform self subtraction
   • There are two types, pre - and post –
   • It is the same as the + + operator