1. Output the statement console.log(), console.dir(), window.alert()
Use console.log() to write to the browser console. / / the console outputs information (check for errors)
Use window.alert() to write the warning box
Write HTML output using document.write()
console.dir(div): you can print: / / (check for errors)
All properties and methods of an object.
F12 to activate the browser console and select "console" in the menu
design sketch:
code:
<!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>Document</title> </head> <style> div{ width: 300px; height: 300px; background-color: pink; } </style> <body> <div></div> <script> var div=document.querySelector("div") console.log("helloworld!") console.log(div) console.dir(div) </script> </body> </html>
The console outputs: text, element, element content
console.dir(div): you can print out:
All properties and methods of an object.
design sketch:
Added this: window.alert('warning! ')
Add this: document.write('Hello world! ')
Write HTML output in browser
console.log(div): you can print out the html structure of the elements controlled by the div variable
Child element: it will also be printed
<div> <ul> <li></li> <li></li> <li></li> </ul> </div>
On the console: you can see the div and its child elements (html structure)
2.js do you want to write punctuation?
The semicolon of JavaScript is optional. If each statement occupies a line, the semicolon can be omitted.
However:
Write a semicolon: it's easy to understand and beautiful. It's better to write a semicolon
<!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>Document</title> </head> <style> div{ width: 300px; height: 300px; background-color: pink; } </style> <body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var div=document.querySelector("div"); var li=document.querySelector("li"); console.log(li); window.alert('Warning!'); /*document.write('helloworld!')*/ document.write('') ; console.log("helloworld!"); console.log(div); </script> </body> </html>
3. Let, const (constant)
ES2015 introduces two important new JavaScript Keywords: let and const.
These two keywords provide Block Scope variables (and constants) in JavaScript
let: similar to var keyword / / variables can be defined:
let lii=document.querySelector(“li”);// You can also define variables to get elements
console.log(lii);
let ve=100;
console.log(ve);
<!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>Document</title> </head> <style> div{ width: 300px; height: 300px; background-color: pink; } </style> <body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var div=document.querySelector("div"); var li=document.querySelector("li"); let lii=document.querySelector("li"); let ve=100; console.log(li); window.alert('Warning!'); /*document.write('helloworld!')*/ document.write('') ; console.log("helloworld!"); console.log(div); console.log(lii); console.log(ve); </script> </body> </html>
design sketch:
const rty=400;
rty=100; // An error occurred and the constant cannot be assigned again
4.JavaScript arrays are written in square brackets:
The items of the array are separated by commas.
The following code declares (creates) an array called cars
var cars = [“apple”, “you”, “tyu”,5,‘q’]; // Data types can be different
console.log(cars[3]); // Return 5
console.log(cars[4]); // Return character q
<!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>Document</title> </head> <style> div{ width: 300px; height: 300px; background-color: pink; } </style> <body> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var div=document.querySelector("div"); var li=document.querySelector("li"); let lii=document.querySelector("li"); let ve=100; var cars = ["apple", "you", "tyu",5,'q']; console.log(cars[3]); console.log(cars[4]); console.log(li); window.alert('Warning!'); /*document.write('helloworld!')*/ document.write('') ; console.log("helloworld!"); console.log(div); console.log(lii); console.log(ve); </script> </body> </html>
design sketch:
5.JavaScript object:
JavaScript objects are written in curly braces.
Object properties are name:value pairs separated by commas.
Define an object:
var person = {firstName:"Bill",
lastName:"Gates",
age:62,
eyeColor:"blue"};
How do I use variable values in objects?
person.age / / get 62
console.log(person.age)
Or: change the content of the element:
p.innerHTML=person.firstName+"is"+person.age+"years old.";//
<!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>Document</title> </head> <style> div{ width: 300px; height: 300px; background-color: pink; } </style> <body> <div> <ul> <li></li> <li></li> <li></li> </ul> <p></p> </div> <script> var div=document.querySelector("div"); var li=document.querySelector("li"); let lii=document.querySelector("li"); var p=document.querySelector("p"); let ve=100; var cars = ["apple", "you", "tyu",5,'q']; var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}; p.innerHTML=person.firstName+"is"+person.age+"years old."; console.log(person.age) console.log(cars[3]); console.log(cars[4]); console.log(li); window.alert('Warning!'); /*document.write('helloworld!')*/ document.write('') ; console.log("helloworld!"); console.log(div); console.log(lii); console.log(ve); </script> </body> </html>
result: