Javascript Quick Start in 20 Minutes

Introduction:

JavaScript is an indispensable scripting language in current web development. js is an interpreted language, which can be run without compilation. It runs on the client side and needs to be parsed and executed by the browser.

Born in 1995, the main purpose at that time was to verify whether the data of the form is legitimate.

JavaScript was originally supposed to be called Livescript, but before its release, I wanted to catch up with the super-hot java at that time, and temporarily changed the name to JavaScript. (That is to say, js has nothing to do with java, I just wanted to use the fame of java).

Features:

Interactivity (all it can do is dynamic interaction of information)
Security (disallow direct access to local hard drive)
Cross-platform (as long as it is a browser that can parse js, it can be executed, regardless of the platform)

core

(1) Core (ECMAScript): This part is mainly the basic syntax of js.

(2) BOM: Brower Object Model (browser object model), mainly to obtain browser information or operate the browser, such as: browser forward and backward, browser pop-up prompt box, browser address bar input URL jump and so on.

(3) DOM: Document Object Model. The document here is temporarily understood as html. The html is loaded into the memory of the browser. The DOM technology of js can be used to modify the html nodes in the memory. What the browser sees is the page dynamically modified by js. (Add, delete, modify and check)

3 ways to write

Internal fitting type:

In theory, js can be written anywhere on the page.

<script>
        // js标签内的js代码
        alert('Hello World!');
</script>

External chain:

First, create a new file with a file type of .js, then write js statements in the file, and introduce them into the html page through the script tag pair.
```
<script src="js文件路径地址">这里不能写js语句</script>
```

In-line formula:

Written directly on the label, it is a shorthand event, so it is also called an event attribute. onclick click event

<input type="button" value="点我" onclick="alert('木有');">
<button onclick="alert('恭喜你，一个对象到手');">点我</button>

Notes

Two kinds of comments: single-line comments and multi-line comments. Comments are used to indicate the interpretation of the code and will not be executed. They are for our programmers to see, which is convenient for adding, deleting, modifying and checking...

//我是一个单行注释

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

variable

    <script>
        //定义变量
        var num = 1;
        var name = 'liusen'
    </script>

everything is var

js is a weakly typed language. The declared variable does not know what data type it is before it is assigned. After the assignment, its data type will be judged.
A variable that has not been assigned a value returns undefined, which means it is empty.

Naming conventions:

The first character can be a number, underscore, dollar sign, not a number, other characters can be numbers, letters, underscores, $…
Variables starting with $ are generally declared by the jQuery library or other class libraries
object is the name of the object type, the variable starts with o
The first character is an underscore, which generally indicates a private variable
CamelCase, when there are multiple words, capitalize the first letter from the second word
Chinese or Pinyin is not recommended, try to be as generic as possible

Conditional control

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //定义变量
        var num = 79;
        var name = 'liusen'
        //条件控制
        if(num>60 && num<70){
    
    
            alert('及格');
        }else if(num>70 && num<80){
    
    
            alert('良好');
        }else{
    
    
            alert('其他');
        }
    </script>
</head>
<body>   
</body>
</html>

operation result:

insert image description here

Note: Javascript is strictly case sensitive

Debug: browser open ---- check-----console

Elements: elements

Console: console

Sources: source code, debugging

Network: network

Application: Application

insert image description here

breakpoint debugging

type of data

number: js does not distinguish between integers and decimals

123		//整数
123.3	//浮点数
123e3	//科学计数法123000
-99		//负数
NaN		//not a number
Infinity//无穷

string

'abc'   "abc"
'\n'

Boolean value

false
true

logic operation

&&		//两个都为真，结果为真
||		//一个为真，结果为真
!    	//真即假，假即真

comparison operator⭐⭐⭐

=		//赋值
==		//等于，类型不一样，值一样，也会判断为true
===		//绝对等于，类型一样值一样，才会判断为true

This is a js defect, insist not to use == comparison

NaN is not equal to all numbers, including itself
You can only judge whether the number is NaN by isNaN(NaN)

Floating point problem:

insert image description here

Try to avoid using floating-point numbers for operations, there are precision problems

Math.abs(1/3-(1-2/3))<0.000000001

null和undefined

null empty
undefined undefined

array

Java's arrays must be of the same type, this is not required in js!

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'Hello');

Array subscript out of bounds, will:

insert image description here

object

        var person = {
    
    
            name:"liusen",
            age:3,
            ta:['js','CSS','html']

        }

Objects are a curly bracket, arrays are square brackets

Separate each attribute with a comma, the last one does not need to be added

Marry object value:

person.age
> 3
person.name
> "liusen"