Detailed explanation of javascript knowledge points

1. Basic Introduction to JavaScript
2. Basic Javascript Syntax
3. JavaScript events

Example 2: When a div tag is clicked, do one thing, such as popping up a dialog box after clicking. ——Use id class
Example 3: Add tag p and use class to

4. Javascript writing location (introduction method)

4.1 Embedded js
4.2 External link js
4.3 Inline js (prohibited)

5. Common special effects of js (understanding)

5.1 Navigation follow/elevator navigation
5.2 Return to top
5.3 Rolling Follow
5.4 Breathing light/focus image (banner image)
5.5 js to achieve animation effects
5.6 Modal Windows
5.7 Timed Switching
5.8 Customize single-select, multi-select, and drop-down menus

Summarize

1. Basic Introduction to JavaScript

js was born in 1995 and is the abbreviation of Javascript. It has nothing to do with the Java language. Its main purpose at that time was to verify whether the data in the form was legal.

Popular Science: Javascript was originally supposed to be called livescript, but on the eve of its release, in order to take advantage of the media's popularity of Java, the name was temporarily changed to javascript. (That is to say, js has nothing to do with java, it just wanted to take advantage of java's fame)

Function: Responsible for controlling the first two of the web front-end standards. structure and style;

For example: the arrow switches the picture page, and the dot in the lower left corner is also

No js : It is very troublesome to submit information accurately on a page without js.

ANS : js was created to verify the legitimacy of form data. js adds verification in it. If the input is correct, it will pass. If it is not correct, an error will be prompted. js is to solve this problem.

Nowadays, js can not only do verification, but also do website special effects

2. Basic Javascript Syntax

1. Write the script tag and put it at the end of the HTML page. The js code is written in the script tag in HTML.

2. From the middle of the script tag, alert("Pop-up content, whatever is written here will pop up");

<script>
    alert("Display content in pop-up window");
</script>

A warning box pops up, and a dialog box pops up:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert();
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('Note: Pop-up window');
</script>

Note: The alert dialog boxes that come with the browser cannot be unified. They are all built into the browser and cannot be modified.

3. JavaScript events

Definition: Under what circumstances, what command is executed

Function: Capture user behavior (single click, double click, mouse movement in and out...)

Example 1: When clicking, the interface switches, and the command is executed under certain circumstances.

Three elements of the event:

The three elements of an event: event source. Event type = executed command

1. Event source: "Explanation is who this event is attributed to)

2. Event type: (refers to when the event occurred)

3. Executed instructions: fixed writing function(H Your command is written here} Event source "" point event name = anonymous function (anonymous method)

Example 2: When a div tag is clicked, do one thing, such as popping up a dialog box after clicking. ——Use id class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">Hahahaha</div>
	</body>
</html>
<script type = "text/javascript">
	// Click on the div in the page, a dialog box pops up // Step 1: If you want to control a tag, you must first find it. Use the selector to find it in CSS, and js to find it in the document of the current page // Step 2: Click on the div of the page
	// Step 3: Pop up dialog box document.getElementById('div1').onclick=function()
	{
		alert('It will pop up only when you click');
	}
	//Three elements of an event: event source. Event type = executed command</script>

Example 3: Add tag p and use class to

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">Hahahaha</div>
		<p class = "p1"> I am p1 tag</p>
		<p class = "p1"> I am p2 tag</p>
	</body>
</html>
<script type = "text/javascript">
	// Click on the div in the page, a dialog box pops up // Step 1: If you want to control a tag, you must first find it. Use the selector to find it in CSS, and js to find it in the document of the current page // Step 2: Click on the div of the page
	// Step 3: Pop up dialog box document.getElementById('div1').onclick=function()
	{
		alert('It will pop up only when you click on div');
	}
	//Three elements of an event: event source. Event type = executed command document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('It will pop up only when you click p');
	}
	// getElementsByClassName uses class to find elements in the page, and class can set multiple repeated class names // When getting, you must add [0] at the end to start counting from 0</script>

Notice:
The id is unique, i.e. single
Class is a class, which is plural. In js, getElementsByClassName is used to find elements in the page by class. Class can set multiple repeated class names. When getting, you must add [0] at the end to start counting from the number 0.

Test points:
1. The pop-up dialog box is not clicked
2. Click on the dialog box that does not pop up

4. Javascript writing location (introduction method)

4.1 Embedded js

Embed js : in html file. Put it in the scipt tag, that is, write it in HTML and put it in the script tag, which is called embedded

<script>
    alert ("Content displayed in the pop-up window"");
</script>

example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('popup embedded');
</script>

4.2 External link js

External link js : It can be in a separate js file and referenced to the page through the src attribute in the script tag; that is, it is written in a separate js file and linked to the html page through the src in the script, which is called external link

<script src="js file path>
    Don't write any code here, it won't execute.</script>

example:

.html file:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!-- <script type = "text/javascript">
	alert('popup embedded');
</script> -->
<script type="text/javascript" src="js.js">
</script>
js.js file:
alert('Popup link');

Notice:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript" src="js.js">
	//If this is the syntax of an external link, nothing will be executed alert('111111');
</script>

4.3 Inline js (prohibited)

Inline js : written in the tag attributes, this attribute must be an event attribute. (Any tag has event attributes), just like inline CSS, it is not recommended! That is, the one written on the HTML tag is called inline style

<div onclick-alert ( 'heihei');”> button</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert('pop-up window line');">Non-standard example</div>
	</body>
</html>

Note : The difference between double quotes and single quotes is within the line.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert("pop-up window line");">Non-standard example</div>
	</body>
</html>

Only single quotes can be used within the line, otherwise the js behavior cannot be executed

Note:

Inline js is not recommended, just like inline css! You can use embedded and external links at will, but it is recommended to use external links because it can separate js code and html code, making code modification more convenient.

5. Common special effects of js (understanding)

It is necessary to match the professional terms with the display effects.

5.1 Navigation follow/elevator navigation

Navigation: Click to go

5.2 Return to top

After clicking, return to the top of the page

5.3 Rolling Follow

Which part of the animated picture should draw the user's attention?

5.4 Breathing light/focus image (banner image)

Image switching, fade-in and fade-out effect

5.5 js to achieve animation effects

When testing, be sure to trigger the animation multiple times to see if there is any accumulation of animations.

Note: If there is a classic bug with animation, written in js, - animation accumulation bug, the animation will execute itself as many times as the number of times it moves in and out.
Whenever you encounter animation, how do you test it? Repeatedly trigger the test, because the so-called animation does not move only when you click it.

5.6 Modal Windows

Modal window: Two layers pop up, one is responsible for covering other page contents below (the background color is gray, and other underlying controls cannot be operated), and the other is a layer for users to operate; users are only allowed to operate the initial layer.

The purpose is to allow users to solve the top layer first

5.7 Timed Switching

5.8 Customize single-select, multi-select, and drop-down menus

System comes with (native):

Customization:

As long as it is not native to the system browser, even if it is customized, these programs require a combination of js + html + css to implement, which is definitely more time-consuming than native writing. However, for the beauty of the overall page, programmers must be required to implement it according to the designer's requirements.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Summary of examples of javascript common mistakes
Knowledge sharing about JS modularization
Summary of common knowledge points in javascript object-oriented programming practice
JavaScript summarizes several knowledge points to improve performance (recommended)
JS common knowledge points summary
Little-known knowledge points about Microtask and Macrotask in Javascript

<<: Various types of MySQL indexes

>>: Detailed explanation of how to set the change value within a specified time in Zabbix