js review: output statements, js whether to write punctuation, let, const (constant), JavaScript array, JavaScript object

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:

Tags: Javascript Front-end css3 html css

Posted on Tue, 09 Nov 2021 00:46:04 -0500 by xiao