In this section, the target

  1. Know how to write javascript code.
  2. Master javascript 3 bullet boxes.
  3. Master javascript comments.
  4. Master the browser debugging tool console.

Content in this paper,

This article introduces how to write JS code on the web, how to introduce external JS code files, JS 3 popboxes, comment syntax, and browser debugging tool console use.

Read for 15 to 20 minutes.

The script tag

If we need to write javascript code in a web page, we need to tag it with script tags.

Syntax format:

<script type="text/javascript">
// You can write javascript code here
</script>
Copy the code

Example 1, using javascript to print Hello javascript on a web page.

1) First let’s create a new web page:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first javascript web page</title>
</head>
<body>

</body>
</html>
Copy the code

The page content is very simple, a blank page with the title: My first javascript web page.

2) Output using javascript: Hello javascript.

You can just print this out and just say Hello javascript inside the body tag. Now we need to output in javascript:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One of my javascript pages</title>
</head>
<body>
<! -- script tag -->
<script type="text/javascript">
	document.write("Hello javascript");
</script>
</body>
</html>
Copy the code

Among them:

1. Script This is the javascript script tag, javascript script needs to be written in this tag. 2. Type ="text/javascript" indicates that the tag contains a javascript script. 3. document.write("Hello javascript"); This line of code prints: Hello javascript on the page.Copy the code

Run the page and you can see that the page displays the word Hello javascript.

Think about:

So from an object-oriented perspective, what is document? What is write?Copy the code

Example 2: A dialog box is displayed indicating that the data is added successfully.

In JS, you can use the window.alert method for pop-up prompt.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One of my javascript pages</title>
</head>
<body>
<! -- script tag -->
<script type="text/javascript">
	window.alert("Increase success");
</script>
</body>
</html>
Copy the code

Example 3: A pop-up input box prompts the user to enter his/her name and print it on the web page.

In JS, you can use the window.prompt method to prompt the user for input.

<! DOCTYPEhtml>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>One of my javascript pages</title>
	</head>
	<body>
		<script type="text/javascript">
			let name = window.prompt("Please enter name:");
			if (name) {
				document.write(name);
			}
		</script>
	</body>
</html>
Copy the code

Among them:

1. Let declares variable keywords. 2. Declare the name variable to accept user input.Copy the code

Example 4: A confirmation dialog box is displayed asking you whether to delete data.

In js, window.confirm can be used to prompt the user to confirm the deletion.

<! DOCTYPEhtml>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>One of my javascript pages</title>
	</head>
	<body>
		<script type="text/javascript">
			let result = window.confirm("Delete data?");
			if (result) {
				document.write("Your choice is yes.");
			} else {
				document.write("Your choice is: Cancel.");
			}
		</script>
	</body>
</html>
Copy the code

Among them:

1. Result is a Boolean variable that the user selects to be true for certain or false for otherwise. 2. Use the if else logic to determine the input result.Copy the code

Script introduces external JS files

Above we have written a lot of JS code in the script tag of the web page. Similar to CSS, when there is too much code, or when many pages share javascript functionality, we can extract the JS code into a.js file and import it via the SRC property of script.

For example 1, put the code from example 4 in the previous section into a js file and introduce:

Create a new js directory and create main.js under the js directory.

let result = window.confirm("Delete data?");
if (result) {
	document.write("Your choice is yes.");
} else {
	document.write("Your choice is: Cancel.");
}
Copy the code

Similar to CSS and image, js code files are stored in the JS directory. The first file is usually named main.js or index.js.

Introduce:

<! DOCTYPEhtml>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>One of my javascript pages</title>
	</head>
	<body>
		<script type="text/javascript" src="./js/main.js"></script>
	</body>
</html>
Copy the code

Run this page and it will look exactly like the example above.

Annotation syntax

Sometimes code needs to be explained, so you can add comments. Javascript comments come in two formats:

The first format uses two slashes:

// This is a comment
Copy the code

The second format uses /* */ package:

/* This is a comment */
Copy the code

Example 1:

<script type="text/javascript">
// Declare a variable to store the name entered by the user
let name = window.prompt("Please enter name:");
if (name) {
	/* document is the document object model. Document.write () is used to print content on the page. * /
	document.write(name);
}
</script>
Copy the code

Good comments increase the readability of code and are especially welcome in teamwork.

Here’s a meme, by the way:

Developers hate it when people don't write comments. There's nothing developers hate more than writing comments.Copy the code

The console

The console is a magical place where the user can see everything we’ve written before.

The console is a programmer’s back garden. We can output debugging information, print variables and so on, and normal users can not see.

1. Console opening mode:

Open the browser, press F12, and select ConsoleCopy the code

As shown below:

Normal browsers can be opened by using the F12 shortcut key. If it cannot be opened, you can find the relevant menu by right clicking on the blank page of the browser.

2. Print debugging information on the console.

When writing code, we often need to debug it. It is not good to print it directly on the page. We can print it on the console:

consoleThe log (parameters1, the parameter2, the parameter3,...). ;Copy the code

Example 1, on the console print: Hello Console!

console.log("Hello console!");
Copy the code

3. Write code on the console:

The console environment inherits the context of the page, and we can also write code on the console.

Example 2, printing on a page from the console: Hello.

document.write("Hello, everybody.");
Copy the code

The syntax here is the same as above, because the console can also write code.

Example 3, calculate 50 to the 1/2 power on the console:

Math.sqrt(50.1/2)
Copy the code

Math.sqrt is used to compute a number to the NTH power.

This section summarizes

  1. Javascript is written in the script tag of the web page, and external files can be imported via SRC.
  2. Js three pop-up box: prompt box, confirm box, input box.
  3. Js comment syntax: // or /* */ package.
  4. Console use of browser debugging tools.

exercises

  1. In javascript, we can print content on a web page with document.write(), and document also has a method called writeln.
  2. What are the comments for HTML and CSS? How is it different from javascript?
  3. What are the three javascript popboxes? Please write relevant examples to illustrate, and explain the application scenario, can not be consistent with courseware.
  4. Open the console of Baidu, JINGdong and Zhihu and see if there is anything found? Write your findings and state the implications.
  5. Given that the radius of a circle is 2, calculate its area on the console and reflect the result in screenshots.
  6. Given that the radius of a ball is 5, calculate its volume on the console and reflect the result in screenshots.