第二章：變量運算符
一.認識變量
1.什麼是變量
定義：變量通俗地講就是可變的量。
2.變量的操作及作用
對變量的操作包括兩大類：
1) 定義變量：使用關鍵字 var 來進行定義。
2) 讀和寫變量：讀的時候直接寫變量名即可，寫的時候需要把變量名放到賦值符號=的左側（右側內容將會被寫到左側的變量當中）。
寫個例子
<script type="text/javascript">
//定義變量
var name="張三";
//提取變量並在頁面輸出
document.write(name);
</script>上述代碼可以看出如何定義變量並且在頁面輸出變量。
初學編程時，我們要建立一個「量化」的意識，那麼什麼是量化呢？我們來靠一個例子來展示一下。
麗麗去超市購物，買了5支水筆，每支3元；買了5個練習本，每個2元；她給售貨員50元，並且有會員卡，會員卡可以打8折，請問售貨員應該找給麗麗多少錢？
<script type="text/javascript">
//定義水筆價格
var shuibi = 5*3;
//定義練習本價格
var lianxiben = 5*2;
//定義總價
var zongjia = shuibi+lianxiben;
//定義找回金額並運算
var zhaohui = 50-zongjia*0.9;
//頁面輸出，謹記，輸出變量時不能加引號
document.write(zhaohui);
</script>體會上邊的代碼，它把一件事情，拆解得非常細，一個步驟一個步驟，最後完成了任 務。現實世界中的業務往往非常複雜，有的甚至需要幾十甚至上百的步驟，到時候我們的大腦根本承受不了，學會量化，按照步驟來解決問題，才是「王道」。
3.變量名稱
在定義變量的名稱時有一些規則需要注意：
1) 變量名要做到見名知意，可以採用英文單詞或拼音全稱，取到下一個詞時首字母要大寫，例如：var chengJi=10;。
2) 變量名稱的首字符必須是 英文字母、下劃線或美元符號中的一種,例如：var $fenShu=100,_renShu=5;。
3) 變量名中不能有空格。
4) 變量名要避開 JavaScript 中的保留字（if、else、function、switch、static、for 等）。
一定記牢，變量命名錯誤會導致全盤皆輸。
4.變量定義和使用常見錯誤
1）n變量使用前未經聲明
var m= n + 2;2）m變量沒有賦值
var m;
document.write(m);3）重複聲明變量
var n = 3;
var n = 4;4)不符合命名規範
var 123 = 123;變量問題口訣：1.先聲明，2.後賦值，3.再使用（輸出，參與運算）
二.變量的類型
1.JS的變量類型
在 js 中，通過 var 前綴來表示要定義一個變量，當我們給其賦值時變量的類型才最終確定下來，常用 的類型如下：
1) undefined：當定義了變量而未賦值時，其類型是 undefined.
var x; alert(x);//將會彈出 undefined
2) null：空類型，類似於 undefined。
alert(null==undefined);
3) number：數值類型，含整數和浮點數（小數）。
var x=10;(整數)
var y=8.8;（浮點數）
4) String：字符串。（字符串必須用雙引號）
var x=”Jim Green”;
var y=”Lucy”;
5) boolean：布爾。
var x=true;(正確)
var y=false;（錯誤）
6) Object：對象類型，可以 new。
var x = new Object(); x.Name=”Jim Green”;
x.Sex=”男”;
//……
alert(x.Name+”t”+x.Sex);
7) Date：日期。
var x = new Date();//創建一個日期對象(當前計算機上的日期和時間為基準)
document.write(x.toLocaleDateString());//write 方法用於向當前頁面中寫入內容
因為JS中變量類型是弱類型，我們需要判斷變量對應的數據類型，這時候我們可以用typeof來獲取變量中的數據類型
<script type="text/javascript">
var n=12;
//如果輸出的內容同時有變量和字符串的時候要用加號連接
document.write(typeof(n)+"</br>");
var x=true;
document.write(typeof(x)+"</br>");
var s="張三";
document.write(typeof(s));
</script>2.String轉number
String(字符串)，是編程語言中，最常見的數據類型，每一個 html 元素的屬性值都是 String 類型的 （例如：input 中的 value,id,name 等的取值）。某些計算只有 number 才可以，因而將 String 類型的值， 轉變成 number 類型的值，就是一個非常普遍和重要的操作。JS提供了兩種轉化方法
1） parseInt：將字符串轉為整(number)數。
2）parseFloat：將字符串轉為浮點數(number)。
<script type="text/javascript">
var n="123h5";
var s=parseInt(n);
document.write(s);
//我們可以看出,結果為123
</script><script type="text/javascript">
var n="hallo world";
var s=parseFloat(n);
document.write(s);
//我們可以看出，輸出結果是NaN，意思是not a number(不是一個數)
</script>三.變量實戰
1.點擊按鈕時輸出
我們之前學習的都是直接向大家展示出來的但是網頁中卻不是這麼簡單，事件需要一個能觸發的裝置，也叫做功能塊。看例題。
當點擊按鈕時，輸出發射天宮2號的信息。
我們可以分析一下，這個事件解決需要一個按鈕，當按鈕被點擊的時候，頁面輸出你下達的指令，分析知道他怎麼實現了之後，那麼火速實操。
<body>
<input type="button" value="點火" onclick="start()"/>
<script type="text/javascript">
//點火功能塊
function start(){
document.write("點火成功，即將發射");
}
</script>
</body>
知識點都在圖片中詳細的標註了出來，建議一步一步的寫，注意，input要寫在<script>的上面。
2.alert
大家有沒有發現，在上邊的兩個任務中，當我們點擊按鈕時，的確輸出了內容，但是我們頁面的原始內容（按鈕）卻不見了，必須點擊瀏覽器的後退按鈕，才可以回到原始內容，有沒有更好的處理方式呢？ 當然有，那就是咱們上一章已經接觸過的 alert（消息框）。
那麼我們來就上一題改一下。
<body>
<input type="button" value="點火" onclick="start()"/>
<script type="text/javascript">
//點火功能塊
function start(){
alert("點火成功，即將發射");
}
</script>
</body>我們可以看出只要把上一題中的document.write改為alert就可以實現輸出內容時按鈕卻不會消失了。
3.交互
我們要先知道幾個知識點：
1）文本框：上題也有說input中的type值決定了input的類型，例如，上題中當type等於button時，input是按鈕，如果type的值是text時，input是文本框
2）document.getElementById(“xxxx”).value;這行代碼的意思是獲取id為xxxx文本框中的value屬性
掌握之後，火速實操。
例題：從頁面上的姓名文本框中，取出操作員輸入的名字，在名字後後邊追加三個字」你很棒」， 並在界面顯示出來。
<body>
<!-- 文本框 -->
<input type="text" id="textName"/>
<!-- 按鈕 -->
<input type="button" value="測試" onclick="btn()"/>
<script type="text/javascript">
//功能塊
function btn(){
// 設置變量,並且獲取Id為textName的文本框中的value屬性的值
var name = document.getElementById("textName").value;
alert(name+"你真棒");
}
</script>
</body>在 JavaScript 代碼中，單個的 = 不是等號，而是賦值號，它表示把 = 右側的數據放到 左側的變量(容器)當中，它表示把 = 右側的數據放到左側的變量(容器)當中，它表示把 = 右側的數據放到左側的變量 (容器)當中。
JS的基本過程
輸入 處理 輸出
四.常用運算符
1.運算符的分類
運算符主要描述兩件事情：
1) 有幾個數字參與運算（大多數時是兩個）。
2) 進行的是什麼樣的運算。
（1）JS算術運算符
顧名思義，進行數學運算，給定 y=5，下面的表格解釋了這些算術運算符的應用方式。
（2）JS賦值運算符
賦值運算符用於給 JavaScript 變量賦值。給定 x=10 和 y=5，下面的表格解釋了賦值運算符。
（3）比較運算符
比較運算符在邏輯語句中使用，以測定變量或值是否相等。給定 x=5，下面的表格解釋了比較運算符：
（4）邏輯運算符
邏輯運算符用於測定變量或值之間的邏輯關係。給定 x=6 以及 y=3，下表解釋了邏輯運算符：
2.數學運算
了解了運算符之後，我們可以着手於用代碼解決一點問題了，
例題1.定義一個天數，計算此天數對應的周數和剩餘的天數。
我們拿到一個題目時，首先要做的事情是，把這個業務中需要量化的數據先找出來，通過閱讀我 們發現共有 3 個變量 天數 ts、周數 zs 和剩餘天數 syts。因為要進行計算，所以 ts、zs、syts 的類型都必須是數值型，再進一步應該為整數。
<script type="text/javascript">
//定義天數，可以改成不同數字
var ts = 30;
//定義周數，但是結果存在小數
var zs = ts/7;
//轉化為整數
zs = parseInt(zs);
//定義剩餘天數
var syts = ts%7;
//輸出，注意一點，字符串和變量之間要加加號
alert("當前天數："+ts+",包含周數："+zs+",剩餘天數："+syts);
</script>
答案就是這樣的，也可以用document.write方法輸出
例題2.小明去美國旅遊，但賓館中的溫度是以華氏度的方式顯示的，現在編寫一個程序，輸入一個 華氏度，顯示一個攝氏度出來。
分析：量化的數據是華氏度，類型為小數，根據公式進行處理，最後輸出即可
公式是：攝氏度=5.0/9*（華氏度-32）
<script type="text/javascript">
//定義一個溫度，可以自己定義別的溫度，
//將溫度轉化出來就行。設置的變量名稱也可以
//取自己方便記得，但是要注意變量命名要規範
var hsd = 88.98;
//講字符串轉化為小數
var hsd = parseFloat(hsd);
//定義攝氏度通過公式轉化
var ssd = 5.0/9*(hsd-32);
//輸出
alert("華氏度是："+hsd+"對應的攝氏度是："+ssd);
</script>
結果就是這樣的
3.boolean（布爾）類型應用
布爾值上面也講了，布爾值分為兩種，true（真），false(假)，涉及到布爾的題大部分就是比大小，判斷是否正確，下面來看例題。
例題1.學員李四這次考了 80 分，請輸入學員張三的考試成績，並判定張三的成績是否比李四的成績 高。
分析：首先量化張三的考試分數 zscj 和 lscj 兩個變量，均為數值型，而 jg 應為 boolean 型，請看 下邊的實現代碼和運行效果如下：
<script type="text/javascript">
//定義張三的成績
var zscj = 80;
//定義李四成績
var lscj = 90;
//定義jg，並判斷是否正確，布爾類型
var jg = zscj > lscj;
//輸出
alert("張三的成績是否比李四高？"+jg);
</script>
結果就是這樣
例題2.某航空公司徵召飛行員的條件是視力超過 1.6，身高在 160 厘米和 170 厘米之間，請編寫代 碼模擬應徵者是否符合飛行員的過程。
<script type="text/javascript">
//設置應徵者身高變量
var sg = 165;
//設置應徵者視力變量
var sl = 4.3;
//設置身高條件 &&是並列關係
var sgcj = 160<sg && sg<170;
//設置視力條件
var slcj = sl>1.6;
//判斷並輸出
alert("身高在160和170厘米之間？"+sgcj+"，視力超過1.6？"+slcj);
</script>
結果是這樣的
例題3.輸入一個年份判定，此年份是否是閏年。閏年的判定的規則是 能被 4 整數，但不能被 100 整除，或者能被 400整除。
提示：能被4整除就是: 年份%4==0
<script type="text/javascript">
//設置年份變量
var nf=2077;
//設置另一個變量去設置條件
// &&是並且 ||是或者
var nfo = nf%4==0 && nf%100!=0 || nf%400==0
//輸出
alert(nf+"是否為閏年？"+nfo);
</script>
結果就是這樣
常見的比較（關係）運算符有：>,>=,<,<=,!=（不等於）和==（等於）。這些運算符運算的結果都是 boolean 類型值。在 JavaScript 中，=表示賦值而==表示相等判定。
4.單數據輸出
JS中一共有三種彈出框，分別為：
警告消息框alert：彈出個提示框
警告消息框alert
確認消息框confirm:彈出個確認框（確認，取消）
確認消息框confirm
提示消息框prompt:彈出個輸入框（讓你輸入東西）
提示消息框prompt
例如創建一個提示消息框，輸入數字，並輸出。
<script type="text/javascript">
//設置變量到提示消息框
var num = prompt("請輸入數字");
//輸出這個數字
alert(num);
</script>
輸入
輸出
5.設置元素標籤的內容
直接看題
在文本框中，輸入書名，點擊加入按鈕，將輸入的書名，加入到 「古典四大名著」 之中。
<body>
圖書名稱：
<!-- 文本框 -->
<input type="text" id="bookName"/>
<!-- 按鈕 -->
<input type="button" value="添加" onclick="add()"/><br/>
古典四大名著：
<!-- 盒子，這個是網頁設計的知識點，不多講 -->
<div id="box">
<!-- 此處就是innerHTML的值 -->
</div>
<script type="text/javascript">
//功能塊
function add(){
//獲取id為bookName的文本框的值
var name = document.getElementById("bookName").value;
//獲取id為box的div
var div = document.getElementById("box");
//設置div內部的html值
div.innerHTML+=name+"<br/>";
}
</script>
</body>
結果就是這樣
這個題可以有些難以理解，具體步驟就是先設置好框架（文本框，按鈕，盒子），JS代碼就是先用代碼獲取文本框的值，再獲取div的值，再將文本框中輸入的值輸出到div里。
第二章的知識就說完了。感謝支持。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/209371.html
微信掃一掃 
支付寶掃一掃 