js基础运用 day1

<!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+"'/>&nbsp;&nbsp;");
	      }
</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("&nbsp;");
	    	  }
	      }
	     document.write("</tr>");
	     document.write("</table>"); 
	   </script>
</body>
</html>

猜你喜欢