Day5 summary

js

1. What is js

Js is an acronym for JavaScript and is the standard of behavior in web standards. Responsible for the changes in the page.

2. Where to write js code

a. Write in the event-related properties of the tag, such as the button's onclick attribute

b. Write in the script tag (use the js code as the content of the script tag)
Note: The script tag can theoretically be placed anywhere in the html, but is usually placed in the head or body.

c. Write in the js file, import the file in the html through the script tag (src attribute value is the path of the js file to be imported)

3.What can js do?

a. Insert a tag at the specified location on the page
b. Modify the content of the tag in the webpage
c. Modify the label style

4. How to write js code

JavaScript is a programming language. Like Python, dynamic languages are also scripting languages. There is no half-money relationship with Java!

supplement:
window.alert (information) - js code, a dialog box pops up in the browser, the specified information is displayed in the dialog box.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
                 Where is the <!--1.js code -->
        
        <!--<script type="text/javascript" src="js/index.js">
            
        </script>
        
        <script type="text/javascript">
                         //Write js code here
            window.alert('python and js!')
        </script>
        
                 <button onclick="window.alert('Hello!')">Click me! </button>
        -->
        
                 <h1>I am the title</h1>
                 <!--2.js can do -->
                 <!--a. Insert content -->
        <script type="text/javascript">
                         Arr = ['One Piece', 'Huoying', 'Kuipu', 'One Punch Superman']
            for (index in arr) {
                message = '<h1>'+arr[index]+'</h1>'
                                 / / Add content to the page
                document.write(message)
            }
            
//          for (i=0; i < 20; i++){
 // document.write('<h1>I am the title</h1>')
//          }
            
            
        </script>
                 <!--b.Modify the label content -->
                 <p id="p1">I am a paragraph</p>
                 <button onclick="document.getElementById('p1').innerHTML='I am JavaScript!'">Modify content</button>
        
                 <!--c.Modify the style of the label -->
                 <button onclick="document.getElementById('p1').style='color:red; font-size:30px'">Modify the style</button>
        
        
    </body>
</html>

01. Basic grammar

Console output

Console.log (output content) - same as print
console.log(100)
console.log('abc', 200)

2. Comments - same as c

Single line comment

/*
 * Multi-line comments
 * Multi-line comments
*/

3. Identifier

It consists of an alphanumeric underscore and $, and the number cannot begin.

a = 10
a20 = 100
a_100 = 200
$12s = 23
//12abc = 100 //Reporting!

4. Line and indent

From a grammatical point of view, it doesn't matter how js code wraps and indents. The code block is determined by braces {} in js.

5. Common data types: numbers, booleans, strings, arrays, objects, and functions

a. Number - Contains all numbers, including integers, decimals, and scientific notation (multiple types are not supported!). For example: 10, 12.3, -14, -2.34, 3e2
b. Boolean - only two values true and false. These two values are keywords that represent true and false, respectively.
c. String - String set using single or double quotes, 'abc', "abd"
d.Array (Array) - equivalent to a list in python, [12, 'abc', ture]
e.Object - equivalent to a dictionary and object in python, {name: ' ', age: 10}
f.Function - equivalent to a function in python

Console.log(3e2, 'I am a string', "I am a string!")
    
 Obj1 = {name: ' ', age: 10}
console.log(obj1['name'], obj1.name)
    
 / / declare the function
function eat(name,food){
         Console.log(name+'eat'+food)
}
 Eat(obj1.name, 'noodle')

02. Variable

1. Declaration of variables

Syntax 1: variable name = value
variable name - identifier, not a keyword;
Hump-style naming (first letter initials lowercase, capitalized first letter of each word)

Syntax 2: var variable name = value or var variable name
var - the keyword that declares the variable

The difference: add var when declaring, the variable can be assigned without value, the default is undefined; without var, the variable must be assigned, otherwise it will report an error.

Added: two special values in js - undefined (no, empty) and null (empty)

        Name = ' '
    console.log(name)
    
    var age = 10
         Var sex // When declaring a variable via var, if it is not assigned, the default is undefined
    console.log(age, sex)
    
         / / Re-assign the variable
         Name = ' '
    age = 18
         Sex = 'male'
    console.log(name, age, sex)
    
         / / Declare multiple variables at the same time, assign the same value
    a1 = a2 = a3 = 10
    console.log(a1, a2, a3)
    
    var b1 = 1, b2 = 2, b3 = 3, b4
    console.log(b1, b2, b3, b4)
    
//  arr1 = [1, 24, 45]
//  console.log(arr1[10])

03. Operator

