Front-end basics (1)_JavaScript for the first time

At the beginning, the browser could only display text and pictures, and could not perform various dynamic operations.

1. History of JavaScript

1. Brandon Edge of Netscape developed js
2. It borrowed from the data management mechanism of java and the function of c
3. The creation of Js is used to solve the problem of interaction between the browser and the user (the problem of form submission )
4. History: Mocha->livescript->javascript

2. The core components of JavaScript

1. The core syntax of ECMAscript specifies how to write or use the language
2. DOM document object model document model ----- label
3. BOM browser object model browser model - browser

2.1 Composition of JavaScript

(1) The grammatical standard core of ECMAScript js
(2) DOM: document object model The document object model dom provides methods for manipulating html documents
(3) BOM: Browser object model The browser object model bom provides methods for operating browsers

2.2 What is JavaScript

JavaScript is an object-based, event-driven, interpreted scripting language.
① Object-based : Object is a kind of data in JS, which contains some methods, which can solve some of the most basic operations in js (objects can only solve basic problems) ② Driven by events: mainly used to
solve browsing of the interaction between the server and the user. The user operates the browser page, and the browser page gives the corresponding feedback to the user. These things are all driven by events
③ Interpretation

Compilability: When a compiled language executes code. The entire code will be compiled once, and an exe file will be generated after compilation, and then the program can be opened with the exe file once and for all.
Interpretation: When the interpreted language executes the code, it will interpret the code line by line, explaining one line and executing one line
When developing browser pages, interpreted languages are not prone to white screens, so when developing web pages, they are more inclined to interpreted languages. Interpreted languages are also cross-platform, so they have better compatibility.

2.3 Three ways to introduce JavaScript

(1) Introduced within the line
①

<div onclick=”alert(‘我是行内引入’)”></div>

②Note: If the nesting of quotation marks is grammatical, the nesting of quotation marks requires outer
quotation marks.

(2) Internal introduction Write the code in the script tag

①Write the script tag in the html code,
②Write the js code in the script tag
③Note: You can write multiple script tags in the html document, and you can also write the script anywhere, but generally write it at the end of the body or At the end of the head tag
④ It is recommended to write the script behind the body
⑤ The execution order of the Html code is from top to bottom. If you encounter a script tag, you will enter the script tag, execute the js code, and continue to execute after execution, so if you continue If you get the element before the body, you will not get it, so it is recommended to write it at the end of the body tag

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

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

<body>
  <div class="box">
    我是box盒子
  </div>
  <script>
    setTimeout(() => {
      
      
      const box = document.getElementsByClassName('box')[0]
      alert(box.innerHTML)
    }, 1000)
  </script>
</body>


</html>

insert image description here

(3) External import uses the src attribute of script to import

①Write the script tag
②Set the src attribute of the script tag to the path of the external js file
③Note: No js code can be written in the script tag of the externally imported js file, and it will not be executed if it is written.
The difference between Href and src refers to the path, one refers to the path of the external style, the other refers to the external path of js,
a tag and css external entry are both href
js and pictures are src

html:

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

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

<body>
  <div class="box">
    我是box盒子
  </div>
  <script src="./text.js"></script>
</body>

</html>

js:

setTimeout(() => {
    
    
  const box = document.getElementsByClassName('box')[0]
  alert(box.innerHTML)
}, 1000)

insert image description here

3. window.onload

(1) Window.οnlοad=function(){js code}
(2) Function: the js code written in curly brackets will wait until the tags and external resources (pictures, audio, video, external files) on the page are loaded before implement;

  <script>
    window.onload = () => {
    
    
      const box = document.getElementsByClassName('box')[0]
      alert(box.innerHTML)
    }
  </script>

The difference between a webpage and a website
Webpage: html css js
Website: composed of webpages

Browser : Google Firefox, Opera, IE, Safari, etc.
Why there is compatibility : Because the kernel of the browser is different

The relationship between Java and javascript? There is no half-dime relationship.