JavaScript网页编程之------基本运用语法(变量、运算符、语句)

JavaScript 概述

JavaScript基于对象和事件驱动的脚本语言,主要应用在客户端。

特点:

1. 交互性(它可以做的就是信息的动态交互)

2. 安全性(不允许直接访问本地硬盘)

3. 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)


JavaScriptJava不同

1. JSNetscape公司的产品,前身是LiveScript;JavaSun公司的产品,现在是Oracle公司的产品

2. JS是基于对象,Java是面向对象。

3. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。

4. JS是弱类型,Java是强类型。


JavaScript语法

每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易。JS中也一样有变量,语句,函数,数组等常见语言组成元素。

1. 变量

通过关键字var来定义,弱类型既是不用指定具体的数据类型。

例:var x = 3; x = “hello”;

注:JS中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)。

注意:Javascript的语句在结尾处是可以不用分号结束的,非严谨语言的特点。

但为了符合编程规范,需要象java一样定义结束符。

而且有些情况是必须写分号的,如:var x = 3 ; var y =5如果两条语句写在同一行,就需要分号隔开。

1)关键字:几乎跟Java一样

2)标识符,分隔符:和Java一样

3)注释:用了Java当中的这两种:   //  和      /* */

4)数据类型:number类型、string类型、boolean类型、undefined(当变量声明但没有赋值)

5)变量:var (弱类型,类似于Java当中的Object)

6)在js当中,单引号和双引号是一样的,封装的都是字符串(但同时有两个引号封装的,内部的要用单引号)

7)全局变量和局部变量

全局变量----只要不是函数内部声明的,都是。并且不会以大括号来区分,也不会以<script>来区分

a、只要不在函数内部声明,那么一个变量即使在导入的.js文件中声明,在页面脚本中同样是有效的。

b、Java当中的变量的作用域是以大括号来区分,而JS不是。

局部变量----函数内部声明的和形参

函数内部的形参也是局部的,里面更改的值只能在内部有效,函数返回之后就无效了

例:

<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>
	<script type="text/javascript">
		//1 标识符,关键字,分隔符---几乎和Java一样
	    //2 注释:只支持  //单行   和    /*多行*/
	    //3 变量:弱类型 , 所有的变量都是用var来声明---本质上就是Java当中的Object类型
	    var x=3;
	    var y="abc";
	    //alert(x+","+y);
	    x="xyz";
	    //alert(x);
	    x=true;//js当中的布尔类型和C一样,有0 和 非0 的概念
	    x+=1;
	    //alert(x);
	    a=3.14;//因为浏览器有兼容性,所以一个变量不声明类型也可以直接对期赋值(但不要去读),因为是弱类型,都是var,写不写一样
	    //alert(a);
	    //alert(aa);//由于变量aa没有声明也没有赋值,所以这里是出错的,没有输出
	    a='aa';
	    //alert(a);//js当中,单引号和双引号是一样的,对应的变量都是字符串---js当中没有字符类型--包含在字符串当中
	    //a=33223232323232332322323232323456;
	    //alert(a);
	    //alert(typeof(a));//number
	    
	    //由于浏览器有兼容性,一条语句的末尾不加分号,也可以正常执行,但这样写不规范,建议还是加上。
    	//另外,同一行当中的多条语句之间的分号不能省,否则不能正常执行
    	var m=1;
    	var n=2;
    	//alert(m+n);
	</script>
	
	<script type="text/javascript">
		//4 基本数据类型
		//alert( typeof("aaaa") );//string
	    //alert( typeof('0') );//string
	    //alert( typeof(false) );//boolean
	    //alert( typeof(100) );//number
	    //alert( typeof(1.23) );//number
	    
	    //alert( typeof('0')=="string" );//true
	    //alert (typeof(x)=='number');//true --使用单引号和双引号,效果是一样的
	    //alert( typeof('0')=="String" );//false----※※※大小写敏感※※※
	    //alert( typeof(x) ); //前面片段中定义的变量,在这里仍然是有效的
	    //alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x
	</script>
	
</body>
</html>


2. 运算符

Javascript中的运算符和Java大致相同。

只是运算过程中需要注意几点:

1, var x = 3120/1000*1000; x = 3120;而不是3000

2, var x = 2.4+3.6 ; x = 6;而不是6.0

3, var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;

加号对于字符串是连接符

4, &&  || 是逻辑运算符  & |是位运算符。

5, 也支持三元运算符

6, 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。

var x = 3;

var y = “123”;

var z = false;

typeof(x); //number

typeof(y); //string

typeof(z); //boolean

例:

