javascript
JavaScript入门介绍 1 2021/02/27
一、JavaScript簡介一
1.1 javascript 簡介
- JavaScript是Web頁面中的一種腳本編程語言,可用于Web系統的客戶端和服務器端編程
- 前身叫做LiveScript,是Netscape公司開發的腳本語言。在Sun公司推出Java語言后, Netscape公司和Sun公司于1995年一起重新設計了LiveScript,并將其更名為JavaScript。
1.2 JavaScript 嵌入
在 Html 中嵌入 Html
-
在HTML中通過**<script>… </ script>**引入JavaScript代碼
-
當瀏覽器讀取到**<script>**標記時,解釋執行其中的腳本。
script的兩個屬性
- type=“text/javascript”
- src=“url”
1.3 JavaScript 編程基礎 & 流程控制語句
**常量:**數值型(整數、浮點數)、字符串和布爾型
變量
- 如果是布爾值,true和false分別被轉換為1和0
- 如果是數字值,返回本身。
- 如果是null,返回0
- 如果是undefined,返回NaN
- 如果是字符串,遵循以下規則:
a.如果字符串中只包含數字,則將其轉換為十進制(忽略前導0)
b.如果字符串中包含有效的浮點格式,將其轉換為浮點數值(忽略前導0)
c.如果是空字符串,將其轉換為0
d.如果字符串中包含非以上格式,則將其轉換為NaN - 如果是對象,則調用對象的valueOf()方法,然后依據前面的規則轉換返回的值。如果轉換的結果是NaN,則調用對象的toString()方法,再次依照前面的規則轉換返回的字符串值。
- 它的規則與parseInt基本相同,但也有點區別:字符串中第一個小數點符號是有效的,
- 另外parseFloat會忽略所有前導0,如果字符串包含一個可解析為整數的數,則返回整數值而不是浮點數值。
- 除undefined和null之外的所有類型的值都具有toString()方法,其作用是返回對象的字符串表示。
- 忽略字符串前面的空格,直至找到第一個非空字符
- 如果第一個字符不是數字符號或者負號,返回NaN
- 如果第一個字符是數字,則繼續解析直至字符串解析完畢或者遇到一個非數字符號為止
- 如果上步解析的結果以0開頭,則將其當作八進制來解析;如果以x開頭,則將其當作十六進制來解析
- 如果指定radix參數,則以radix為基數進行解析
運算符
-
算術運算符:+、-、*、/、%(取余數)、++、–
-
關系運算符:<、<=、>、>=、= =、!=
-
邏輯運算符:&&、||、!
-
字符串運算符:+(連接) 這個在java中也是有的
-
賦值運算符:=
-
條件運算符:condition?true_result:false_result
流程控制語句
- if — else —
- switch
- for
- while
- do while
1.4 JavaScript 對話框
這里我們介紹三個最常用的對話框
alert:警告對話框
confirm:確認對話框,返回一個bool值
prompt:輸入對話框
示例:
? 詢問用戶是否學習過Java語言,如果學習過,輸入考試分數,對分數進行評價;如果沒有學習過,提示需要先學習Java才能繼續。
代碼:
<!--Java--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaTest</title> </head> <script type="text/javascript">var learned = confirm("have you ever learned java?");if (learned) {var score = prompt("what's you score?");score = Number(score);var res = "";switch (score / 10) {case 10:res = "all right!"; break;case 9:res = "A"; break;case 8:res = "B"; break;case 7:res = "C"; break;case 6:res = "D"; break;default:res = "E";}alert("The res:" + res + "!");} else {alert("sorry, without the data we can't conclude!");} </script> <body></body> </html>1.5 JavaScript 對象
java的對象分為內置對象,自定義對象,和瀏覽器對象,下面我們介紹一下javaScript的內置對象
- 在JavaScript中,可通過new運算符來創建對象,即**變量名= new 對象名() **
- 將新創建的對象賦予一個變量后,就可以通過這個變量訪問對象的屬性和方法
下面我們介紹幾個常見的對象
-
Date對象:該對象主要提供獲取和設置日期和時間的方法。例如,getFullYear() 、getMonth() 、getDate () 、getDay ()
-
String對象:該對象提供了對字符串進行處理的屬性和方法。例如:length()、toLowerCase()、toUpperCase()、substr()
-
Array對象:在JavaScript中,使用內置對象Array創建數組對象。格式為:var arrayname=new Array(arraysize)
注意這個對象的聲明依舊是 使用 var,只不過new 后面跟了類型
下面我們給出一個JavaScript內置對象的示例
<!--Java--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaTest</title> </head> <script type="text/javascript">var date = new Date();var curDay = date.getDay(); <!--獲取當前星期-->alert("Day" + date.getDay()); <!--獲取當前星期-->alert("Year" + date.getFullYear()); <!--獲取當前年份-->alert("Month" + date.getMonth());alert("Date" + date.getDate());alert("Hours" + date.getHours()); <!--獲取當前時間--></script> <body></body> </html>下面我們給出具體官方的自定義對象方法的介紹:
-
Date對象
-
其他對象就是Date對象的旁邊,這里就不給了。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TviLtMZY-1614774645823)(E:\markdownTypora\typora_intall\文檔\image-20210227184515180.png)]
1.6 事件驅動
事件驅動的定義
用戶操作事件(操作鼠標或按鍵的動作)或系統操作事件(如載入頁面等)引起一連串程序動作的執行方式,稱為事件驅動。
事件處理的定義
為了響應某個事件而進行的處理過程,稱為事件處理。
事件處理程序的定義
對事件進行處理的過程或函數,稱為事件處理程序。
JavaScript使用事件的兩種方法----HTML標記或使用JavaScript語句
- 許多HTML標記允許加上以事件名為名的屬性,
- 如在按鈕標記中加上onclick事件屬性,并為該屬性給出值。
- 例如,設計一個表單,放入兩個按鈕,單擊它們時將顯示內容。
- 使用事件的另一種方法是使用JavaScript語句:對象.事件=函數名。
下面我們給出一個示例:
? 要求用戶輸入圓 的半徑,計算并輸出圓的面積
主要是使用了第一種的方法。
<!--Java--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaTest</title> </head> <script type="text/javascript">function calArea() {var radius = prompt("請輸入圓的半徑,進行計算");radius = Number(radius);if (radius < 0) {alert("數據范圍錯誤");} else {alert("S=" + (3.14 * radius * radius));}} </script> <body> <input type="button" name="btn" value="點擊開始進行圓的面積" onclick="calArea()" /> </body> </html>完成數據的累加和計算
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>累加和計算</title> </head> <script>function sum() {var n = prompt("請輸入一個正整數n,計算1~n累加和");if (n < 1) { <!--數據輸入有誤-->var myContinue = confirm("數據輸入有誤,是否繼續輸入正確數據");if (myContinue) {sum(); <!--繼續遞歸調用-->}} else {<!--必須要強制類型轉換-->n = Number(n);var res = (n + 1) * n / 2;alert("1+2+...+" + n + "結果=" + res);}} </script> <body> <input type="button" name="btn1" value="開始計算累加和" onclick="sum()" /> </body> </html>二、JavaScript簡介二
總結
以上是生活随笔為你收集整理的JavaScript入门介绍 1 2021/02/27的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 405 宝塔钩子_宝塔面板webhook
- 下一篇: js动态添加控件服务器响应,JS实现动态