Review notes on basic Javascript

Posted by wama_tech on Sun, 27 Oct 2019 10:39:33 +0100

Introduction to Javascript Basics

First of all, we need to know the standards of web pages:
HTML is the structure of a web page
Css is the expression and beautification of web pages
Javascript is the dynamic structure of web page, that is, behavior.
This article briefly introduces
1. Basic syntax of JS
2. Variable naming specification
3. Assignment of variables
4. number, string, boolean, underfind and data type replacement in JS

What can we do after we learn Js?
We can achieve various interactive effects for web pages, and create different commands for web pages.

1. The concept of JS

Javascript is an object-based and event driven scripting language running on the browser client

2. Basic syntax of JS [ECMASCRIPT]

2.1 writing position: it can be written anywhere in the web page, but in order to avoid unnecessary troubles, it is usually written in the body tag.
<script>
//Write js code
</script>
2.2 inline writing (not recommended)
< div event name = "js code" > < div >
2.3 embedded writing

As long as the script tag is written anywhere in the web page, it is called embedded writing.

2.4 external writing (recommended)

Advantages: separation of structure and effect, good maintenance and modification.
Steps: 1. First prepare a js file with the suffix of. js. You don't need some script tags to write js code in the js file.
2. Introduce our js file into HTML file

<script src="File path/file name"></script>

3. Embedded and external writing cannot be used together

    <script src="./index.js">//js file introduced
        var zhu = 1;
        console.log(zhu)
        //Notice that there is js code in it, and js file is introduced.
    </script>

4. Real column: pop up a sentence in the web page through js method
Note: in js, it is strictly case sensitive.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        alert('Hello, the world!');
        //"Hello, world!" will pop up when you open a file through a web page.
        console.log("Hello, the world!");
        //Messages output in the browser's Console
        document.write("Hello,The world ");
        //Output message, output in the main body of the web page, output is the text type
    </script>
</body>

</html>

Note: 1.document.write can set HTML page tag in the page
2.prompt can receive the user's input

    <script>
        prompt('Please input')
    </script>

3.confirm can get the user's choice

    <script>
        confirm('Are you sure you want to go')
    </script>

3. variable

3.1 variable (literal understanding): a kind of data that can be changed. Any information seen in the web page can be understood as a kind of data.
Variable in program: variable is also a kind of container, but this container is used to store data in program!!

3.2 use of variables
3.2.1 define variable: keyword var

    <script>
        The variable name defined by var;
    </script>

3.2.2 assignment of variables
var custom variable name = value (data)
matters needing attention:

  • Define the naming standard of variables. Chinese characters and keywords are not allowed. If the variable name is too long, the hump naming method must be followed. 
var fuXi = 123;
//In this case, x is uppercase
var xiaoZhu = 123;
//z is now uppercase
//All of the above can be used as hump nomenclature
  • The defined variable must use the var keyword
  • When assigning a variable, you must use "=" (assignment operator)
    Shi lie:
    <script>
        var fuXi = 123;
        //At this point, we define a variable named "fuxi", and we assign 123.
        //At this time, we can output "fuxi" from console.log, then we can output the value 123 of this variable from console or output.
        console.log(fuXi);
    </script>

Assignment case:
Exchange the values of two variables

        //Exchange the values of two variables

        //Idea: we first define two variables, and then we define a variable to take the value of a variable.
        var qw = 30;
        var op = 20;
        //Then take the value of qw, at this time as=30
        var as = qw;
        alert(qw)
        //If qw=op, op=20, then qw=20;
        var qw = op;
        //If as=30, then op=as=30;
        var op = as;

        console.log(op)
        console.log(qw)

4. Data type

1. Simple data type

  • Number type (number)
    Number type: if the value of a variable is a pure number, then we call this variable a number type
    <script>
        //Number type: if the value of a variable is a pure number, then we call this variable a number type
        var a = 1;
        var b = -1;
        var c = 1.1;
        var d = -1.1;
        //The above data types are all numeric
    </script>

Data type conversion

  1. We can turn other types into numerical types as follows:
    They are: Number, parseInt, parseFloat. If you encounter a value that cannot be converted, it will become Nan (not a Number).
    The differences are as follows:
    parseInt: the result of the conversion is always an integer
    parseFloat: if a letter appears in the variable name, the letter will be removed and only the number will be retained
    <script>
        // Number (variable) ---------- convert to number type
        var a = '1';
        console.log(typeof a)//string
        a = Number(a);
        console.log(typeof a)//number

        //ParseInt (variable) ------- > Convert to numeric type
        var a = '1';
        a = parseInt;
        console.log(typeof a)//number

        //Prsefloat (variable) ------- > Convert number type
        var a = '1';
        a = parseFloat(typeof a)//number

        //Their values are constant
    </script>
  • String type (string)
    String type: if the value of a variable uses quotation marks, whether single quotation marks or double quotation marks, the value of the variable is the string type
    Note: string cannot be operated!! Only splicing!!
    Data type conversion
  1. We can convert other types to string types as follows:
    The difference is that all conversion types support String()
    If our type is found, an error will be reported if we use tostring conversion.
    <script>
        //Variable.toString
        var a = 123;//number
        a = a.toString
        console.log(typeof a)//string

        //String (variable)
        var a = 123;//number
        a = String(a)
        console.log(typeof a)//string
    </script>

    <script>
        //String type: if the value of a variable uses quotation marks, whether single quotation marks or double quotation marks, the value of the variable is the string type
        var a = "1";
        var b = 'adc';
        //All the above data types are string types
    </script>

We can get the data type of variables through typeof

    <script>
        var a = "1";
        var b = 1;
        //Get the type of variable
        console.log(typeof a)//string
        console.log(typeof b)//number
    </script>
  • Boolean type
    Puppet type: if the value of a variable is true or false, the data type is puppet type.
    There are only two values: true, false 
    <script>
        //Boolean type
        var a = true;
        //In a program, true is generally used to indicate the correctness or satisfaction of conditions
        
        //Boolean type
        var b = false;
        //false is generally used to indicate that the condition is not satisfied.

    </script>

Data type conversion
In boolean type, 0, undefined, empty string, NaN for false, and other for true

    //Type conversion
     <script>
        var a = 0;
        //To boolean type
        a = Boolean(a);
        console.log(a)//false
        console.log(typeof a);//Boolean
    </script>
  • Undefined type (undefined)
    Undefined type: if the value of a variable is undefined or a variable is defined and has no value assigned to the variable, then it is the undefined type. 
    <script>
        var a;
        console.log(typeof a);//undefined
        //a is valuable. Its value is undefined!!!!
    </script>

Thank you for watching!

Topics: Javascript ECMAScript IE

Hot Topics

©2024 Programmer Think