1. Mathematical operators: +, -, *, /, %, ++, --

The first five operations are exactly the same as python

++, -- - are all unary operators, use: variable ++/--, ++/--variable
a.++ - self-add 1 operation; let the value of the variable itself add 1
b.-- - Decrement 1 operation; let the value of the variable itself be decremented by 1

num = 10
num ++
console.log(num)  // 11
++num
console.log(num)  // 12
num--
console.log(num)  // 11
--num
console.log(num)  // 10

pit:When using ++/-- with a variable alone, ++/-- puts the same effect as before and after.
If you use the result of the ++/-- operation to assign a value to another variable, ++/-- puts the front before adding and then adding or subtracting, ++/-- After the release is the first value and then add or subtract

num2 = 10
 Num = ++num2 //equivalent to: num2 += 1; num = num2
console.log(num, num2)  // 11  11

num2 = 10
 Num = num2++ //equivalent to: num = num2 ; num2 += 1
console.log(num, num2)  // 10  11

2. Comparison operators: >, <, ==, !=, >=, <=, ===, !==

The result is a boolean
compares size to python
a.== - Determine if the values are equal
b.=== - Determine if the value and type are equal (completely equal), equivalent to == in python! == Equivalent to python! =

console.log(5 == 5)  //true
console.log(5 == '5')  //true
console.log(5 != 5)  //false
console.log(5 != '5')  //false

console.log(5 === 5)  //true
console.log(5 === '5')   //false
console.log(5 !== 5)  //false
console.log(5 !== '5')  //true

3. Logical operators: && (logical AND), || (logical OR), ! (logical non)

The rules of operation and usage are exactly the same as those of Python.

console.log('=================')
console.log(true && true)  //true
console.log(true && false)  //false
console.log(false || true)  //true
console.log(false || false)  //false
console.log(!true)  //false

4. Assignment operators: =, +=, -=, *=, /=, %=

Exactly the same as python

5. Trinocular operator - ? :

grammar:
conditional statement? Value 1: Value 2 - Determines if the value of the conditional statement is true, true. The result of the entire expression is the value 1, otherwise it is the value 2

age = 16
 Is_man = age >= 18 ? 'adult': 'underage'
console.log(is_man)

6. Operation sequence

Mathematics > Comparison > Logic > Assignment
If you use parentheses, first calculate the brackets

04. Structure

There are two types of structures in js: if and switch

1.if statement

a.if
if(conditional statement){
code that satisfies the condition
}

b.if-else
if(conditional statement){
snippet 1
}else{
code snippet 2
}
c.if - else if - else
if(conditional statement){
snippet 1
}else if(conditional statement 2){
code snippet 2
}else if(conditional statement 3){
snippet 3
}else{
snippet 4
}

The execution process is exactly the same as python

num = 11 
if (num % 2) {
         Console.log('odd')
    
} else{
    Console.log('even')   
}

age = 18
if (age < 18) {
         Console.log('Under age')
} else if(age < 60){
         Console.log('Adult')
}else{
         Console.log('old')
}

2.switch statement

a. Structure:
switch(expression){
case value 1:
snippet 1
case value 2:
code snippet 2
...
default：
snippet 3
}
b. Execution process:
uses the value of the expression to compare with the value after each case to see if it is equal; find the case where the first value is equal to the expression, and use this case as the entry. Execute all subsequent code in sequence until the execution is complete or if the break position is encountered. If the value of each case and the value of the expression are not equal, the code following default is executed.

note:The case must be followed by a result expression

a = 15
switch (a){
    case 5:
                 Console.log('expression1')
    case 6:
                 Console.log('expression 2')
    case 7:
                 Console.log('expression3')
    case 10:
                 Console.log('Expression 4')
    case 11:
                 Console.log('Expression 5')
        break
    default:
                 Console.log('Expression 6')
}

Exercise:Use a variable to save the score of 10 points, according to the results of printing: 0 ~ 5 (fail), 6 (pass), 7 ~ 8 (good), 9 ~ 10 (excellent)

scoers = 3
switch (scoers){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
                 Console.log('fail')
        break
    case 6:
                 Console.log('passage')
        break
    case 7:
    case 8:
                 Console.log('good')
        break
    default:
                 Console.log('excellent')
}

05. Loop structure

Js has two kinds of for loops and while loops.

1.for loop

a.for-in
structure:
for(variable in sequence){
loop body
}
The execution process is the same as python, but the variable is not the element, but the subscript /key (property name)
sequence - strings, arrays, objects

str1 = 'abc'
for(x in str1){
    console.log('=========')
    console.log(x, str1[x])
}

