10000 words, Ashan's learning note "front end Basics" beginner's Guide (recommended Collection)

Keywords: Javascript Front-end

πŸ… Author: Ashan

πŸ… About the author: the little sister of the post-95 front end, the contracted author of blue bridge, and the public name author of "information technology think tank"

πŸ… Exclusive benefits for fans: knowledge system, interview question bank, technical assistance, resume template. Official account number at the end of the paper

πŸ… Mail delivery (1-2 times a week): official account of the public information technology think tank.

​

Money is tight, time is tight, clothes are tight and eyebrows are tight. This is the legendary four tight prospects~

  There are six related tweets in this JS basic notes series

This is the first part: JS introduction and basic grammar

This is the note that the author learned JS from the video a long time ago~

I hope it will inspire you~

catalogue

01 JavaScript (JS for short)

02   Operator

03   JS variable

04   JS variable action

05   Exchange of JS variables

06   notes

07   Data type of JS

08   Numeric type of JS

09   Base system

10 NaN

eleven   Type conversion

02   JS basic code specification

thirteen   JS literal

01 JavaScript (JS for short)

js is divided into three parts:

  • ECMAScript   Standard - the basic syntax of js

  • DOM------Document Object Model

  • BOM------Browser Object Model

What is JavaScript?

  • It is a scripting language (it needs no compilation and can be executed directly. Common scripting languages: t-sql,cmd)

  • It is an interpretative language

  • Is a dynamically typed language

  • Is an object-based language

be careful:

1. Compiling language is a binary language that needs to be translated into the computer before it can be executed

2. The front-end is based on HTML (markup language for displaying data), CSS (beautifying pages)

JavaScript (user browser interaction).

js is not JavaScript, but LiveScript

The role of js? Solve the problem of interaction between users and browsers

js code can be written in three places:

1. Write js code in the tag of script in the html file

2.js code can be written in html tags

<script> //js code      alert("study hard and make progress every day")// A dialog box pops up in the page    </ script> <input   type="button"   value = "button"   onclick="alert('clicked ');" / > 

3. You can write js code in the js file, but it needs to be introduced into the html page   src="js path" in the tag of script

02   Operator

Operators: some symbols ----- used to calculate

  • Arithmetic operator: + - * /%

  • Arithmetic expression: an expression connected by arithmetic operators

  • Unary operator: the symbol + + - that this operator can operate on with only one operand

  • Binary operator: this operator requires two operands to operate,

  • Ternary operators: conditional expressions? Expression 1: expression 2

  • Compound operator: + = - = * = / =%=

  • Compound operation expression: an expression connected by a compound operator

 var num=10;  num+=10;------>namely:num=num+10;  console.log(num);20 

Assignment operator:=

Relational operators:  

  • > < >= <=Β 

  • ==Lax  

  • ===Strict  

  • != Lax inequality  

  • !== Strict inequality

Relational operation expression: an expression connected by relational operators

The result of a relational operation expression is a boolean type

Logical operators:

  • &&- logic and - and

  • ||- logical or - or

  • !— Logical negation negation negation

Logical operation expression: an expression connected by logical operators

  • Expression 1 & & expression 2

If one is false, the whole result is false

  • Expression 1 | expression 2

If one is true, the whole result is true

  • ! Expression 1

The result of expression 1 is true and the whole result is false

The result of expression 1 is false and the whole result is true

