Home > Article > Web Front-end > Detailed explanation of three usage cases of js (with code)

Detailed explanation of three usage cases of js (with code)

php中世界最好的语言Original: 2018-05-31 11:55:251594browse

This time I will bring you a detailed explanation of the three usage methods of js (with code). What are the precautions for the three usage methods of js. The following is a practical case. Let’s take a look. .

1. Inline js: js is not written separately

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式1：行内js</title> 
</head> 
<body> 
<input type="button" value="点击有惊喜" onclick="javascript:alert(&#39;哈哈哈哈&#39;)"> 
<!--onclick:点击触发一个事件，alert：弹出一个对话框--> 
</body> 
</html>

2. Internal js: the program in script can be used on the entire page

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式2：内部js</title> 
 <script type="text/javascript"> 
  //声明一个函数(整个文档都可以使用) 
  function surprise() { 
   alert('恭喜你中了一百万')/*弹出框*/ 
  } 
 </script> 
</head> 
<body> 
<input type="button" value="点击有惊喜" onclick="surprise()"><!--调用函数--> 
<input type="button" value="点击" onclick="surprise()"> 
</body> 
</html>

3. External js: Many html pages can call the set js page

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式3：外部js</title> 
 <!--很多html页面都可以调用js4.js页面--> 
 <script src="../../js/js4.js" type="text/javascript" charset="utf-8"> 
 </script> 
</head> 
<body> 
<input type="button" value="点击" onclick="test()"> 
</body> 
</html>

I believe you have mastered the method after reading the case in this article. Please come for more exciting information. Pay attention to other related articles on php Chinese website!

Detailed explanation of three usage cases of js (with code)

Related articles