JavaScript網頁程式設計之------基本運用語法(變數、運算子、語句)
- 黄舟原創
- 2016-12-30 16:51:071182瀏覽
JavaScript 概述
JavaScript是基於物件和事件驅動的腳本語言，主要應用在客戶端。
特點：
1. 互動性（它可以做的就是資訊的動態互動）
2. 安全性（不允許直接存取本地硬碟）
3. 跨平台性（只要是可以解釋Js的瀏覽器都可以執行，和平台無關）
JavaScript與Java不同
1. JS是Netscape公司的產品，前身是LiveScript;Java是Sun公司的產品，現在是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>來區分<br/><br/>a、只要不在函數內部聲明，那麼一個變數即使在導入的.js檔案中聲明，在頁面腳本中同樣是有效的。 <br/><br/>b、Java當中的變數的作用域是以大括號來區分，而JS則不是。 <br/><br/>局部變數----函數內部宣告的和形參<br/><br/>函數內部的形參也是局部的，裡面改變的值只能在內部有效，函數回傳之後就無效了<br/><br/>例：</script>
<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
type; //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)//可以進行賦值運算，而且可以同樣進行判斷。不報錯。
因為在Js中0或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> 以上就是JavaScript網頁程式設計------基本運用文法(變數、運算子、語句)的內容，更多相關內容請關注PHP中文網（www.php.cn）！