This is the 16th day of my participation in the August Text Challenge.More challenges in August

@[toc]

digression

📢 Blog home: ❤ Bo Xiaochan ❤ 📢 Author column: ❤Python❤ Java❤

preface

Be a qualified backend developer

The basics of the front end also need to be understood

1. The JavaScript

JavaScript is a web scripting language, it is very popular, you may not use it, but you can’t deny it is powerful!

1.1 JavaScript introduction

JavaScript is a scripting language

JavaScript is a lightweight programming language. You don’t need to download a version of the JDK or Python to use it. You just need a browser on your computer and you can use JavaScript.

JavaScript is programming code that can be inserted into AN HTML page, and you can insert JS code just like CSS.

JavaScript, once inserted into an HTML page, can be executed by all modern browsers.

JavaScript is easy to learn.

1.2 Basic Syntax

Every language has its basic grammar, and every language’s grammar is different, but it’s all the same

1.2.1 Hello World

Output Hello World using JavaScript

  1. By internally embedded JS code

    <! DOCTYPEhtml>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script type="text/jsvascript">
        alert("Hello");
    </script>
    
    <body>
    
    </body>
    </html>
    Copy the code
  2. By calling an external JS file

    <! DOCTYPEhtml>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src="StudyJS.js" type="text/javascript"></script>
    <body>
    
    </body>
    </html>
    Copy the code

    Js code:

    alert("World");
    Copy the code

What if you want to embed JS and import external files?

So let’s write two script tags

1.2.2 annotation

Js annotations are the same as Java annotations

// indicates a single line comment

/**/ indicates a multi-line comment

I’m not going to do the demo

1.2.3 variable

Unlike Java, type variable names = values; / Type variable name; A declaration plus a definition, a declaration

Also different from Python’s variable name = value

Any of the JS data types can be declared using the var keyword, but the declared type can be arbitrarily assigned, unlike The Java type display, JS var can declare data types, also can declare functions, classes, etc

var i;
i=1;
alert(i+":"+typeof (i)); // number
i="asa";
alert(i+":"+typeof (i)); // string
i=1.1;
alert(i+":"+typeof (i)); // number
i=true
alert(i+":"+typeof (i)); // boolean
i='a';
alert(i+":"+typeof (i)); // string

Copy the code

Var I = 1; In this case, however, there is a let keyword declared first

You can’t go wrong with var

Something like this:

let i;
i=1;

Copy the code

Three keywords: var, let, const

The keyword First statement Declare and define
var Square root Square root
let Square root Square root
const x Square root

1.2.4 Data Types

All numbers are of type: number (1, 1.1)

var a = 1;
typeof(a);  //number
Copy the code

All characters, strings are: string (“as”, ‘sa’)

var b = "撒飒飒";
typeof(b);  //string
Copy the code

True and false are: Boolean types (true,false)

var c = true;
typeof(c);  //boolean
Copy the code

The undefined variable is: type undefind

let d;
typeof(c);  //undefind
Copy the code

Instead of numeric values: NAN type (‘a’*1)

var e=10,f="aa";
alert(e*f);  //NAN
Copy the code

And of course arrays, functions, class types

1.3 Conditional control statements

1.3.1 cycle

  1. The while loop

    With C language, Java language loop format

    var a = "abcdefgh";  // Define a string
    var b = 0;   // Define a loop variable
    while(b<a.length){
        alert(a[b]); / / output
        b++;  // Loop variable updates, not updates will become an infinite loop
    }
    Copy the code
  2. The for loop

    The format is the same, except that the loop variable is var/let/const

    var a = "abcdefgh";  // Define a string
    for(var i=0; i<a.length; i++){// Loop variables are defined and updated in parentheses
        alert(a[i]);
    }
    Copy the code

1.3.2 judgment

Format:

if(Boolean expression){code block}else if(Boolean expression){code block}else{code block}Copy the code

Code:

var a = 10,b = 10;
if (a==b){
    alert(a+b);
}
Copy the code

1.3.3 the continue break

As in the Java and Python languages, continue is to break out of the current loop, and break is to break the loop into the next generation of code blocks.

1.4 the function

1.4.1 definition

There are two ways to define a function. The first is the all-purpose var/let/const

let sum1 = function (){
    alert("The first way to define it")}Copy the code

The second is the funtion keyword:

function sum(){
    alert("The first way to define it");
}
Copy the code

Of course, both definitions are the same, and the call is the same as any other preload

1.4.2 parameters

As with Python functions, you do not need the type of the work argument, only the number of arguments to pass

let te1 = function (a,b,c){
    alert("Value of A:"+a);
    alert("Value of B:"+b);
    alert("Value of C:"+c);
}
Copy the code

1.4.3 the return value

Use the return keyword to determine the return value

let te2 = function (a,b,c){
    return a+b+c;
}
Copy the code

1.5 Object-oriented

JavaScript is an object-oriented language

1.5.1 definition

varObject name = {};Copy the code

Yes, it’s that simple

Define the properties of an object:

Object name. Attribute name = value;Copy the code

Define the behavior of an object (method, function) :

Object name function name =function(){code block}Copy the code

1.5.2 instance

Create a Person object, set the name and age properties, and set the say method

var Person = {}
Person.name = "";
Person.age = 0;
Person.say=function(){
    alert("Speak");
}
Copy the code

conclusion

Interest is the best teacher, persistence is the invariable truth. Learn not to be impatient, one step at a time, step forward steadily. Make a little progress every day, and over a long period of time, you will find that you have become very strong.

I am Bu Xiaochan, a cute new self-study, follow me every day a little bit of progress!