search

Home >Web Front-end >JS Tutorial >JavaScript web programming------Basic syntax (variables, operators, statements)

JavaScript web programming------Basic syntax (variables, operators, statements)

黄舟
黄舟Original
2016-12-30 16:51:071218browse

JavaScript Overview

JavaScript is an object- and event-driven scripting language, mainly used on the client side.

Features:

1. Interactivity (all it can do is dynamic interaction of information)

2. Security (direct access to the local hard disk is not allowed)

3. Cross-platform (any browser that can interpret JS can execute it, regardless of the platform)

JavaScript is different from Java

1. JS is a product of Netscape. Formerly LiveScript; Java is a product of Sun and now a product of Oracle.

2. JS is object-based, and Java is object-oriented.

3. JS only needs to be interpreted before it can be executed. Java needs to be compiled into a bytecode file first and then executed.

4. JS is weakly typed, and Java is strongly typed.

JavaScript Grammar

Each language has its own grammar rules. JS grammar is very similar to Java, so it is easier to learn. JS also has variables, statements, functions, arrays and other common language elements.

1. Variables

are defined through the keyword var. Weak types do not require specifying a specific data type.

Example: var x = 3; (undefined).

Note: Javascript statements do not need to end with a semicolon at the end, which is a non-strict language feature.

But in order to comply with programming standards, the terminator needs to be defined like java.

And in some cases, a semicolon must be written, such as: var x = 3; var y =5. If two statements are written on the same line, they need to be separated by a semicolon.

1) Keywords: almost the same as Java

2) Identifiers, delimiters: the same as Java

3) Comments: These two types of Java are used ： // and /* */

4) Data type: number type, string type, boolean type, undefined (when the variable is declared but not assigned a value)

5) Variable: var (weak Type, similar to Object in Java)

6) In js, single quotes and double quotes are the same, and they encapsulate strings (but there are two quotes at the same time to encapsulate, and the internal ones must be used Single quotes)

7) Global variables and local variables

Global variables----As long as they are not declared inside the function, they are. And it will not be distinguished by curly brackets, nor will it be distinguished by 3f1c4e4b6b16bbbd69b2ee476dc4f83a

a. As long as it is not declared inside a function, even if a variable is declared in the imported . The same is valid.

b. The scope of variables in Java is distinguished by braces, but not in JS.

Local variables----the formal parameters declared inside the function

The formal parameters inside the function are also local. The values ​​changed in them are only valid internally and will be invalid after the function returns.

Example: 

<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=&#39;aa&#39;;
	    //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(&#39;0&#39;) );//string
	    //alert( typeof(false) );//boolean
	    //alert( typeof(100) );//number
	    //alert( typeof(1.23) );//number
	    
	    //alert( typeof(&#39;0&#39;)=="string" );//true
	    //alert (typeof(x)==&#39;number&#39;);//true --使用单引号和双引号，效果是一样的
	    //alert( typeof(&#39;0&#39;)=="String" );//false----※※※大小写敏感※※※
	    //alert( typeof(x) ); //前面片段中定义的变量，在这里仍然是有效的
	    //alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x
	</script>
	
</body>
</html>

2. Operators

The operators in Javascript are roughly the same as those in Java.

Just a few points to note during the operation:

1, var x = 3120/1000*1000; x = 3120; not 3000.

2, var x = 2.4+3.6; x = 6; instead of 6.0

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

5, also supports ternary operator

6, special operator typeof: returns a string of the data type of the operation expression.

var x = 3;

var y = “123”;

var z = false;

typeof(x); //number

typeof(y); //string

typeof(z); //boolean

Example: 

<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. Statement (with Java statement format Same)

1. Judgment structure (if statement)

Note: var x = 3;

if(x==4)//Comparison operations can be performed.

if(x=4)//Assignment operations can be performed, and judgments can be made in the same way. No error is reported.

Because in JS, 0 or null is false,

non-0 or non-null is true (usually represented by 1).

So the result of if(x=4) is true;

This problem can be solved by if(4==y). Because 4=y will not make a judgment, but will report an error.

2. Selection structure (switch statement)

The difference from Java is: because of the weak type, strings can also be selected.

3. Loop structure (while statement, do...while statement, for statement).

Note: The difference is that there are no restrictions on specific data types, so please pay attention when using it.

Example: 

<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>

Nine-Nine Multiplication Table Example: 
<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>

The above is the basic syntax of JavaScript web programming (variables, operators, statements ), please pay attention to the PHP Chinese website (www.php.cn) for more related content!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript web programming------Array-related knowledgeNext article：JavaScript web programming------Array-related knowledge

Related articles

See more