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:
