JavaScript-基本语法_script周一赋值1,周二赋值2-优快云博客

本文深入解析JavaScript的基础知识，涵盖变量、数据类型、运算符、流程控制、函数及特殊语句，适合初学者快速掌握核心语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、JavaScript 引入方式
有内部引入和外部引入两种方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
<script type="text/javascript">
alert("头部");
</script>
</head>
<body>
<!-- <script type="text/javascript" src="myJs.js" charset="gbk"></script>  -->
<script type="text/javascript" src="myJs.js"></script>
<script type="text/javascript">
alert("身体");
</script>
</body>
</html>

2、JavaScript 注释
单行： // ；多行： /* */


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript注释</title>
</head>
<body>
<script type="text/javascript">
// document.write("a<br/>");
/*document.write("b<br/>");
document.write("c<br/>");*/
document.write("d<br/>");
</script>
</body>
</html>

运行结果：
在这里插入图片描述
3、JavaScript 变量
JavaScript 是弱类型语言，统一用 var 来定义变量；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript变量</title>
</head>
<body>
<script type="text/javascript">
 var a ;  // 定义变量a
 a=1;     // 给变量a赋值
 document.write("a="+a+"<br/>");
 a="我是字符串";
 document.write("a="+a+"<br/>");
 
 var b="你好啊";
 document.write("b="+b+"<br/>");
</script>
</body>
</html>

运行结果：
在这里插入图片描述
3、JavaScript 基本数据类型
数值类型；字符串类型；布尔类型； Undefined(表示变量不含有值) Null(置空变量)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript基本数据类型</title>
</head>
<body>
<script type="text/javascript">
 var a=1;
 document.write("数值类型a="+a+"<br/>");
 var b=1.2;
 document.write("数值类型b="+b+"<br/>");
 var c='我是人';
 document.write("字符串类型c="+c+"<br/>");
 var d=false;
 document.write("布尔类型d="+d+"<br/>");
 
 var e;  // 表示变量不含有值
 document.write("e="+e+"<br/>");
 
 var f="你好";
 document.write("f="+f+"<br/>");
 f=null;  // 变量置空
 document.write("f="+f+"<br/>");
</script>
</body>
</html>

运行结果：
在这里插入图片描述
5、JavaScript 运算符
（1）算术运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y=4;
 document.write("x="+x+",y="+y+"<br/>");
 document.write("x+y="+(x+y)+"<br/>");
 document.write("x-y="+(x-y)+"<br/>");
 document.write("x*y="+(x*y)+"<br/>");
 document.write("x/y="+(x/y)+"<br/>");
 document.write("x%y="+(x%y)+"<br/>");
 document.write("x++="+(x++)+"<br/>");
 document.write("x="+x+"<br/>");
 document.write("++y="+(++y)+"<br/>");
 document.write("y="+y+"<br/>");
</script>
</body>
</html>

运行结果：
在这里插入图片描述
（2）赋值运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>赋值运算符</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y=4;
 document.write("x="+x+",y="+y+"<br/>");
 x=10;y=4;
 document.write("x="+x+"<br/>");
 x=10;y=4;
 document.write("x+=y,x="+(x+=y)+"<br/>");
 x=10;y=4;
 document.write("x-=y,x="+(x-=y)+"<br/>");
 x=10;y=4;
 document.write("x*=y,x="+(x*=y)+"<br/>");
 x=10;y=4;
 document.write("x/=y,x="+(x/=y)+"<br/>");
 x=10;y=4;
 document.write("x%=y,x="+(x%=y)+"<br/>");
</script>
</body>
</html>

运算结果：
在这里插入图片描述
（3）比较运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>比较运算符</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y=4;
 document.write("x="+x+",y="+y+"<br/>");
 document.write("x==10,结果"+(x==10)+"<br/>");
 document.write("x=='10',结果"+(x=='10')+"<br/>");
 document.write("x===10,结果"+(x===10)+"<br/>");
 document.write("x==='10',结果"+(x==='10')+"<br/>");
 document.write("x!=10,结果"+(x!=10)+"<br/>");
 document.write("x!='10',结果"+(x!='10')+"<br/>");
 document.write("x!==10,结果"+(x!==10)+"<br/>");
 document.write("x!=='10',结果"+(x!=='10')+"<br/>");
 document.write("x&gt;y,结果"+(x>y)+"<br/>");
 document.write("x&lt;y,结果"+(x<y)+"<br/>");
 document.write("x&gt;=y,结果"+(x>=y)+"<br/>");
 document.write("x&lt;=y,结果"+(x<=y)+"<br/>");