arr1 = [1, 'aaa', true, 12.5]
for (index in arr1) {
    console.log(index, arr1[index])
}

 Person1 = {name: ' ', age: 18, sex: 'male'}
for (x in person1) {
         //typeof() - get the type of the value
    console.log(x, typeof(x))
    console.log(person1[x])
}

B.c for loop
structure:
for(expression1; expression 2; expression 3){
loop body
}
Execution process: first execute expression 1; judge whether the value of expression 2 is true, if it is true, execute the loop body, execute the loop body and then execute expression 3; then judge Whether expression 2 is true, if it is true, the loop body is executed;
... and so on until the result of expression 2 is false (end of loop).

similar:
expression 1
while expression 2:
loop body
expression 3

Expression 1
for(;Expression 2;){
loop body
expression 3
}

num = 1
sum1 = 0
while(num <= 100){
    sum1 += num
    num++
}
console.log(sum1)

for(num=1, sum1=0;num<=100;++num){
    sum1 += num
}
console.log(sum1)

2.while loop

A.while loop
while (conditional statement){
loop body
}
The execution process is exactly the same as python

B.do-while loop
do{
loop body
}while (conditional statement)

Difference: the do-while loop body will execute at least once

//1~100 sum
num = 1
sum1 = 0
do{
    sum1 += num
    num++
}while (num<=100)
console.log(sum1)

06. Function

1. Function declaration

Function function name (parameter list) {
function body
}

The functions in js are different except for the declared keywords. The others are the same.

Parameters can be set to default values, or functions can be called via keyword arguments.

function sum(num1, num2=3){
         Console.log('Seeking the sum of two numbers')
    return num1 + num2
}

2. Function call

Function name (argument list)

console.log(sum(10, 20))
console.log(sum(10))
console.log(sum(num1=12, num2=200))

All functions in js have a return value, the default value is undefined

function func1(){
         Console.log('I am a js function')
}
re = func1()
console.log(re, typeof(re))

3. Anonymous function (the literal of the function)

Function name = function (parameter list) {function body}

func2 = function(a, b){
    console.log(a, b)
    return a * b
}
console.log(func2(3, 4))


funcs_arr = [func1, function(a){console.log(a)}]
funcs_arr[0]()
funcs_arr[1]('abc')

4. The scope of the variable

a. Global variables: as long as the variable declared outside the function is a global variable

b. Local variables

Var1 = 1000 //This is a global variable
 Var var2 = 'abc' //This is a global variable

for(xxx in 'hello'){
    
}

function abc(){
         Var3 = 111 //This is a global variable
         Var4 = 222 //This is a local variable
    console.log(var1, var2, xxx)
}
abc()

console.log(var3)

function func3(){
    num3 = 4
}
func3()
num4 = 5
console.log(num3+num4)

07. String

String literal

a. Character set enclosed in double or single quotes
b. In addition to ordinary characters, it can also be a transfer character: \n, \t, \, ', "
c.\u4 hexadecimal value corresponding to Unicode encoding, \u4e00 - ——

str1 = '\\abc\n"123\''
str2 = "abc\"123\u4e00==="
console.log(str1, str2)

2. Get characters

String [subscript] - get a single character
subscript - range is 0 ~ length -1;
There is no slice syntax in js ([::])

str1 = 'hello js'
console.log(str1[1])

3. Related operations: +

A special value in NaN - js, similar to undefined, null, used to indicate that a non-existent value.
Supports the addition of strings and any other data by converting all other data into strings and then stitching them together.

str2 = 'abc'+'123'
console.log(str2)
str2 = 'abc'+100
console.log(str2)
str2 = 'abc'*2
console.log(str2)   // NaN
str2 = 'abc'+[1, 'abc', 2, '123']
console.log(str2)

supplement:Data type conversion in js: type name ()

num_str =  String(123)
str_num = Number('a23.45')
console.log(num_str, str_num, typeof(num_str), typeof(str_num))

4. String length

console.log('hello world'.length)

 Str3 = 'abc' // str3 is a String type
str4 = new String('abc')   //object
console.log(str3 == str4, str3 ===str4)
console.log(str3[1], str4[1])

5. String related methods

function gary_print(aa){
    console.log(aa)
}
gary_print('abc'.charAt(2))
gary_print(String.fromCharCode(97))
result = 'abcd12abc23hhh123'.replace(/\d+/g, '*')
gary_print(result)
for(index in result){
    gary_print(index)
}

The array in 6.js only needs attention:

a. How to get the elements in the array
b. array corresponding method
c. Element can be of any type

