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>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/>");
</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<11&&y>5),结果"+(x<11&&y>5)+"<br/>");
document.write("(x<11||y>5),结果"+(x<11||y>5)+"<br/>");
document.write("!(x<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>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>
运行结果: