javascript引入方式总结

最新推荐文章于 2024-09-19 17:19:44 发布

豆豆_Q

最新推荐文章于 2024-09-19 17:19:44 发布

阅读量696

点赞数

分类专栏： JavaScript 文章标签： javascript 四中引入方式总结

本文链接：https://blog.csdn.net/Homing_qu/article/details/63843663

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript四种引入方式

1、在HTML文档的<head></head><body></body>中使用<script></script>标签引入；

a) 实例:

<html>
<meta charset = "utf-8"/>
	<head>
		<title>九九乘法表</title>
		<script type = "text/javascript">
			function getResult(){
					for(var i = 1;i <= 9;i++){
						for(var j = 1;j <= i;j++){
							document.write(j+"*"+i+"="+i*j+"\t");
							if(i == j){
								document.write("<br>");
							}	
						}
					}
			}

			function getMax(){
				var num1 = 30.30;
				var num2 = 40;
				if(num1 > num2){
					document.write(num1);
				}
				document.write(num2);
			}
			
			function getAdd(){
				var sum = 0;
				for(var i = 1;i <= 100;i++){
					sum += i;
				}
				alert(sum);
			}
			
			function getSum(){
				var sum = 0;
				var sum2 = 0;
				for(var i = 1;i <= 100;i++){
					if(i % 2 == 0){
						sum += 1/i;
					}
					sum2 += 1/i;
				}
				alert(sum2-sum);
			}
			
			function getNum(){
			var count = 0;
				for(var i = 101;i <= 200;i++){
					if(i % 4 == 0){
						count += 1;
						if(count == 5){
							break;
						}
						document.write(i+"\t");
					}
				}
			}
			
			function getGrade(num){
				if(num >= 90){
					document.write("A");
				}else if(num >= 80 && num < 90){
					document.write("B");
				}else if(num >= 70 && num < 80){
					document.write("C");
				}else if(num < 70){
					document.write("D");
				}
			}
			
			function grade(){
				var num = document.getElementById("grade");
				getGrade(num.value);
			}
			
		</script>
		<style>
			.tab{
				text-align:center;
				color:red;
			}
		</style>
	</head>
	<body>
		<div class = "tab" onclick = "getResult();">九九乘法表</div><br/>
		<div class = "com" >
			<label>比较30.30和40的最大值</label>
			<input type = "button" value = "确定" onclick = "getMax();"/>
			</div><br/>
		<div class = "add" >
			<label>求1到100的和</label>
			<input type = "button" value = "确定" onclick = "getAdd();"/>
			</div><br/>
		<div class = "sum" >
			<label>分数的和</label>
			<input type = "button" value = "确定" onclick = "getSum();"/>
			</div><br/>
		<div class = "num" >
			<label>输出能被4整除的五个数</label>
			<input type = "button" value = "确定" onclick = "getNum();"/>
			</div><br/>
		<div class = "gra">
			<label>成绩等级查询</label>
			<input type = "text" value = "" id = "grade"/>
			<input type = "button" value = "查询" onclick = "grade();"/>
		</div>
		
		<script type = "text/javascript">
			function getGrade(num){
				if(num >= 90){
					document.write("A");
				}else if(num >= 80 && num < 90){
					document.write("B");
				}else if(num >= 70 && num < 80){
					document.write("C");
				}else if(num < 70){
					document.write("D");
				}
			}
			
			function grade(){
				var num = document.getElementById("grade");
				getGrade(num.value);
			}
			
		</script>
	</body>
</html>

2、外部引入，通过使用<script>的src属性，在html外部引入.js文件；

a) 实例:

<html>
<meta charset = "utf-8"/>
	<head>
		<title>九九乘法表</title>
		<script type = "text/javascript" src = "javascript.js"></script>
		<style>
			.tab{
				text-align:center;
				color:red;
			}
		</style>
	</head>
	<body>
		<div class = "tab" onclick = "getResult();">九九乘法表</div><br/>
		<div class = "com" >
			<label>比较30.30和40的最大值</label>
			<input type = "button" value = "确定" onclick = "getMax();"/>
			</div><br/>
		<div class = "add" >
			<label>求1到100的和</label>
			<input type = "button" value = "确定" onclick = "getAdd();"/>
			</div><br/>
		<div class = "sum" >
			<label>分数的和</label>
			<input type = "button" value = "确定" onclick = "getSum();"/>
			</div><br/>
		<div class = "num" >
			<label>输出能被4整除的五个数</label>
			<input type = "button" value = "确定" onclick = "getNum();"/>
			</div><br/>
		<div class = "gra">
			<label>成绩等级查询</label>
			<input type = "text" value = "" id = "grade"/>
			<input type = "button" value = "查询" onclick = "grade();"/>
		</div>
		
	</body>
</html>

外部.js文件

	function getResult(){
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				document.write(j+"*"+i+"="+i*j+"\t");
					if(i == j){
						document.write("<br>");
					}	
				}
			}
		}

	function getMax(){
		var num1 = 30.30;
		var num2 = 40;
		if(num1 > num2){
			document.write(num1);
			}
			document.write(num2);
		}
			
	function getAdd(){
		var sum = 0;
		for(var i = 1;i <= 100;i++){
			sum += i;
		}
			alert(sum);
		}
			
	function getSum(){
		var sum = 0;
		var sum2 = 0;
		for(var i = 1;i <= 100;i++){
			if(i % 2 == 0){
				sum += 1/i;
			}
				sum2 += 1/i;
			}
				alert(sum2-sum);
		}
			
	function getNum(){
		var count = 0;
			for(var i = 101;i <= 200;i++){
				if(i % 4 == 0){
					count += 1;
					if(count == 5){
						break;
					}
					document.write(i+"\t");
				}
			}
		}
			
	function getGrade(num){
			if(num >= 90){
				document.write("A");
			}else if(num >= 80 && num < 90){
				document.write("B");
			}else if(num >= 70 && num < 80){
				document.write("C");
			}else if(num < 70){
				document.write("D");
			}
		}
			
	function grade(){
			var num = document.getElementById("grade");
			getGrade(num.value);
		}

3、事件定义，直接在事件中使用JavaScript:js代码引入；

a) 实例:

  <!doctype html>  
    <html >  
     <head>  
      <meta charset="UTF-8">  
      <title>js引入方式实验</title>  
     </head>  
     <body>  
            js的引入方式实验  
            <button id="button" οnclick="javascript:alert('js引入的方式3：事件内引入')">实验</button>  
     </body>  
    </html>

4、在一个js文件中调用另外一个js文件。注意:不能直接在第一个js文件中写<script src = xx.js></script>,这样会导致引入的js文件引入失败；

a) 实例:

<html>
<meta charset = "utf-8"/>
	<head>
		<title>九九乘法表</title>
		<script type = "text/javascript" src = "javascript.js">
		</script>
		<style>
			.tab{
				text-align:center;
				color:red;
			}
		</style>
	</head>

外部一级.js文件

document.write("<script src='javascript-2.js'></script>");
	function getMax(){
		var num1 = 30.30;
		var num2 = 40;
		if(num1 > num2){
			document.write(num1);
			}
			document.write(num2);
		}
			
	function getAdd(){
		var sum = 0;
		for(var i = 1;i <= 100;i++){
			sum += i;
		}
			alert(sum);
		}

一级引入二级.js文件时使用document.write("<script src='javascript-2.js'></script>");

二级.js文件

	function getResult(){
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				document.write(j+"*"+i+"="+i*j+"\t");
					if(i == j){
						document.write("<br>");
					}	
				}
			}
		}