javascript javascript概念 簡稱js,它可以針對網頁上面的元素,讓其動態的產生變化。 javascript的使用範圍 javascript是由瀏覽器來執行的。包含在網頁中被瀏覽器連同html、css一同解析並執行,它的運行必須依附於網頁與瀏覽器,而不能夠直接被執行。 javasc ...
javascript
javascript概念
簡稱js,它可以針對網頁上面的元素,讓其動態的產生變化。
javascript的使用範圍
javascript是由瀏覽器來執行的。包含在網頁中被瀏覽器連同html、css一同解析並執行,它的運行必須依附於網頁與瀏覽器,而不能夠直接被執行。
javascript是由對象和事件驅動的
javascript的執行方式,是由html元素對象的事件觸發的,簡單的說,就是當某一html元素髮生了某事件時,對應的js代碼就會被執行。
在網頁中加入並執行javascript的三種方式
直接寫在html標簽之中
比如:
<input type="button" value="hello" onclick="alert('hello javascript')" />
直接在html標簽中onclick、onchange等事件之中寫入js代碼
寫在html網頁內的<script>標簽中
通常我們都是在網頁的<head>或<body>範圍內加入<script type=”text/javascript”></script>標簽,在<script>的開始與結束標簽中間寫入javascript代碼。
示例:
<script type="text/javascript"> alert('hello javascript'); </script>
將javascript代碼放在獨立的js腳本文件之中
javascript的腳本文件,是擴展名為js的文本文件。然後在網頁中添加<script></script>標簽,在標簽中添加src屬性,這個屬性的值就是js腳本文件的路徑。
比如:
<script type="text/javascript" src="aaa.js"> </script>
註意:在引用了外部js腳本文件的<script>之中,不要加入js代碼。
編程語言的基本概念
順序流程
就是讓程式按照從上到下的順序依次執行。
在javascript中,每一條語句的結尾處,都必須寫一個分號 ; 以告訴電腦該語句已經完結。
變數
所謂變數,就是一個存放數據的容器,相當於數學方程式中的未知數x、y、z
一個變數之中只能放一個數據
聲明變數語法:
在使用一個變數之前,我們必須首先聲明這個變數,也就是告訴電腦我們要創建一個變數。
var 變數名 [ = 變數值 ]
我們可以在聲明變數的同時賦值,也可以在聲明之後再來賦值。
也可以同時聲明多個變數
var a =1,b; b=5; alert(a+b);
註意:javascript中對字母的大小寫是有嚴格的區分的,即使字母相同,但大小寫不同也會被認為是兩個變數。
賦值
賦值號也就是=等號,通常是將=右邊的值賦值給=左邊的變數。
var a =1; a=a+2; //=代表賦值而不是相等 alert(a);
javascript中的註釋
註釋單行代碼: //
註釋多行代碼: /* 被註釋的內容 */
小練習:
1、在網頁中調用一個外部的腳本文件,在腳本文件中實現,工資的計算功能,需要定義的變數如下:jbgz=4500(基本工資)、cd=2(遲到次數)、kg=3(曠工次數)、gzr=22(本月工作日),求本月實際工資。遲到一次扣30,曠工一次扣3天工資。
提示:
首先算出每日的工資。
javascript中的數據類型
什麼數據
在電腦編程的角度來看,數據的概念並不僅限於數字,它包含了數值、文本、日期、是與否、圖片。就是能夠被存儲並處理的信息。
var a ="1" ,b="2"; alert(a+b);
電腦對不同類型的數據會有不同的處理方式。
數值類型Number
在javascript中數值類型包含了整數、小數、負數
var a=1
不需要明確的說明一個變數的類型,系統會自動的根據它的值來判斷其是什麼類型。
字元串類型String
var a ="我是一個字元串";
註意:字元串類型的值必須要放在一對雙/單引用號之中。
當數值與字元類型進行運算的時候,數值會自動被轉換為字元類型。
比如:
var name ="張三"; var a = 2600; alert(name+"本月工資是"+a+"元");
邏輯類型boolean
也叫布爾類型,它只有兩種數值,true或false,分別代表真和假,成立或者不成立,甚至代表1和0
var a = true; var b = false; alert(b);
用於表示一個條件是否成立。
typeof( )類型判斷方法
用於判斷一個變數或表達式之中存放的數據的類型。
示例:
var a = true; var b = 4324; var c = "hello"; alert(typeof(c)); //顯示string
undefined
代表變數未定義,數值不明確。
比如:
alert(typeof(d)); //d從來沒有定義過
NaN
是”Not a Number”,意思是指這不是一個數字。
比如:
var a = "ccc"; var b = 4324; alert(a*b);
Null
代表空值,也就是一個變數的值已經被清空了。
a = null ; //代表清空一個變數。
轉義字元
由於一此字元在javascript中已經有了特殊的用途,因此當我們需要使用這些字元的時候,就要對其進行轉義,js才能將其作為一個普通的文本來處理了。
alert("我叫\"雷鋒\"");
\” 雙引號
\’ 單引號
\n 換行符
\r 回車
\\ 斜杠
單詞總結
click 單擊
alert 提示,警報,提示框
script 腳本,劇本
Number 數字
String 字元串
true 真,正確
false 假,錯誤
Boolean 布爾類型,邏輯類型
define 定義
javascript中的數據類型轉換
將其他類型的數據轉換為字元型
語法: String(數據);
示例:
var a=10,b=88553344; alert("0"+String(a)+"-"+String(b));
將其他類型的數據轉換為數值型
語法:Number(數據);
示例1:
var a=Number("3.1415926"); alert(10+a);
示例2:
var a=Number(false); alert(a);
布爾類型在電腦中存儲的時候,其真正的值就是一個二進位數,true=1,false=0
其他一些將字元型轉換為數值型的方法
parseInt() 將字元串轉換為整數
parseFloat() 將字元串轉換為包含小數的數值
這兩個方法遇到字元串中的非數值字元時,會自動停止轉換,返回已經轉換完的部分。但是上一節中的Number()方法遇到非數值字元時會自動返回NaN
示例:
var a=parseFloat("3.94ccc111");
將其他數據類型轉換為布爾類型
語法:Boolean(數據)
值為true的情況
非零的數字時(無論正負)、非空的字元串
值為false的情況
零、空字元串、未定義變數undefined、空值null、NaN
Javascript中的對話框
alert提示框
alert是最常用最簡單的對話框,通常用於顯示提示信息,單擊上面的按鈕就可以關閉對話框。
confirm確認框
語法:
confirm(“提示信息”);
彈出確認視窗,這個視窗有”確認”和”取消”兩個按鈕,點擊”確認”返回true,點擊”取消”返回false
示例:
var a= confirm("你確認登陸麽?") //變數a用於接收confirm的結果。 alert(a);
prompt輸入框
接收用戶輸入的一段字元串。
語法:
prompt(“提示信息”,文本框的初值);
示例:
var a = prompt("請輸入你的姓名:","預設用戶"); alert("歡迎光臨,"+a);
open方法
彈出一個新的瀏覽器視窗,在其中打開一個網頁。
window.open("aa.html","aa",'height=300,width=500,
status=yes,toolbar=no');
這條語句打開了一個新的視窗,頁面地址為aa.html,視窗ID是aa,高是300,寬500,顯示狀態欄,不顯示工具條、菜單。
小練習:
首先彈出確認框“您是否是男士”,點確定顯示” 您是男士:true”或您是男士:false”。
運算符與表達式
算術運算符
加 + 減 – 乘 * 除 / 求餘%
求模
取餘數:
比如:13%5=3 餘數為3
邏輯運算符
真知表
兩個布爾值,進行邏輯運算的時候。所謂邏輯運算就是將兩個邏輯條件聯合起來,一起進行判斷。
布爾值1 |
布爾值2 |
邏輯與 |
邏輯或 |
true |
true |
true |
true |
false |
false |
false |
false |
true |
false |
false |
true |
|
|
兩者為true則為true 兩者為false則為false 兩者為不同則為false
|
兩者之間只要有一個成立則整句話成立。 兩者都不成立,則整句話都為false |
邏輯與 &&
對 && 左右兩邊的兩個條件進行判斷,當兩個條件都為true時,運算結果為true,當其中至少有一個為false時,運算結果為false。
示例:
var a = false; var b = false; alert(a&&b);
邏輯或||
對 || 左右兩邊的兩個條件進行判斷,當兩個條件其中至少一個條件為true時,運算結果為true,當兩個都為false時,運算結果為false。
示例:
var a = false; var b = false; alert(a||b);
邏輯非 !
顛倒真假, ! false=true並且 !true = false
alert( ! false);
三元運算符
語法:
邏輯表達式 ? 表達式1 : 表達式2 ;
作用:
首先判斷 ? 之前的邏輯表達式的值,如果是true則返回表達式1的值,如果是false則返回表達式2的值。
示例:
var a = confirm("請問您是否是男士"); var s = a?"你好先生":"你好女士" alert(s);
小練習
1、 彈出一個確認框並提示,請問您是否是註冊用戶。如果點確定就顯示“你好歡迎光臨”,如果點消除則顯示“不好意思,您無權登錄”。
2、 有一個age年齡變數值是11,彈出確認框詢問“今天是否是你生日”,如果點確認則age加1為12,如果點取消,則age還是11。
比較運算符
比較運算符的運算結果為布爾值
<小於 >大於 >=大於等於 <=小於等於
==相等 !=不等於
註意:(數值18與字元”18”是相等,javascript字元類型的數值與數值類型的值,只要數字相等,那麼用==來判斷的話就是相等的。)
如果要嚴格區分類別的話,可以使用:
=== 嚴格相等,就是值與類型都必須相同。
!== 嚴格不相等,就是值或類型必須不相同。
複合運算符
賦值
很多時候我們需要對一個變數進行加減乘除,然後將運算結果再賦值回這個變數本身,在這種情況下,我們可以通過複合運算符來簡化這個過程。
a=a+1 可簡化為 a+=1
a=a-1 可簡化為 a-=1
a=a*1 可簡化為 a*=1
a=a/1 可簡化為 a/=1
累加
a++ 針對數值類型進行累加操作,每次加1,相當於a=a+1 ;
a-- 針對數值類型進行遞減操作,每次減1,相當於a=a-1 ;
a++ 先返回值再相加
++a 先相加再返回值
示例:
alert((--age)*10)
運算符的優先順序
() |
括弧 |
++、-- |
遞增遞減 |
! |
邏輯非 |
* / |
乘除 |
+ - |
加減 |
% |
求模,取餘數 |
< 、<= 、> 、>= |
大於 小於 |
? : |
三元運算符 |
= += -= *= /= |
複合賦值 |
比如:
var x = 5+4*2/4 var y = 4>=9%5&&(3==4*2/4)?x+=3:x++;
表達式
由多個運算符與數據組成的可以運算並能夠得到一個單一結果的算式。
通常分為:
算術(數值)表達式,最終的結果是數值。
字元串表達式,最終的結果是字元串。
關係(比較)表達式,通常是由大於、等於這些比較運算符組成的返回布爾值的表達式。
邏輯表達式,通常是由&&或||等等邏輯運算符組成的返回布爾值的表達式。
小練習
1、 計算一個長方形的面積,長寬值是由用戶從鍵盤輸入的,輸入時要有提示信息,第一次輸入長度,第二次輸入寬度,最終顯示一句話:“您計算的長為XX米寬為XX米的長方形的面積為XXX平方米”。
2、 依然是工資,提示用戶輸入:基本工資,本月工作天數,本月遲到次數(一次扣30元),曠工次數(一天扣三天工資)。最後,顯示本月實際工資。附加:如果曠工超過三次,就不再顯示工資數,而是顯示“您本月考勤異常。”