Preliminary study of javascript

Development of JavaScript

JS was developed by Netscape. After JS was developed, ECMAScript, es, was formulated to make js a global standard. That is to say, es is a language standard, and JS is an implementation of es

js nested in html

js function code,It is recommended to insert between the heads. Before loading the body of the page document and the rest of the code.
web The content is parsed from top to bottom in the browser, head The script in the body The script in is processed first.
So it's best to include all the predefined functions js Code on the head
 Some brief js Event codes can be written directly in the html Inside the label,
 Format:  onclick=javascript:Function name()   
 The specific function is written in the embedded head of js In code
onload When the web page is downloaded to the browser, it will execute if onload Need access html label
 For the defined object, you need to ensure that the object precedes the onload Script execution.
therefore onload The function should be written in body Medium rather than head 
 js Put on body The main body is used to realize the dynamic creation of documents in some parts

How to introduce js?

  • Directly use the script tag, and the type attribute defaults to "text/javascript"

        alert("hello world");
  • Use the script tag attribute src to embed the external js file

    <script src=""></script>
  • Use a pseudo url to introduce, such as

    <button value="click" onclick="JavaScript:console.log('Click this button')"></button>

Semicolon of js basic syntax

The ASI mechanism in js allows us to omit semicolons

"The ASI mechanism does not mean that the parser will automatically add semicolons to the code during parsing, but that the parser will take the semicolon change behavior as the basis for sentence breaking according to certain rules, so as to ensure the correctness of parsing."

Enhance code readability and reduce ambiguity. It is recommended to add semicolons and do not write multiple statements in one line

Data type of js basic syntax

  • Number

    js does not distinguish between integers and floating-point numbers. Whether it is 1 or 1.0, it is Number. In particular, NaN,Infinity, is also of type Number. NaN, that is, not a number, means that the result cannot be calculated. Infinity means infinity, which means that it exceeds the maximum value that Number can represent

    Especially different from java,js integers also have remainder operations, such as 3% 1.25 = 0.50

  • character string

    For text wrapped in single quotation marks or double quotation marks, the attribute and attribute value are generally expressed in double quotation marks in json, and single quotation marks are used in other times

  • Boolean value

    In particular, js has two kinds of judgment, one is = =. One is = = =. When = = = is used, the comparison value will be automatically transformed. For example, 1 = = '1' returns true, while = = = will not transform the data

    In particular, NaN is not equal to any value, and even NaN = =, NaN will get false

  • null

  • undefined

    It means undefined. It is used to judge whether function parameters are passed

  • array

    js array, which can hold any data type, is also an object

    var arr=[1,'1',true,null,undefined]
    //In addition, var arr = new Array(1,'1') can also be used to create an array;
    //For the consideration of simplicity, readability and execution speed, the previous one is used

    In particular, the array type can modify the properties of the object, such as arr.length=1, which will directly modify the capacity of the array, and those that cannot be accommodated will be deleted. If arr.length=100, the null of the original length will be increased by 100

    We can take values by subscript, such as arr[0],js does not check the array out of bounds. When accessing out of bounds elements, we will get an undefined value

    js array supports direct expansion and reduction of the array. Use arr.push (x) for expansion and arr.pop() for reduction. These two methods are aimed at the end of the array. For array headers, you can use the unshift(x) and shift() operations

  • object

    A collection of key value pairs. Values can be of any data type

    var person={
        tags: ['handsome','cute'];

    To obtain object properties, refer to the object variable. Property name;//'lihua'

js basic syntax promotes the scope when declaring variables

Before the es6 standard, var was used as the only variable declaration keyword

"varHoisting: using var to declare a variable anywhere within a function or global is equivalent to declaring it at the top of its interior (within a function or global). This behavior is called Hoisting."

In particular, the declaration is only promoted here, and the assignment operation is still in the original position

function demo(){
    console.log(x);//Undefined, no error will be reported here, not defined
    var x=1;

Example 1:

var x = 1;
function foo() {
   var x = 2;
foo(); // => 2
console.log(x); // => 1

Control statements are also included anywhere in varHoisting. In other words, var has no block level scope, and the variables declared in the block will also be promoted to the top of the function or global

Example 2:

function foo() {
    for (var i = 1; i < 10; i++) {}
    if (true) {
        var x = 2;
    console.log(i); // => 10
    console.log(x); // => 2

Example 3:

var x = 1;
if (true) {
    var x = 10; // Same name as external x variable
console.log(x); // => 10
 The above code is equivalent to
var x;
x = 1;
if (true) {
    x = 10;
console.log(x); // => 10

strict mode of js basic syntax

js did not force var to declare variables at the beginning of its design. This design has serious consequences. If a variable is not declared through var, the variable will automatically become a global variable. The consequence of this is that different js files will be affected by variables with the same name

The variable declared with var is not a global variable, its scope is limited to the function body in which the variable is declared, and the variables with the same name do not conflict with each other in different function bodies.

To solve this problem, es introduces the strict mode. Write 'use strict' in the first line of js code to start the strict mode

Tags: Javascript Front-end

Posted on Thu, 21 Oct 2021 00:08:22 -0400 by mrobertson