var num1=10; var num2=20; 
console.log(num1==num2&&5>6 )var num=20; console.log(num>10||5<0Β )var flag=false; console.log(!flag )var num=10; var sum=(num+10)*5; console.log(sum var result = (4 >= 6 || 'people' != 'dog' && !(12 * 2 == 144) && true) ;console.log(result);varΒ numΒ =Β 10;Β var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22') ;console.log(result2);Β 
var num=20; var result=num/3;//Num variable and 3 remainder -- > 10 / 3 remainder console.log(parseInt(result) var num=20; var result=num%3;//num variable and 3 remainder -- > 10 / 3 remainder console.log (result) var num = 10; VAR sum = (Num + 10) + 1 var num = 20; num% = 5; / / num = num-5; console.log (Num  ) var str="5"; var num=5;console.log(str===num )console.log(5>10);//false console.log(5>=5);//true console.log(5>3);//true console.log(5==10);//false

03   JS variable

Precautions for variable names - naming of variable names:

1. Follow the hump naming method (the first letter of the first word is lowercase, and the first letters of all subsequent words are uppercase)

2. The variable name should be meaningful

3. The variable name should be standardized

4. Keywords cannot be used (some words provided by the system cannot be used)

Declare variables and initialize - initialization of variables - declare variable assignment

A variable declaring num stores a number of 100

Β varΒ num=110;

Output the value of this variable

 alert(num);//Spring frame

The browser console is in the console option of the developer tool (shortcut key: F12) in the browser

console.log(num);//Output the content in the browser's console

Declare multiple variables and assign values one by one  

var num1,num2,num3;//Declare / / successively assign num1 = 10; num2 = 20; Num3 = 30;

Declare multiple variables and assign values

varΒ num1=10,num2=20,num3=30; var num=10;var $break=10;var shuZi=10;

Note: the data of the operation is operated in memory

How to store data and use variables in js (name, value - > data)

All variables declared in js use VaR --- > to store data, and the data should have corresponding data types

js string type values are in double quotation marks or single quotation marks

04   JS variable action

Variables are used to store data or manipulate data

Variable declaration (var, variable name, no value)

Variable initialization (with var, variable name and value)

Variable declaration method:

var variable name;

var number;//Declaration of variables. At this time, there is no assignment, / / declare multiple variables at one time      var   x. Y, Z, K, J; / / are all declarations without assignment. / / initialization of variables (variables are declared and assigned) / / = meaning of assignment: meaning of assignment. / / store a number of 10var number = 10; / / store a number of 5var number2 = 5; / / store a person's name var name = "Xiaohei"; / / store true (true)var flag = true; / / store a null --- > equivalent to empty var nll = null; / / store an object      var   obj  =  new   Object();

05   Exchange of JS variables

Exchange using third-party variables

var num1=10; var num2=20; Β Β // Take the value of the num1 variable and put it in the temp variable var temp=num1; / / take the value of the num2 variable and put it in the num1 variable num1=num2; / / take the value of the temp variable and put it in the num2 variable num2=temp;console.log(num1);//20 console.log(num2);//10

The second way of exchange: generally applicable to digital exchange

var num1 = 10;  var num2 = 20; // Add the value in the variable num1 and the value in the variable num2, and assign it to num1 again. This variable num1 = num1 + num2;//30    //  Take out the value of num1 variable and the value of num2 variable, and the subtraction result is reassigned to num2. Num2 = num1 - num2; / / 10 / / take out the value of num1 variable and the value of num2 variable, and the subtraction result is reassigned to num1. Num1 = num1 - num2; / / 20console.log (num1, num2);

be careful; Variable names cannot be duplicated, because the later ones will overwrite the previous ones

var num1=10; var num1=20; console.log(num1);

​

Exchange of extended variables: you only need to look at the code without understanding (bit operation)

var num1 = 10;  var num2 = 20;  num1 = num1 ^ num2;  num2 = num1 ^ num2;  num1 = num1 ^ num2;  console.log(num1, num2);

06   notes

Annotation method:

1. Single line notes//

2. Multiline comments / β˜…β˜…/

//Single line comment: usually used above a line of code

/Multi line comments: generally used on functions or a piece of code /

//The commented code is no longer executed
//console.log("haha, I'm beautiful again")// console.log("second line")// Declare variables and initialize / / var num=10;

07   Data type of JS

Value type (basic type):

  • String (string)

  • Number - integer and decimal (Number)

  • Boolean

  • Empty (Null)

  • Undefined

  • Symbol

Reference data type:

  • Object

  • Array

  • Function. ​​​​​​​

var num; console.log(num+10);//Nan ------ not an number ------ > is not a number var num; console.log(num); How to get the data type of this variable? Use typeof to get     // typeof   The syntax used * can get what the data type of this variable is* Typeof variable name * typeof (variable name) * var num = 10; var str = "Xiaobai"; var flag = true; var nll = null; var undef; var obj = new Object();// Is to use typeof to obtain the type of variable console.log (typeof Num)// number console.log(typeof str);// string console.log(typeof flag);// boolean console.log(String(nll));// Is null console.log(typeof nll)// Not null console.log (typeof undef)// undefined console.log(typeof obj);// object console.log(typeof( num));

08   Numeric type of JS

Β // Number type: integer and decimal   var   num  =  12; 
num=20; // Integer num=98.76// Decimal (floating point in other languages --- single precision, double precision floating point) 
// All numbers are of type number

09   Base system

What base numbers can be represented in js?

  • var num=10;// decimal system

  • var num2=012;// octal number system

  • var num3=0x123;// Hex

var num=12;//Decimal console.log(num); var num2=012;// Octal console.log(num2); var num3=0x1a;// Hexadecimal console.log(num3); var num=0x1f;      console.log(num);

be careful:

Want to represent decimal: it's a normal number
Want to represent octal: start with 0
Want to represent hexadecimal: beginning with 0x

10 NaN

Do not use NaN to verify whether it is NaN   ​​​​​​​

var num;  console.log(num+10==NaN); console.log("Hello!"=="I'm fine");

How to verify whether the result is NaN? isNaN() should be used

var num;//-----The variable is declared without assignment. The result is: is undefined a number ----- > not a number? Nan --- > is not a digital console.log(isNaN(10));

If the judgment result is not a number, you can use IsNaN (variable name)

var str="Hello!"; var num;  var sum=num+10;//NaN console.log(sum); console.log(isNaN(sum));// Not the number is true, but the number result is false

Note: do not use NaN to judge whether it is NaN, but use IsNaN (value or variable)

eleven   Type conversion

1.parseInt();// Integer conversion

console.log(parseInt("10"));//10 console.log(parseInt("10afrswfdsf"));//10 console.log(parseInt("g10"));//NaN console.log(parseInt("1fds0"));//1 console.log(parseInt("10.98"));//10 console.log(parseInt("10.98fdsfd"));//10

  2.parseFloat() / / convert to decimal

console.log(parseFloat("10"));//10  console.log(parseFloat("10afrswfdsf"));//10  console.log(parseFloat("g10"));//NaN console.log(parseFloat("1fds0"));//1 console.log(parseFloat("10.98"));//10.98 console.log(parseFloat("10.98fdsfd"));//10.98

3.Number();// Turn number

console.log(Number("10"));//10  console.log(Number("10afrswfdsf"));//NaN console.log(Number("g10"));//NaN console.log(Number("1fds0"));//NaN console.log(Number("10.98"));//10.98 console.log(Number("10.98fdsfd"));//NaN

Note: parseInt() is used for integer conversion and parseFloat() is used for decimal conversion

Want to transfer numbers: Number(); More stringent than the above two methods

Other types to string types

1 .toString()​​​​​​​

//    var num=10; //    console.log(num.toString());// String type / / / / 2 string()//// var num1=20; //     console.log(String(num1));

If the variable makes sense, call. toString() to use the transformation
If the variable has no meaning, use String() conversion

var num2; console.log(num2.toString()); var num3=null; console.log(num3.toString()); Β Β Β Β //This can be var num2; console.log(String(num2)); var num3=null; console.log(String(num3));

Other types to Boolean types

console.log(Boolean(1));//true console.log(Boolean(0));//false console.log(Boolean(11));//true console.log(Boolean(-10));//true console.log(Boolean("ha ha")// true console.log(Boolean(""));//false console.log(Boolean(null));//false console.log(Boolean(undefined));//false  

02   JS basic code specification

var is used to declare variables in js

js should have a semicolon at the end of each line of code; (I have the habit of semicolon when writing code)

js is case sensitive: var N=10; n

The string in js can use single quotation marks or double quotation marks. At present, we use double quotation marks for the time being

thirteen   JS literal

Literal: assign a value directly to a variable

Declare variables and initialize

  • var num=10; //var flag=true; //var str = "hahaha"// var y=10; var n=y;

​

Add official account "information technology think tank":

πŸ… Hard core data: 20G, 8 categories of data, which can be obtained after paying attention (PPT template, resume template, technical data)
πŸ… Technical assistance: the leader of the technology group points out the maze. Your problem may not be a problem. Ask for resources to shout in the group.
πŸ… Interview question bank: it is jointly contributed by small partners of various technical groups. The hot real interview questions of large factories are constantly updated.
πŸ… Knowledge system: including programming language, algorithm, big data ecosystem components (Mysql, Hive, Spark, Flink), data warehouse, front end, etc.

πŸ‘‡πŸ‘‡ Book delivery lottery - Technical Assistance - Fan welfare πŸ‘‡πŸ‘‡

Posted by vfwood on Sun, 10 Oct 2021 15:34:24 -0700