is written in the line, and each tag is set separately.
The function (1) of referencing js through the event attribute in the opening tag
is written in the event attribute of the tag (attribute starting with on), such as onclick [on+ event Type]
Recommendation: use double quotes for html and single quotes for js.
Example:
<input type="button" value="Click me to open the world" onclick="alert('Hello World')" /> Note: Inline introduction, in JS The concept of increasing weight is not used in , so it is not commonly used [ basically not used ].
Examples are as follows: <html>
<title>JS style inline writing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--JS inline writing method starts from 01-->
<!--When the mouse clicks on the picture, a pop-up window will pop up showing 1223-->
<div class="img">
Click event:
<img src="images/001.jpg" onclick="alert(1223)"></img>
</div>
<!--JS inline writing method 01 ends-->
</body>
</html>Output result:
written in script tag
Internal reference: used by writing js code in script tag
The script tag can be written anywhere on the page
The script tag is usually used at the end of the body, or after the body
(1) Can be written anywhere;
When we need to reference the script at the head, place it at the head, otherwise place it at the bottom, because placing it at the head may affect browser rendering.
<script>
alert('Hello World!');
</script>Note: Generally, when writing exercises by yourself, you use [ Practice Use ] when you want to be lazy and don’t want to set up js files.
Usually when working on your own projects, place it at the bottom. It does not affect the loading order and can be distinguished from CSS files, and it does not affect browser rendering. If you place it elsewhere, it is best to use onload.
Examples are as follows: <html>
<title>JS style inline writing</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js inline writing starting from 02-->
<div class="img">
Click event:
<img src="images/002.jpg" id='yuansu'></img>
</div>
<!--js inline writing method 02 end-->
</body>
<script>
//js code//Find the XX element, generally add an id to the element
yuansuojb=document.getElementById('yuansu');
//Add event yuansuojb.onclick=function(){ to xx element
//Code segment alert(1);
}
//Trigger event</script>
</html>Output result:
Use src in the script tag to introduce external files
step:
Write independent js files
Referenced through script tags in the page
(1) No code can be written in the script that introduces external JS files
(2) Use HTML page code structure to separate multiple pieces of JS code outside the HTML page, which is beautiful and convenient for file reuse.
<script src="main.js"></script>
Note: Like inline styles, placing them at the bottom and head needs to be considered on a case-by-case basis [ frequently used ]
Use src not href
Examples are as follows:Write the js code into a .js file and quote it in HTML
The content of the .html file is as follows:
<html>
<title>JS style external link writing method</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<div class="img">
External link writing--click event:
<img src="images/003.jpg" id='yuansu'></img>
</div>
</body>
<script src='js/index.js'></script>
</html>The content of the .js file is as follows:
//js code//Find the XX element, generally add an id to the element
yuansuojb=document.getElementById('yuansu');
//Add event yuansuojb.onclick=function(){ to xx element
//Code segment var str="hello world!!!";
alert(str);
}Output result:
