<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言演示---如何在HTML中写JS代码</title>
</head>
<body>
<!-- HTML与JS相结合方式1 -->
<script type="text/javascript">
alert("abc123");
</script>
<!-- HTML与JS相结合方式2 -->
<script type="text/javascript" src="js/1.js">
</script>
<!-- 反模式: 下面既有src导入又有本地脚本段的方式是不能共存的,如果这两种方式中的代码都要执行,就把它们分成不同的脚本段来写或导入 -->
<script type="text/javascript" src="js/2.js">
alert("ccc2");
</script>
</body>
</html>
上述代码是演示如何在HTML代码如何插入JS的代码。
1.关键字: if else for while do switch case break continue var function synchronized catch try
2.标识符: 和Java一样
3.分隔符: 和Java一样
4 注释: 只有 // 和 /*...*/ 两种,没有Java中的: /**...*/
5 程序书写风格: 略(和Java一样)
6 数据类型(全部小写): number, boolean, string, object, undefined(当一个变量被声明但没有赋初值时,就是该类型)
7 变量 ---用关键字var来声明
8.js和C语言一样,有 0 和 非0 的概念
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言演示---语法讲解</title>
</head>
<body>
<script type="text/javascript">
//alert( typeof(10) ); //number
//alert( typeof(112892188128219) ); //number
//alert( typeof(-2323) ); //number
//alert( typeof(-23.456) ); //number
//alert( typeof(true) ); //boolean
//alert( typeof("abc123")=="string" ) ; //true
//alert( typeof("abc123")=="String" ) ; //false
var ar=[1,3];
//alert( typeof(ar) ); //object
var ab;
//alert( typeof(ab) );
</script>
<script type="text/javascript">
//结合变量,专门演示一下数据类型
var x=10;
alert("x1="+x);
x = x/3; //3.333333333...
alert("x2="+x);
x="abc"; //ok
alert("x3="+x);
var x=true;//js中的变量,即使前面定义过,也可以重新定义且没有类型限制
alert("x4="+x); //x4=true
</script>
<script type="text/javascript">
//多个脚本段之间的变量是同一作用域的,可共用数据---全局变量
alert("x5="+x); //x5=true
x++; //js和C语言一样,有 0 和 非0 的概念
alert("x6="+x); //2
</script>
</body>
</html>
9.变量在声明但未赋值时,js把它初始化成"undefined"
10一个变量没有声明,但可以赋值
11没有声明也没有赋值的变量,是不能使用的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言演示---语法讲解</title>
</head>
<body>
<script type="text/javascript">
var str="abc123";
//alert(str);
//alert( typeof(str) );//string
str = 'a'; //※ 也可以用单引号作为字符串的分界符---js中没有字符类型的概念,全是字符串
//alert( typeof(str) );//string
</script>
<script type="text/javascript">
//变量在声明但未赋值时,js把它初始化成"undefined"
var x;
alert(x);
//一个变量没有声明,但可以赋值
y=10;
alert(y);
//没有声明也没有赋值的变量,是不能使用的
alert(z); //WA ---反模式
//alert("over");
</script>
<script type="text/javascript">
//var a=10
//var b=5
//上面的代码虽然写得不严谨,但浏览器还是能够解析执行(这也决定了js是非严谨性语言)---但我们平时还是要尽量写规范代码,不要去挑战它的极限
alert(a+b);
</script>
<script type="text/javascript">
</script>
</body>
</html>
12常量: js中只有直接常量, 没有符号常量
13 算术运算符:+(正)、-(负)、++、--、+(加)、-(减)、*、/(除)、%(取余)
14 js中没有把int和double区分成是不同的类型,都是number类型
15当参与减号运算的数据存在字符串形的数值时,js会把它先转成number类型,然后再进行减运算
16关系运算符:==、!=、>、<、>=、<=
17逻辑运算符:!(非)、&&(条件与)、||(条件或) ----与Java相比,逻辑运算符中没有&,|,^
18只要是“非0”,都是true。 只有“0”才是false
19一定要小心的一个bug ---为避免这个bug,有的公司强制要求写成: if(-1==t)
20 位运算符:~(非)、&(与)、|(或)、^(异或)、<<(左移位)、>>(右移位)、>>>(无符号右移位)
21赋值运算符:= 、+=、*= 、 /=、 %=
22条件运算符: 表达式1 ? 表达式2 : 表达式3
23函数内部声明的变量是局部变量,不在函数内部声明的变量都是全局变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言演示---语法讲解</title>
<script type="text/javascript">
//8 常量: js中只有直接常量, 没有符号常量
//9 运算符
//9.1 算术运算符:+(正)、-(负)、++、--、+(加)、-(减)、*、/(除)、%(取余)
function a1(){
var d = 2.323232356;
d++; // 与Java不一样,++运算不但可用于整数,而且可用于其它类型甚至是boolean类型
alert("d="+d);
var a=2.3;
var b=3.7;
alert( a+b ); //6
a=2;
alert( a/100*100 ); //2 ---js中没有把int和double区分成是不同的类型,都是number类型
//特殊的+,-
alert(1+2);
alert("1"+2);//和Java一样,是连接符
//当参与减号运算的数据存在字符串形的数值时,js会把它先转成number类型,然后再进行减运算
alert("1"-2); //-1
alert(20-"1");
alert(true+1); //2
alert(false+1); //1
alert( 100%-3 ); //1 %运算符和Java一样
}
//a1(); //调用
//9.2 关系运算符:==、!=、>、<、>=、<=
function a2(){
var a=3,b=4;
if(a<=b){
alert("a<b");
}
alert(a==5); //false
alert(a!=5); //true
}
//9.3 逻辑运算符:!(非)、&&(条件与)、||(条件或) ----与Java相比,逻辑运算符中没有&,|,^
function a3(){
var t=4;
alert(t>3 && t<10); //true
alert( !(t>3) ); //false
//只要是“非0”,都是true。 只有“0”才是false
t=-4;
if(t){
alert("I am OK!");
}
alert(!t);//false
//一定要小心的一个bug ---为避免这个bug,有的公司强制要求写成: if(-1==t)
if(t=-1){//这个表达式永远是true
alert("22222");
}
}
//9.4 位运算符:~(非)、&(与)、|(或)、^(异或)、<<(左移位)、>>(右移位)、>>>(无符号右移位)
//位运算符的用法和Java完全一样
function a4(){
var a=6;
alert( a&10 ); // 0110 & 1010 ==> 0010 即是 2
alert( a<<2 ); // 0110 左移2位 ==> 011000 即是24
}
//9.5 赋值运算符:= 、+=、*= 、 /=、 %=
//赋值算符的用法和Java完全一样
function a5(){
var a=6;
a +=5;
alert( a ); // 11
a %= 3;
alert( a ); //2
}
//9.6 条件运算符: 表达式1 ? 表达式2 : 表达式3
function a6(){
var a=35, b=123; //函数内部声明的变量是局部变量
var max = a>b ? a: b;
alert("max="+max);
}
var a=3.14;//不在函数内部声明的变量都是全局变量
function a7(){
//var a=35;
//var a="w";
alert( typeof(a)=="number" );
alert( typeof(a)=="string" );
alert( typeof(a)=="boolean" );
alert( typeof(a)=="object" );
alert( typeof(a)=="undefined" );
}
</script>
</head>
<body>
<input type="button" value="算术运算符演示" onclick="a1();"> <br/><br/>
<input type="button" value="关系运算符演示" onclick="a2();"> <br/><br/>
<input type="button" value="逻辑运算符演示" onclick="a3();"> <br/><br/>
<input type="button" value="位运算符演示" onclick="a4();"> <br/><br/>
<input type="button" value="赋值运算符演示" onclick="a5();"> <br/><br/>
<input type="button" value="三元运算符演示" onclick="a6();"> <br/><br/>
<input type="button" value="如何判断数据的类型" onclick="a7();"> <br/><br/>
</body>
</html>
流程控制语句
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS语言演示---流程控制语句</title>
<style type="text/css">
@import url("css/tb.css");
</style>
<script type="text/javascript">
var i=5;
document.write("i="+i);
for(var j=0; j<10;j++){
document.write("<input type='button' value='"+j+"'/> ");
}
</script>
</head>
<body>
<hr/>
<script type="text/javascript">
document.write("<table>");
document.write("<tr>");
for(var i=1; i<=100; i++){
document.write("<td>"+i+"</td>");
if(i%9==0){
document.write("</tr><tr>");
}else{
document.write(" ");
}
}
document.write("</tr>");
document.write("</table>");
</script>
</body>
</html>