javascrip基礎以及一個計算器的小案例
1.js的概述
- js是一種腳本語言
- js是可插入html頁面的編程代碼
- js插入html頁面後,可由所有的瀏覽器執
2.js的基本語法
- 與java一樣,變量,函數名,運算符以及其他一切東西都是區分大小寫的
- js是弱類型的語言,與java不同
java:int i =3;String s = "123";
js:var i = 3;var s = "123";
分號可有可無
變量名需要遵守兩條簡單的規則:1.第一個字符必須是字母,下劃線(_)或美元符號($)
余下的字符可以是下劃線,美元符號或任何字母或數字字符
3.js的數據類型
*原始類型
undefined:未定義類型
boolean:布爾類型
number:數字類型
string:字符或字符串
null:空
*引用類型
對象類型,對象類型默認值是null
4.js的運算符
js中的運算符與java中基本一致
js中有一個===全等於,全等於是類型和數值都一致的情況才為true
5.js的引入方式
*頁面內直接編寫js代碼,js代碼需要使用<script>標簽
*將js的代碼編寫到一個.js文件中,在html中引入該js代碼即可
6.html的window對象
*setInterval();每隔多少毫秒執行某個表達式(重復執行)
*setTimeout();隔 多少毫秒執行一個表達式(不重復執行,只執行一次)
*clearInterval();取消由setInterval()設置的timeout;
*clearTimeout();取消由setTimeout方法設置的timeout;
7.window對象的方法
8.Navigator對象的屬性
9.Screen對象屬性
10.History對象的方法
11.Location對象屬性
12.DOM的概述
*DOM:文檔對象模型
將一個html的文檔加載到內存形成一個樹形結構,從而操作樹結構就可以改變html的樣子
* DOM的使用
document,element,attribute的屬性和方法
? 獲得元素：
* document.getElementById(); -- 通過ID獲得元素.
* document.getElementsByName(); -- 通過name屬性獲得元素.
* document.getElementsByTagName(); -- 通過標簽名獲得元素.
? 創建元素：
* document.createElement(); -- 創建元素
* document.createTextNode(); -- 創建文本
? 添加節點：
* element.appendChild(); -- 在最後添加一個節點.
* element.insertBefore(); -- 在某個元素之前插入.
? 刪除節點:
* element.removeChild(); -- 刪除元素
13.js的內置對象
14.array的方法
15.Boolean
16.Date
17.Math
18.js的全局函數
19.下面是一個js+css實現的一個計算器的效果圖和代碼
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器改進</title>
<style>
table{
border-collapse: collapse;
margin: auto auto;
}
td{
width: 150px;
line-height: 70px;
}
#view{
width: 600px;
line-height: 100px;
text-align: right;
}
.clearbutton{
width: 300px;
line-height: 70px;
}
.numbutton{
width: 150px;
line-height: 70px;
}
</style>
</head>
<script>
function jsq(num) {
//獲取當前輸入的數據
document.getElementById("view").value += document.getElementById(num).value;
}
//計算輸入的結果
function eva() {
document.getElementById("view").value = eval(document.getElementById("view").value);
}
//AC鍵
function clearNum() {
document.getElementById("view").value = null;
}
//DEL鍵
function tuiGe() {
var arr = document.getElementById("view");
arr.value = arr.value.substr(0,arr.value.length-1);
}
</script>
<body>
<table>
<tr>
<td colspan="4">
<input id="view" type="text" name="view" class="screen"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="AC" onclick="clearNum()" value="AC" class="clearbutton"/>
</td>
<td colspan="2">
<input type="button" id="DEL" onclick="tuiGe()" value="DEL" class="clearbutton" />
</td>
</tr>
<tr>
<td>
<input type="button" id="7" onclick="jsq(this.id)" value="7" class="numbutton" />
</td>
<td>
<input type="button" id="8" onclick="jsq(this.id)" value="8" class="numbutton" />
</td>
<td>
<input type="button" id="9" onclick="jsq(this.id)" value="9" class="numbutton" />
</td>
<td>
<input type="button" id="*" onclick="jsq(this.id)" value="*" class="numbutton" />
</td>
</tr>
<tr>
<td>
<input type="button" id="4" onclick="jsq(this.id)" value="4" class="numbutton" />
</td>
<td>
<input type="button" id="5" onclick="jsq(this.id)" value="5" class="numbutton" />
</td>
<td>
<input type="button" id="6" onclick="jsq(this.id)" value="6" class="numbutton" />
</td>
<td>
<input type="button" id="/" onclick="jsq(this.id)" value="/" class="numbutton" />
</td>
</tr>
<tr>
<td>
<input type="button" id="1" onclick="jsq(this.id)" value="1" class="numbutton" />
</td>
<td>
<input type="button" id="2" onclick="jsq(this.id)" value="2" class="numbutton" />
</td>
<td>
<input type="button" id="3" onclick="jsq(this.id)" value="3" class="numbutton" />
</td>
<td>
<input type="button" id="-" onclick="jsq(this.id)" value="-" class="numbutton" />
</td>
</tr>
<tr>
<td>
<input type="button" id="0" onclick="jsq(this.id)" value="0" class="numbutton" />
</td>
<td>
<input type="button" id="." onclick="jsq(this.id)" value="." class="numbutton" />
</td>
<td>
<input type="button" id="+" onclick="jsq(this.id)" value="+" class="numbutton" />
</td>
<td>
<input type="button" id="eva" onclick="eva()" value="=" class="numbutton" />
</td>
</tr>
</table>
</body>
</html>
javascrip基礎以及一個計算器的小案例