<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>	
	<script type="text/javascript">
		//5 运算符:算术、赋值、比较、位运算、三元运算
    	//5.1算术运算
    	var a=3710;
    	//alert("a="+a/1000);
    	//alert("a="+a/1000*1000);
    	var b=2.3;
    	var c=5.7;
    	//alert(b+c);//8
    	//alert(11+23);//34
    	//alert("23"+11);//2311---string---加号为字符串连接
    	//alert("23"-11);//12 ---字符串遇到减号,自动会转换成数值型进行运算
    	//alert(true);//true  和数值进行运算时,true为1,flase为0
    	//alert(true+1);//2
    	//alert(false+1);//1
    	//alert(100%3);//1
    	//alert(100%-3);//1
    	//alert(-100%3);//-1  如果有负数,结果和前面那个数同符号。---和Java是一样的
    	
    	//5.2 赋值运算: =  +=  -=  *=  /=  %=
    	var n=3,m;
    	m=n++;//用法同Java
    	//alert("m="+m+",n="+n);//m=3,n=4
    	
    	var n=3,m;//和Java不同的是,变量可以重复声明
	    m = ++n;//用法同Java
	    //alert("m="+m+",n="+n);//m=4,n=4
	    
	    var n;
    	//alert(n);//4---这里没有对该变量重新赋值,所以用的还是前面的那个,不重新开内存
    	
    	var i=3;
    	i +=3;//其它的如:-=  *=  /=  %=  ,同理
    	//alert("i="+i);
    	
    	//5.3 比较运算符
    	var j=10;
    	//alert( j>5 ); //其它如 :<  >=  <= == != 等,同理
	    //alert( j==10 );
	    //alert( j!=10 );
	    
	    //5.4 逻辑运算符  && || !
	    var k=4;
    	//alert(k>3 && k<10); //true
    	//alert( !(k>3) ); //false
    	//alert( !k );//k是“非0”,再非一下则是flase---0
    	
    	//5.5 位运算符  & | ^ >> <<  >>>(无符号右移) ---和Java一样
    	var c = 6;   //6: 110
                 //3: 011
	    //alert( c&3 );//   010 --2
	    //alert(c^100^100); //c---6---一个数与两个相同的数进行异或运算结果仍然等于原数
	    //alert(c>>>1);//3
	    
	    //5.6 三元运算符---?号表达式  ----和java一样
	    //alert(3>0?100:300);
	    
	    var xxyy;
    	//alert(xxyy); //undefined---如果一个变量声明之后没有赋值,那么就是该值
    	alert(xxyy==undefined);//true ----这个undefined代表的是和true,false等一样的,是一个值,因此不要用引号
    	alert(xxyy=="undefined");//false
	</script>
</body>
</html>

3. 语句(Java语句格式相同)

1. 判断结构(if语句)

注:var x = 3;

if(x==4)//可以进行比较运算。

if(x=4)//可以进行赋值运算,而且可以同样进行判断。不报错。

因为在Js0或者null就是false

0或者非null就是true(通常用1表示)。

所以if(x=4)结果是true

可以通过if(4==y)来解决该问题。因为4=y不会进行判断,而是会报错。

2. 选择结构(switch语句)

java不同的是:因为弱类型,也可以对字符串进行选择。

3. 循环结构(while语句,do…while语句,for语句)

注:不同的是,没有了具体数据类型的限制,使用时要注意。

例:
<html>
<head>
	<title>javascript语言学习</title>
</head>
<body>
	<script type="text/javascript">
	/*
		//if语句
		var x=3;
		if (x>0){
			alert("yes");
		} else {
			alert("no");
		}
		
		if (x-4) {//非0 即是 true,除了0以外的数都是非零的数,即为true
			alert("yes2");
		} else {
			alert("no2");
		}
		
		if (x=4) {//一个“=”号是赋值,赋的值是4,该值同时也作为整个表达式的值---非0, 即是 true
			alert("yes3");
		} else {
			alert("no3");//如果把上面的4改为0,则输出: no3
		}
		
		//根据上面的结果,建议如果是判断某变量是否等于某值,写成如下方式(把数字放在前面)
		if (4==x) {//这种方式能够避免漏写“=”号的bug
			alert("yes4");
		} else {
			alert("no4");
		}
		
		var b=(3,4+5);//逗号表达式中的最后一个式子的值作为整个的结果
		alert(b);
		
		var c=5;
		if(c>1){
		 alert("a");
		}else if(c>2){
		 alert("b");
		}else if(c>3){
		 alert("c");
		}else{
		 alert("d");
		}
		//结果:a
	*/
	</script>
	
	<script type="text/javascript">
		//Java语言:switch表达式支持的类型:byte,int等整数,char,jdk1.7之后增加了String类型
     	//JavaScript语言:支持所有类型,即所有类型的数据都能用于选择
     	var x="x";
     	switch(x){
     		default:alert("c");
     		case "aa":alert("a");break;
     		case "abc":alert("b");
     	}//常规的写法就不说了,说说这种的,这种的显示结果是c和a,因为在default处进入之后并没有break所以会进入到case "aa"里面去
	</script>
</body>
</html>


九九乘法表例子:

<html>
<head>
	<title>javascript语言学习</title>
	<link rel="stylesheet" href=table.css>
</head>
<body>
	
	<script type="text/javascript">
		a:for (var x=0;x<3;x++){
			for (var y=0;y<4;y++){
				document.write("x="+x+" ");
				break a;
			}
			document.write("<br/>");
		}
	</script>
	<hr/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
		for (var x=1;x<=9;x++){
			for (var y=1;y<=x;y++){
				document.write(y+"*"+x+"="+x*y+" ");
			}
			document.write("<br/>");
		}
	</script>
	<br/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
		document.write("<table>");
		for (var x=1;x<=9;x++){
			document.write("<tr>");
			for (var y=1;y<=x;y++){
				document.write("<td>"+y+"*"+x+"="+x*y+"</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
	</script>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值