javascript
js操作完的数值赋回html元素,JS的学习
JavaScript是什么？
JS是一種小型的、輕量級的、面向對象的、跨平臺的客戶端腳本語言。
JS是嵌入到瀏覽器軟件當中去的，有瀏覽器就可以執行JS程序了。
JS是一種面向對象的程序語言。
在程序中，對象是由“屬性”和“方法”構成。
在現實中，男女朋友就是一個“對象”。“東西”就是“對象”。一個“物體”就是“對象”。
“對象”有各種各樣的特征(屬性)，如：身高，體重，年齡，姓名，學歷等。
“對象”有很多方法。“人”這個對象，可以做很多
注意：JS中的對象只要會用就可以的，不需要我們自己去開發對象
跨平臺：JS程序可以在多種平臺下運行，如：widows、linux、mac、IOS等。
客戶端腳本程序：JS只能在客戶端的瀏覽器運行，不能在服務器端(阿帕奇)來運行。
瀏覽器是一種翻譯器，可以翻譯三種代碼：html、CSS、JS。不需要服務器，因為本來就是客戶端的。
。
。
JavaScript的應用
表單驗證：是JS最基本的功能。
動態HTML：可以實現一些動態的、重復的效果。
交互試：人機交互，通過鍵盤和鼠標，在網頁中的元素進行交互。
。
標記
常用的兩個客戶端輸出方法
(1)document.write(str內容)
描述：在網頁的
標記，輸出str的內容。Document意思“文檔”，就是整個網頁。
Document是一個文檔對象，代表整個網頁
write是document對象的一個輸出方法。
“.”小數點：通過小數點來調用對象的方法。
str:表示要輸出的內容。
(2)window.alter(str內容)
描述：在當前窗口中彈出一個警告對話框，str為對話框中顯示的內容。
window代表當前瀏覽器窗口，window是一個窗口的對象。
alter()方法：彈出一個對話框。
str：顯示要輸出的內容。
Paste_Image.png
.
JS中的注釋
HTML的注釋：
CSS注釋：/注釋內容/
JS的注釋：// 或 /* 多行注釋*/
JS變量
1、變量的概念
變量是變化的一個量。
變量可以看成是一個“未知數”。
變量可以看成是賓館的“房間號”。
變量可以看成是賓館的“房間號”。
變量一般指程序數據。
變量是臨時存在的數據。我們可以把計算機內存看成是一個個的小格子。每個小格子中可以存儲一個變量的名稱和變量的值。
2、變量的聲明
相當于預定賓館的“房間”。
語法格式：var 變量名=變量的值
變量聲明是使用系統關鍵字var來進行的
舉例：var name;//聲明變量
var,name,sex,edu;//同時聲明用對個變量，多個變量間用英文下的逗號 隔開。
var name="張三"；//一邊聲明，一遍賦值。
3、變量的命名規則
變量的名可以包含字母、數字、下劃線。
變量名不能以數字開頭，可以以字母和下劃線開頭。如 var _name;
變量名不能是系統關鍵字。如：var,swith,for,try,case,else,while等。
JS中變量名是區分大小寫的。如name和Name是兩個變量。
JS中變量的名稱一定要有意義。
如果變量名有多個單詞構成的話，
“駝峰式命名”：第一個單子小寫，后面每個單詞首字母大寫。如getUserName:獲取用戶名。
“下劃線式命名”：所有單詞全小寫，中間用下劃線鏈接線鏈接。如:get_user_name
4、給變量賦值
給變量賦值，就是往“空間”中裝東西。
使用賦值號“=”來給變量賦值。
語法：var 變量名=變量名
舉例：var name="張三"；
“=”的意義：將“=”右邊的“運算結果”賦給左邊的變量名。
應該是“=”右邊先運算，再把運算的結果，賦給左邊的變量
“=”左邊只能是一個變量名，而不能是“運算表達式”。說白了等號左邊就是一個容器，至于容器里面裝什么是等號右邊的事情
例如
![Upload Paste_Image.png failed. Please try again.]
.
.
.
.
JS的運算符
1、算術運算符：加減乘除
運算時，只能進行同類型運算。如果類型不同，將進行類型轉換。
2、賦值運算符：=、+=
將等號右邊的運算結果，賦給左邊的變量。
+=：先加后等
。
寫程序的一般步驟
(1)變量的初始化：變量聲明，變量賦值
(2)程序的運行過程
(3)輸出結果
.
Paste_Image.png
。
JS程序的基本語法
JS是區分大小寫的
JS中每一條語句，一般以英文下的分號(；)結束。這個分號不是必須的，為了向PHP兼容，最好加上分號。
運算符和變量，以及操作之間可以使用空格分開，這樣的程序比較容易閱讀。
var a=100;varna=10;是一樣的。
.
變量的數據類型
變量是有類型的，這個類型來源于“變量的值”，值是什么類型，變量就是什么類型。
JS變量的類型有：數值型、字符型、布爾型、未定義型、空型underfined,null,array,object,function
1、數值型：可以進行算術運算的(加減乘除)
數值型包括：整型(整數)和浮點型(小數)
Paste_Image.png
2、字符型：用單引號或雙引號，引起來的一串字符。
注意：單引號和雙引號可以相互嵌套
單引號內只能嵌套雙引號
雙引號內只能嵌套單引號
如下例：雙引號內嵌套單引號，為了是名字加單引號。
注意：如果想在雙引號內在嵌套雙引號，里面的雙引號一定要進行轉義(\ ")
JS中轉義字符是反斜杠(\)
常用的轉義字符有：' " \ \r \n等
也就是說，當瀏覽器遇到反斜杠時，將會對其后的一個字符進行特殊對待，當成普通字符來對待。所謂普通字符就是平常的a,b,c,d字母字符。
Paste_Image.png
3、布爾型
又稱邏輯型。只有兩個值：true、false(假)
布爾型只有兩個狀態。如性別
var a=true;
var b=false;
布爾型常用if條件判斷語句中
if條件判斷
1、語法結構--只判斷true，不判斷flase
if(條件判斷：結果只有true或false)
{
條件為true，將執行該代碼；
}
2、語法結構--既判斷true，又判斷flase
if(條件判斷：結果只有true或false)
{
條件為true，將執行該代碼；
}
else
if(條件判斷：結果只有true或false)
{
條件為false，將執行該代碼；
}
如果條件為true，則執行第一個大括號{}中的代碼。
如果條件為flase，則執行第二個大括號{}中的代碼。
4、未定義型(用的很少)
當一個變量定義，但未賦值時，將返回未定義型，未定義型的值只有一個undefined。
當一個對象屬性不存在，也返回未定義型。
Paste_Image.png
5、空型(用的很少)
當一個對象不存在時，將返回空型的值null.
也可以理解為：是一個對象的占位符
如果你想清除一個變量的值的話，可以賦一個null的值。
var a=null,//將一個null賦給一個變量，用于清除他的值
變量的類型轉換
判斷變量的數據依據：typeof()
使用一元運算符typeof(),可以測試一個變量的類型。
typeof()測試的結果是一個類型字符串。
typeof()的結果字符串有幾種情況："string" "number" "boolean" "undedined" "object" "function"
另外：null、對象、數組這三種類型，都將返回"object"
備注：只有這五個是假，其它都為真
。
函數和方法的區別
Boolean(a) //函數是可以獨立使用的
document.write(a) //方法不能獨立使用，方法是必須要屬于哪一個對象。
Paste_Image.png
注意事項：a+true中true會自動轉換成字符串"true"，"+"左右只要有一個字符串，那么另外一個一定得轉成字符串，才能運算。“”乘號左右兩邊有一個數值型，則另外一個一定要轉換成數值型。
var a="";
var b=a+true;//相當于b=a+true="true"*
.
.
Paste_Image.png
Paste_Image.png
。
從字符串中提取整數浮點數函數
(1)parseInt()系統函數、全局函數
功能：在一個字符串中，從左往右提取整型。如果遇到非整型的內容，則停止提取，并返回結果。
注意：如果第一個字符就是非整數，則立即停止，并返回NaN
如：parselnt("120px")=120
parselnt("120.98")=120
parselnt("a 120px")=NaN
parselnt(".98")=NaN
例子：
Paste_Image.png
(2)parsefFloat()系統函數，全局函數
功能：在一個字符串中，從左往右提取浮點型，遇到非浮點型內容，則停止提取，并返回結果。
注意：如果第一個字符為非浮點型，則立即停止，并返回NaN.
parseFloat("120px")=120
parseFloat("120.98")=120.98
parseFloat(".98")=0.98
parseFloat("a.98")=NaN
注意:JS中的浮點型是包括整數和小數點的，也就是說用parseFloat()函數時，整數也一樣的當做f浮點型，不會停止變成NaN，所以parseFloat比parseInt大一級。只要是數值都可以提取，而parseInt只能提取整數。
‘
’
* JS運算符
1、算術運算符
加減乘除(+，-，*，/)，%，++，--
取余運算符(%)，兩個數相除，取余數
。
2、賦值運算符：=、+=、-=、*=、/=
。
注意：第三和第四的比較
.
Paste_Image.png
Paste_Image.png
作業
Paste_Image.png
。
。
。
if條件判斷語句：條件成立，執行什么代碼；條件不成立，執行什么代碼。
結構一：只判斷真(true)，條件為假，什么也不做。
Paste_Image.png
例子：
switch分支語句
描述：根據一個變量的不同取值，來執行不同的代碼。
語法結構：
Paste_Image.png
。
。
while循環：只要條件成立，就重復不斷的執行循環體代碼。如果條件為假，則退出循壞。
while(條件判斷)
{
如果條件為true，則執行循環體代碼
}
while循環結構說明：
在循環開始前，必須要對變量初始化(聲明變量，給變量給個初始值)
如果while的條件為真，則會重復不斷的執行循環體中({})的代碼。
在循環體中，必須要有“變量更新”的語句，換句話說：兩次循環的變量的值不能一樣，如果一樣，會造成死循環。
結果：
結果：
Paste_Image.png
。
結果：
實例：隔行變色
注意：
Paste_Image.png以上代表的是循環體，
的變化放在if條件判斷中for循環
求0-100的偶數，與while一樣
。
注意：" "表示變量i的值有空格排列。
。
break語句：
continue語句：
例子：做九九乘法表
第一步：
第二步：({}中代表的是循環體，循環體在哪里，for循環就在哪里)
第二步結果：
第三步(循環套循環)：
第三步結果：
第四步(j<=i)
第五步(×是代表的"乘號")：
第五步結果：
。
。
數組：
注意：數組和循環一起用的，一般不單獨用。
；
創建數組
。
。
數組的操作：
。
。
。
1、函數的概念：
函數，是將一段公共的代碼進行封裝，給它起個名字叫“函數。”
函數可以一次定義，多次調用。
函數，可以將常用的功能代碼，進行封裝。如：表單中用戶名的驗證、驗證碼函數、郵箱的驗證。
2、函數的定義格式：
3、函數的調用
函數定義是沒用的，需要調用才有用。
函數的調用：直接寫函數名，如果有參數加參數，沒有不用寫。小括號必須寫。
注意：先執行調用函數那行，再執行括號里面的，網上定義。定義和調用函數不分順序
4、函數的參數
注意：1、形參是變量，實參是實際數量
2、函數可以一次定義多次調用
5、求兩個整數的最大值
此時return被屏蔽了，則值無法傳送到函數外，docnment數出的值為undefind
例子：return的運用
。
。
全局變量和局部變量
全局變量：可以在網頁的任何地方(函數內部和函數外部)使用的變量，就是“全局變量”。
在函數外部定義的變量，就是“全局變量”。
“全局變量”既可以在函數外使用，也可以在函數內部使用。
“全局變量”在網頁關閉時，自動消失(釋放空間)。
局部變量：只能在函數內部使用的變量稱為局部變量。
“局部變量”在函數內部定義，在函數內部使用。
“局部變量”在函數外部無法訪問。
“局部變量”在函數執行完畢就消失了。
注意：在函數內部，省略關鍵字var定義的變量是“全局變量”，var關鍵字盡量不要省略，省略后全局變量和局部變量會混淆
注意：通過這四個比較記住兩點；1、age是全局變量還是局部變量。2、第二句輸出是在調用函數前還是后，是前則age沒值，因為還沒運行大括號內的函數，所以不知道age的值。是后則有值。
執行順序：
先執行函數，所以先出李四。
‘
‘
拷貝傳值和引用傳值
Paste_Image.png
‘
’
二維數組(二維數組和表格比較像)
用的非常多，二維數組就得用兩層循環來實現，也就是循環套循環
二維數組的循環與二維表格的循環一模一樣
二維數組的訪問：數組名后跟多個 連續的中括號【】，第1個中括號代表第一維數組，第二個中括號代表第二維數組
。
。
對象
1、對象的概念
Paste_Image.png
自定義對象(shownfo是指顯示信息，方法)
1、使用new關鍵字結合構建函數Object()來創建一個空對象。
2、使用大括號{}來創建對象
。
。
JS內置對象
提取對象的方法格式都是：{對象(如String，Array).方法}
string(字符串)對象(共六個方法)的方法1:：charAt(index)(在原字符串提取一個下標)
注意：index索引號也就是下標號。
Paste_Image.png
方法2：indexOf() (在原字符串中查找某一字符串，從左往右查，strObj.indexOf(@)=一個數字,即多少個索引值)
表單驗證@中有用，查找順序是從左往右查找。
。
方法3：lastindexOf() (在原字符串中查找某一子字符串，右找起)
方法4：substr() (在原字符串中提取一子字符串)
例子
方法5：substring() 在一字符串中提取一子字符串
方法6：split() 將字符串轉換成數組
()括號內的分隔號是指字符串里面的分隔號，如果中間沒有分隔號，則是空格號，如"beijingsh"轉換成數組，"beijingsh".split("")=["a","b","c","d"]下面即看到逗號就分割。
注意：第12行得出的星期值是阿拉伯數字，所以要創建一個數組arr[week]就是數組第幾個
例子：
利用空字符串來做分割
。
。
。
Array(數組 )對象：一個數組變量，就是一個數組對象。
length屬性：動態獲取數組長度。如：var len=arrObj.length
join() 數組轉換成字符串
功能：將一個數組轉換成字符串。
語法：arr.Obj.join(連接號)
說明：將一個數組，用指定的"連接號"連接成一個字符串。
reverse()
功能：將數組中各元素顛倒順序
語法：arrObj.reverse()
參數：無
.
.
數組元素的刪除和添加
delete運算符，只能刪除數組元素的值，而所占空間還在，總長度沒變(arr.length)
以前數組元素的添加，只能向后添加，不能向前添加。
表明：delect只能往后添加，若添加arr[1]=15,則15把數組中的‘男’替換了
數組元素的刪除：
shift():刪除數組中的第一個元素，返回刪除的那個值，并將長度減1
pop():刪除數組的最后一個元素，返回刪除的那個值，并將長度減1
結果
數組元素的添加：
unshift():往數組前面添加一個或多個數組元素，長度改變。arrObj.unshift("a","b","c")
push():往數組結尾加一個或者多個數組元素，長度改變。arrObj.push("a","b","c")
.
.
.
Date對象：日期對象
Date對象和string對象不一樣:
string對象：定義了一個字符串，其實就是一個string獨享，就可以直接調用屬性和方法。
()或者 new String() ,,,,,,new Array()或者[]
Date對象：必須使用new關鍵字來創建對象。否則無法調用Date對象的屬性和方法。
創建Date對象的方法
(1)創建當前(現在)日期對象的實例，不帶任何參數。
(2)創建指定時間戳的日期對象實例，參數是時間戳。
時間戳：是指某一個時間距離1970年1月1日0時0分0秒，過去了多少毫秒(1秒等于1000毫秒)。
var timer=new Date(10000)...1970年1月1日0時0分10秒
(3)指定一個字符串的日期時間信息，參數是一個日期時間字符串
var timer=new Date(2015/5/25 10:00:00);
(4)指定多個數值參數
var timer=new Date(2015,4,25,10,20,0)//順序是：年月日時分秒(年月日必須寫)
![Uploading Paste_Image_218993.png . . .]
如果是1970年前生的，沒有負值，直接也是正數
例子：
結果：
。
。
。
Math數學對象
math對象是一個靜態對象，換句話說，在使用Math對象，不需要創建實例
實例：隨機網頁背景色
script放在body后面
。
。
。
Number數值對象
一個數值對象，就是一個數值對象(Number對象)
toFixed()
功能：將一個數值轉換成字符串，進行四舍五入，保留指定位數的小數。
語法：numObj.toFixed(n)
參數：n就是要保留的小數位
舉例：
var a=123.9878
a=a.toFixed(2);//a="123.99"(先轉換字符串)
實例：
作業：
1、
2、
3、
。
。
。
。
BOM和DOM簡介(最重要的是定時器和延時器，其它了解)
BOM，browser object modle,瀏覽器對象模型
BOM主要提供了訪問和操作瀏覽器各組件的方式
瀏覽器組件：window(瀏覽器窗口)、location(地址欄)、history(瀏覽歷史)、screen(顯示器屏幕)、navigator(瀏覽器軟件)
各對象之間是有層級關系的，那么個對象之間如何訪問呢？
window.document.write("ok")
window.document.body.bgColor="#FF0000"
window對象是所有其它對象的最頂層對象，因此，可以省略
.
.
window對象的屬性
1、name:指瀏覽器窗口的名字或框架的名字。這個名字是給標記的target屬性用。
*設置窗口的名字：window.name="newWin"
*獲取窗口的名字：documentwrite(name)
2、top:代表最頂層窗口。如：window.top
3、parent:代表父級窗口
4、self：代表當前窗口
5、innerWidth:指瀏覽器窗口的內寬(不含菜單欄、工具欄、地址欄、狀態欄)，該屬性火狐支持，IE不支持。
* 在IE下，使用document.documentElement.clientWidth來代替window.innerWidth。
6、innerHeight:指瀏覽器窗口的內高(不含菜單欄、工具欄、地址欄、狀態欄)，該屬性火狐支持，IE不支持
在IE下，使用document.documentElement.clientHeight來代替window.innerHeigth。
document.documentElement就是標記對象
document.body 就是
標記對象。
。
。
window對象方法
open()方法
功能：打開一個新的瀏覽器窗口。
語法：var winObj=window.open(url,name,options);
onload事件：當網頁加載完成，指
標記的所有內容全部加載完成，才觸發該事件(條件)。通過onload事件屬性，去調用JS的函數。onload屬性只有body標記才有。在JS程序開始寫window.οnlοad=init和在
是一樣的，init是有名函數，所以不能加括號，如果是匿名函數，則要加括號，如匿名函數window.οnlοad=fuction(){}，用匿名函數可以少寫一行。onclick事件，當單擊時，去調用JS代碼，所有html標記都有該事件。寫在
中的某一標記中。。
。
。
延時器方法——setTimeout()
實例：計時器
此段程序執行順序：單擊開始按鈕，onclick事件觸發，調用start2()函數，然后去JS中找start2()函數。然后執行函數內的功能
定時器方法----setInterval()
實例：圖片執行自動變換
。
。
。
DOM對象
screen屏幕對象
navigator瀏覽器對象
。
location地址欄對象
。
history歷史記錄對象
。
。
。
.
HTML節點樹
節點與節點的關系
DOM中節點類型
核心DOM中公共的屬性和方法
提示：核心DOM中查找節點(標記)，都是從根節點(html節點)開始的。
1、節點訪問
2、對節點屬性操作
3、節點的創建注意：節點就是標記。
實例：隨機顯示小星星
。
。
HTML DOM簡介和新特性
HTML DOM訪問HTML元素的方法(最常用)
元素對象屬性
#######例子：
程序效果
元素對象屬性
實例：書訊快遞
.
CSS DOM動態樣式
使用JS來操作CSS中的各種屬性
JS只能操作及修改行內樣式：imgObj.style.border="1px solide red"(行類樣式一般是那種一個屬性只能加一個值的)
對于類樣式，通過className來賦值:imgObj.className="imgClass"(類的里面有好多個)
style對象
style對象屬性與CSS屬性的轉換
。
。
/1、Event事件
2、常用事件
3、事件句柄屬性
。
。
Event對象簡介
DOM中的Event對象
1、DOM中引入Event對象(DOM瀏覽器就是標準瀏覽器)
![Upload Paste_Image.png failed. Please try again.]
2、DOM中Event對象屬性
IE中的Event對象
實例：點出滿天星星
Paste_Image.png
當當我的購物車
6和7是CSS的引入，8是JS的引入
選項卡實例
![Uploading Paste_Image_464119.png . . .]
歷史篇
。
。
Form對象
表單提交和驗證方法總結
1、使用submit按鈕，結合onsubmit事件來實現 (最常用)
onsubmit是form的屬性，不能給input標記用，input用onclick
需要阻止就返回假，不需要阻止就不需要返回
2、submit按鈕，結合onclick事件，實現表單的驗證和提交
3、buttom按鈕(普通按鈕)，結合submit方法，
普通按鈕的默認功能無任何功能，所以return布爾值給他沒用，不要要return任何值給他
。
。
input對象
表單驗證案例：
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
![Upload Paste_Image.png failed. Please try again.]
程序效果
二級聯動菜單
slect對象屬性
option對象
綜合案例：二級聯動菜單
。
。
HTML5
總結
以上是生活随笔為你收集整理的js操作完的数值赋回html元素,JS的学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微型计算机的分类有,微型计算机的分类
- 下一篇： springboot生成包含特定数字_面