</script>

</body>
</html>

运算结果：
在这里插入图片描述
（4）逻辑运算符

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y=4;
 document.write("x="+x+",y="+y+"<br/>");
 document.write("(x&lt;11&&y&gt;5),结果"+(x<11&&y>5)+"<br/>");
 document.write("(x&lt;11||y&gt;5),结果"+(x<11||y>5)+"<br/>");
 document.write("!(x&lt;11),结果"+!(x<11)+"<br/>");
</script>

</body>
</html>

运算结果：
在这里插入图片描述
（5）三目运算符


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y=4;
 document.write("x="+x+",y="+y+"<br/>");
 document.write("(x&gt;y?x:y),结果"+(x>y?x:y)+"<br/>");
</script>
</body>
</html>

运行结果：
在这里插入图片描述

（6）字符串连接“+”


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串连接“+”</title>
</head>
<body>
<script type="text/javascript">
 var x=10,y='4';
 document.write("x="+x+",y="+y+"<br/>");
 document.write("(x+y),结果"+(x+y)+"<br/>");
</script>
</body>
</html>

运算结果：
在这里插入图片描述
6、JavaScript 选择与循环语句
（1）if…else 语句

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if...else语句；</title>
</head>
<body>
<script type="text/javascript">
 var a=1;
 if(a>2){
	 alert("a>2");
 }else{
	 alert("a<=2");
 }
 
 var month=6;
 if(month>=1&&month<=3){
	 alert("春天");
 }else if(month>=4&&month<=6){
	 alert("夏天");
 }else if(month>=7&&month<=9){
	 alert("秋天");
 }else if(month>=10&&month<=12){
	 alert("冬天");
 }else{
	 alert("逆天了");
 }
</script>
</body>
</html>

（2）switch 语句

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch语句；</title>
</head>
<body>
<script type="text/javascript">
 var d=6;
 switch(d){
 case 1:alert("周一");break;
 case 2:alert("周二");break;
 case 3:alert("周三");break;
 case 4:alert("周四");break;
 case 5:alert("周五");break;
 case 6:alert("周六");break;
 case 7:alert("周日");break;
 default:alert("逆天了");
 }
</script>
</body>
</html>

（3）for 循环语句

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for循环语句；</title>
</head>
<body>
<script type="text/javascript">
 for(var i=0;i<10;i++){
	 document.write("i="+i+"<br/>");
 }
</script>
</body>
</html>

（4）while/do…while 语句

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while/do..while语句；</title>
</head>
<body>
<script type="text/javascript">
 var i=0;
 while(i<10){
	 document.write("i="+i+"<br/>");
	 i++;
 }
 
 var j=0;
 do{
	 document.write("j="+j+"<br/>");
	 j++; 
 }while(j<10);
</script>
</body>
</html>

7、JavaScript 函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript函数；</title>
</head>
<body>
<script type="text/javascript">
 function fun1(){
	 alert("我的第一个方法");
 }
 
 function fun2(param1){
	 alert(param1);
 }
 
 function fun3(param1,param2){
	 alert(param1+" "+param2);
 }
 
 function fun4(param1,param2){
	 return param1+" "+param2;
 }
 // fun1();
 // fun2("fuck");
 // fun3("fuck","you");
 var result=fun4("fuck","you");
 alert(result);
</script>
</body>
</html>

8、Break VS Continue

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Break VS Continue</title>
</head>
<body>
<script type="text/javascript">
   document.write("break;<br/>");
   for(var i=0;i<10;i++){
	   if(i==5){
		   break;
	   }
	   document.write("i="+i+"<br/>");
   }
   document.write("<hr/>");
   document.write("continue;<br/>");
   for(var j=0;j<10;j++){
	   if(j==5){
		   continue;
	   }
	   document.write("j="+j+"<br/>");
   }
</script>
</body>
</html>

运行结果：
在这里插入图片描述