arr = [1, 'abc', true]
gary_print(arr)
nums = [1, 34, 67, 2, 344]
new_nums = nums.sort(function(a,b){return b-a})
gary_print(new_nums)

08. Array

Output function

function gary_print(aa){
    console.log(aa)
}

1. Array - Array objects use separate variable names to store a range of values

a. Create an array

var arr = [3, 'abc', true, [2,'ag']]
//  var arr = new Array()
//  arr[0] = 3
//  arr[1] = 'abc'
//  arr[2] = true
//  arr[3] = [2, 'ag']
    var num_arr = [1, 2, 56, 23, 376]
var str_arr = ['gary', 'ab', 'left', 'right']

b. Output the elements in the array - for...in

for (index in arr) {
         Gary_print(index) // directly traverse the array, getting the subscript in the array element
         Gary_print(arr[index]) // can only get the elements in the array by index value
}

c. Merge arrays - concat

Gary_print(arr.concat(num_arr)) //[3, "abc", true, Array(2), 1, 2, 56, 23, 876] - There is an array in the element, combined and displayed as Array(n)
gary_print(arr.concat(num_arr, str_arr))  //[3, "abc", true, Array(2), 1, 2, 56, 23, 876, "ab", "gary", "left", "right"]

d. Get the length of the array - length

Gary_print(arr.length) // 4 - Get the length of the array
gary_print(num_arr.indexOf(876))

E.join - composes a string with elements of an array

str1 = str_arr.join('*')
 Gary_print(str1) //The elements in the array are combined into a string - ab*gary*left*right
gary_print(str1[5])  //r

F.pop - delete the last element in the array

``
gary_print(arr.pop()) // [2, "ag"]
gary_print(arr) // [3, "abc", true]

###### g.push - Add new elements to the end of the array
``
gary_print(arr.push(89))
gary_print(arr)  //[3, "abc", true, 89]

H.reverse - reverse sorts the elements in the array

str2 = str_arr.reverse()
gary_print(str2) //["right", "left", "ab", "gary"]

I.shift - delete the first element in the array

``
arr1 = arr.shift()
gary_print(arr) //["abc", true, 89]

###### j.slice - Select an element from an array
``
arr2 = str_arr.slice(1,4)
gary_print(arr2)  // ["left", "ab", "gary"]

K.sort() - Array sorting, the default is to compare the characters in each element of the array one by one, according to the size of the Unicode encoding value, similar to the string sorting method in python.

gary_print(arr.sort())   //[89, "abc", true]
gary_print(num_arr.sort())   //[1, 2, 23, 376, 56]
 Gary_print(num_arr.sort(function(a,b){return a-b})) // [1, 2, 23, 56, 376] Ascending - To sort by number, you need a function that determines the size of two numbers
 Gary_print(num_arr.sort(function(a,b){return ba})) //[376, 56, 23, 2, 1] Descending - function(a,b){return ba}: After comparing the two numbers, Returns a number greater than 0

L.splice - add an element to the second element of the array

arr2 = ["abc", true, 89]
arr2.splice(2,0,"gary")
gary_print(arr2)  //["abc", true, "gary", 89]

toString - convert the prime group to a string

str3 = arr2.toString()
gary_print(str3)  //abc,true,gary,89
gary_print(str3[4])  // 4

Unshift - add a new element at the beginning of the array

arr2.unshift(17)
gary_print(arr2)  // [17, "abc", true, "gary", 89]

Reprinted at: https://www.jianshu.com/p/6c7cc630fd79

Intelligent Recommendation

Brush DAY5 Sort Summary

Foreword Writing to yourself: Due to the brush and questions, many questions may require a number of orchestrs; or to embed some operations into some sort, so today's three common sorting, rapid sorti...

Day5 - Summary and homework

List List: [] increase: List .Append (Element) - Add a specified element in the last addition of the list List .INSERT - Insert the specified element before the list of specified subscripts is located...

Day5 learning summary

Day5 learning summary Today's study content: 01 cycle of ELSE structure 02 list list 03 Get list elements 04 increase 01 cycle of ELSE structure 1. Python complete loop structure Note: The existence o...

Summary of CSS basic knowledge--day5

Foreword Day5 mainly talks about positioning It contains why you need positioning and the commonly used positioning mode 1. What is positioning? Positioning is to fix the box in a ce...

CCPC-Wannafly Camp Day5 summary

CCPC-Wannafly Camp Day5 summary Just remembered that it should be added to the 2020 winter vacation... the first winter vacation to actively stay in school 7-1 5A. Alternative Accounts Everybody knows...