JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
javascript組成
ECMAScript，描述了該語言的語法和基本對象。
文檔對象模型（DOM），描述處理網頁內容的方法和接口。
瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。
javascript特點
JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
- 是一種解釋性腳本語言（代碼不進行預編譯）。
- 主要用來向HTML（標准通用標記語言下的一個應用）頁面添加交互行為。
- 可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。
- 跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。
Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。
最近在學習了下js，樂趣多多，做了個簡易計算器，效果圖如下所示：
直接上代碼
html文件代碼：
1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <link href="計算器.css" rel="stylesheet"> 6 </head> 7 8 <body> 9 <div id="big"> 10 <div id="top"> 11 <span id="title">JavaScript計算器</span> 12 <span id="author">@溫一壺清酒</span> 13 </div> 14 15 <div id="import"> 16 <div id="data"> 17 <input type="text" id="dataname"> 18 </div> 19 </div> 20 21 <div id="key"> 22 <input type="button" id="CE" onclick="clearnum()" value="CE" class="buttons"> 23 <input type="button" id="C" onclick="clearnum()" value="C" class="buttons"> 24 <input type="button" id="Back" onclick="back()" value="Back" class="buttons"> 25 <input type="button" id="/" onclick="calc(this.id)" value="/" class="buttons" style="margin-right:0px"> 26 27 <input type="button" id="7" onclick="calc(this.id)" value="7" class="buttons"> 28 <input type="button" id="8" onclick="calc(this.id)" value="8" class="buttons"> 29 <input type="button" id="9" onclick="calc(this.id)" value="9" class="buttons"> 30 <input type="button" id="*" onclick="calc(this.id)" value="*" class="buttons" style="margin-right:0px"> 31 32 <input type="button" id="4" onclick="calc(this.id)" value="4" class="buttons"> 33 <input type="button" id="5" onclick="calc(this.id)" value="5" class="buttons"> 34 <input type="button" id="6" onclick="calc(this.id)" value="6" class="buttons"> 35 <input type="button" id="-" onclick="calc(this.id)" value="-" class="buttons" style="margin-right:0px"> 36 37 <input type="button" id="1" onclick="calc(this.id)" value="1" class="buttons"> 38 <input type="button" id="2" onclick="calc(this.id)" value="2" class="buttons"> 39 <input type="button" id="3" onclick="calc(this.id)" value="3" class="buttons"> 40 <input type="button" id="+" onclick="calc(this.id)" value="+" class="buttons" style="margin-right:0px"> 41 42 <input type="button" id="±" onclick="calc(this.id)" value="±" class="buttons"> 43 <input type="button" id="0" onclick="calc(this.id)" value="0" class="buttons"> 44 <input type="button" id="." onclick="calc(this.id)" value="." class="buttons"> 45 <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="margin-right:0px"> 46 </div> 47 48 <div id="bottom"> 49 <span id="welcome">歡迎使用JavaScript計算器</span> 50 </div> 51 52 </div> 53 <script src="計算器.js"></script> 54 55 </body> 56 57 58 </html>
css樣式代碼：
1 *{
2 margin:0;
3 padding:0;
4 box-sizing: border-box;
5 font: 14px Arial,sans-serif;
6 }
7 html{
8 height:100%;
9 background-color:lightslategrey;
10 }
11 #big{
12 margin: 15px auto;
13 width:330px;
14 height:470px;
15 background-color:darkgrey;
16 border: 1px solid lightgray;
17 padding:15px;
18 }
19 #top{
20 height:20px;
21 }
22 #title{
23 float:left;
24 line-height:30px;
25 }
26 #author{
27 float:right;
28 line-height:30px;
29 }
30 #import{
31 margin-top:15px;
32 }
33 #dataname{
34 margin-top:5px;
35 width:300px;
36 height:40px;
37 text-align:right;
38 padding-right:10px;
39 font-size:20px;
40 }
41 #key{
42 border:1px solid lightgray;
43 height:293px;
44 margin-top:25px;
45 padding:16px;
46 }
47 .buttons{
48 float:left;
49 width:52px;
50 height:36px;
51 text-align:center;
52 background-color:lightgray;
53 margin:0 18px 20px 0;
54 }
55 .buttons:hover{
56 color:white;
57 background-color:blue;
58 }
59 #bottom{
60 margin-top:20px;
61 height:20px;
62 text-align:center;
63 }
js代碼：
1 var number = 0; // 定義第一個輸入的數據
2 function calc(number) {
3 //獲取當前輸入
4 if(number=="%"){
5 document.getElementById('dataname').value=Math.round(document.getElementById('dataname').value)/100;
6 }else{
7 document.getElementById('dataname').value += document.getElementById(number).value;
8 }
9 }
10 function eva() {
11 //計算輸入結果
12 document.getElementById("dataname").value = eval(document.getElementById("dataname").value);
13 }
14 function clearnum() {
15 //清零
16 document.getElementById("dataname").value = null;
17 document.getElementById("dataname").focus();
18 }
19 function back() {
20 //退格
21 var arr = document.getElementById("dataname");
22 arr.value = arr.value.substring(0, arr.value.length - 1);
23 }
本文僅代表作者觀點，系作者@溫一壺清酒發表。轉載請注明出處：http://www.cnblogs.com/hong-fithing/