javascript編程基礎1
1，javascript能幹什麼？
直接寫入html中：javascript
<script> document.write("<h1>這是一級標題</h1>") //輸出加大加黑的文本 </script>
能夠定義某個頁面對事件的反應：php
<body>
<button type="button" onclick="alert('歡迎!')">點我!</button> //點擊之後出現提示窗口，提示：歡迎！
</body>
改變html本頁的某些內容：html
<body> <p id="demo"> JavaScript 能改變 HTML 元素的內容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 函數首先得到元素 x.innerHTML="Hello JavaScript!"; // 而後函數把該元素的文本換一下，編程hello javascript } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //定義了一個按鈕，一點擊就運行函數，而後改變id=demo的元素的內容 </body>
<button onclick="this.innerHTML=Date()">如今的時間是?</button> //定義了一個按鈕，按下會改變本身按鈕上的內容，注意this
改變html圖像：java
<script> function changeImage() { element=document.getElementById('myimage') //獲取id，肯定要對哪一個元素下手 if (element.src.match("bulbon")) //獲取元素src屬性，這個屬性至關於文件的url，若是從src屬性中匹配到‘bulbon’，那就用bulboff這張圖 { element.src="/images/pic_bulboff.gif"; } else //若是匹配不到，那就用bulbon這張圖 { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
親測有效，厲害了！注意，當改動了圖之後，圖像的src屬性也改了，因此再次點擊，會再一次變換圖片python
js能夠改變html樣式：chrome
<body> <p id="demo"> JavaScript 能改變 HTML 元素的樣式。 </p> //今天改的就是你了 <script> function myFunction() { x=document.getElementById("demo") // 找到元素，此時x至關於id=」demo「的元素 x.style.color="#ff0000"; // 改變樣式，改變該樣式style中的color屬性，注意，用句號鏈接。 } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //設置觸發事件 </body>
能夠驗證輸入：shell
<body> <h1>個人第一段 JavaScript</h1> <p>請輸入數字。若是輸入值不是數字，瀏覽器會彈出提示框。</p> <input id="demo" type="text"> //這是接收用戶輸入的文本框 <script> function myFunction() { var x=document.getElementById("demo").value; //得到id="demo」的文本框的內容，注意後綴的：.value 語句，不只僅是或者某個id的位置 if(x==""||isNaN(x)) //注意，||和shell編程同樣，表示or，若是x爲空或者x不是數字 { alert("不是數字"); //用單獨的浮動窗口提示：不是數字 } } </script> <button type="button" onclick="myFunction()">點擊這裏</button> //按鈕激發事件 </body>
2，用法規則
HTML 中的腳本必須位於 <script> 與 </script> 標籤之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。javascript也能夠被放在外部，用的時候指定它是外來的就好了編程
外部js程序示例：數組
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> //親測有效，灰常厲害，src表示文件的url </body> </html>
事件就是某個操做執行時候，咱們能夠激發咱們的程序。好比，點擊的時候瀏覽器
js輸出數據的方式：
- 使用 window.alert() 彈出警告框。實際上單用alert也行。
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素
- innerHTML = "xxx" 是用於修改元素的 HTML 內容
- 使用 innerHTML 寫入到 HTML 元素。好比：<script> document.write(Date());</script> 直接輸出中國時區的時間。
- 使用 console.log() 寫入到瀏覽器的控制檯，chrome中，控制檯爲shift+ctrl+j，打開之後能看到：11
js字面量：通常固定值成爲字面量，整數、小數、科學計數，字符串，數組，對象，函數。
js的一些重要關鍵字：
如下是 JavaScript 中最重要的保留字（按字母順序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | wit |
js註釋：
單行註釋：//，//後面的內容就不會再執行了
多行註釋：/* */，被註釋的行和塊就不會再執行了。
3，變量
js中變量通常是可變的，字面量是一個值。
js中聲明變量就像這樣： 變量必須以字母開頭（$和_可用於標誌特殊變量），對大小寫敏感，使用關鍵字var來聲明變量
var x=2; //也能夠只聲明不賦值，好比：var carname; 變量 carname 的值將是 undefined：
var y=3; var z=x+y; //第一次聲明的時候使用var，日後就不用了
var name="Gates", age=56, job="CEO";
//一會兒聲明不少變量也是能夠的，也支持從新聲明變量
//若是您把值賦給還沒有聲明的變量，不論是在函數內部仍是腳本內部，該變量將被自動做爲全局變量聲明。
js經常使用的變量類型：數字和字符串，文本外要加單雙引號，數字不用加引號
<p id="demo"></p>
<script> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
</script>
// 建立了名爲 carname 的變量，向其賦值 "Volvo"，而後把它放入 id="demo" 的 HTML 段落
注意：一個好的編程習慣是，在代碼開始處，統一對須要的變量進行聲明
4，js數據類型
字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。
JavaScript 擁有動態類型。這意味着相同的變量可用做不一樣的類型
var x // x 爲 undefined var x = 6; // x 爲數字 var x = "Bill"; // x 爲字符串
- js字符串和通常字符串同樣的，很少說。學名：String
- js只有一種數字類型，帶不帶小數點均可以，支持科學計數法。學名：Number
- js布爾值，ture和false，學名：Boolean
- js數組和php數組差很少，學名：Array
var cars=new Array(); //聲明一個變量cars，用」new「代表了類型，是數組。實際上至關於實例化一個class cars[0]="Audi"; //而後開始向數組中加數據，注意js中的數組的下標從0開始 cars[1]="BMW"; cars[2]="Volvo";
var cars=["Saab","Volvo","BMW"]; //這樣建立數組也能夠，它按照下標來講事，叫：literal array
- js的Undefined數據類型就是聲明瞭可是未賦值，因此它不含有值。
- js的變量Null表示空，能夠經過將變量的值設置爲 null 來清空變量。
- js對象（Object）：對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔，花括號內部空行和折行都不要緊
<script>
var person={ //屬性名稱和值用冒號分隔，屬性和屬性用逗號分隔。
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />"); //對象屬性有兩種尋址方式，對象.屬性 這種方法我比較喜歡
document.write(person["lastname"] + "<br />");
</script>
//訪問對象屬性：語法：objectName.propertyName
//訪問對象方法：語法：objectName.methodName()
聲明變量類型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
5，js對象object
JavaScript 對象是擁有屬性和方法的數據。js中，幾乎全部的事物都是對象。js中對象是變量的容器。js對象是屬性和方法的容器。
對象定義：
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566, //前三個是對象的屬性
fullName : function() //這個定義了對象的方法，注意格式，
{
return this.firstName + " " + this.lastName; //對象的fullName方法會把firstname和lastname加起來返回。」this「估計是約等於python中的self
}
}; //對象的定義和建立完成。
document.getElementById("demo").innerHTML = person.fullName(); //向id等於demo的元素輸出fullName結果。
</script>
//訪問對象屬性：name=person.lastName; 或者 name=person["lastName"]
//訪問對象的方法：name=person.fullName(); 括號必不可少
js是基於對象的語言，因此不少功能都是經過對象來實現的：
js中對象和函數的關係比較微妙，全部的函數都是一個對象，全部的對象均可以用構造函數建立：
我理解的正常建立對象：
//這種建立對象的方法叫： 對象字面量，這種寫法的缺點在於每次建立一個新對象都須要寫出完整的定義語句，不利於繼承
var obj1 = { //定義一個obj1的對象，對象下有name和age屬性 name : '手速快',//屬性 age : 27,//屬性 fun :function () {//obj1下有一個fun方法，這個方法其實是一個函數，每次調用這個方法都會打印這個對象的name屬性 alert (this.name); } } console.log(obj1); //打印pbj1這個對象到調試器
固然也有一種先定義空對象，而後添加屬性、方法的對象字面量方法：
var person = {}; person.name = 'zqq'; person.age = 28; person.say = function(){ return "hello"; }
可是js有一種非正常的建立對象的方法：叫構造函數，就很難以理解了。
也不知道理解得對不對，不過無論對仍是不對，js中的函數和對象的分界線實在是不很明顯，若是對的話，對象和實例的分界線也不明顯，父類和子類的分界也並不明顯，尤爲是，js中很爲一個對象建立子類，也很難爲它的子類建立子類的子類。
<script> function Test (name,age) { this.name = name; this.age = age; this.sayName = function () { alert(this.name); } } console.log(typeof Test) //獲得function var baby = new Test('mike','18'); //baby繼承了test的屬性和方法，能夠baby.name打印試試 console.log(typeof baby) //獲得object var ababy=new baby("jack","5") //報錯 //那麼，new究竟幹了什麼？ //1，建立了一個對象：var baby={} //2，而後把this指向了baby（本來的this指向window），因而baby擁有了和Test同樣的name屬性 //3，Test會自動添加一個prototype原型對象，因此Test本身是function，它同時有一個prototype原型對象，（暫時理解成它有函數和對象這倆屬性）他的屬性和方法全部實例共享 //4，在建立baby對象的時候，爲它添加了一個__proto__內置原型對象，這個對象指向Test的原型對象，暫時理解成Test是baby的類或者父類 //總結：new其實是在沒改變函數的狀況下爲它建立了一個對象，而且聲明瞭這個對象的實例。 </script>
參考：https://www.cnblogs.com/liveoutfun/p/8735992.html
6 函數
函數能夠應用在網頁的html語言上，無縫銜接，比較重要
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!"); //函數打印」hello world" } </script> </head> <body> <button onclick="myFunction()">點擊這裏</button> //定義了一個按鈕，點擊的時候執行函數，經過提示窗口的方式顯示函數執行結果 </body> </html>
函數能夠帶參數：
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job); } </script>
<button onclick="myFunction('Bill Gates','CEO')">點擊這裏</button> //按鈕中傳參進去
函數能夠return
function myFunction(a,b)
{
return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); //這句話在<script>內，在函數定義以外
注意：return在函數中也有break的做用，return之後，函數中止，返回結果，若是函數之外還有命令，則繼續執行其餘命令，僅僅但願退出函數的時候也可使用return語句，後面不要加返回值。
function myFunction(a,b) { if (a>b) { return; //若是a>b那就退出函數 } x=a+b }
注意：
函數外聲明的是全局變量，函數內部聲明的變量是局部變量，只有函數內部能夠訪問。局部變量只做用於函數內，因此不一樣的函數可使用相同名稱的變量。局部變量在函數開始執行時建立，函數執行完後局部變量會自動銷燬。
若是把值賦給還沒有聲明的變量，該變量將被自動做爲 window 的一個屬性。也就是全局變量。（全局變量，在函數外聲明而且賦值的變量，函數內部沒有聲明直接賦值的變量，js中的全局變量都是window變量，均可以用window.globalname; 來訪問。）
7，事件
HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 能夠觸發這些事件。事件能夠是用戶的或者是瀏覽器的行爲。
事件實例：
- HTML 頁面完成加載
- HTML input 字段改變時
- HTML 按鈕被點擊
常見的html事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改變 |
| onclick | 用戶點擊 HTML 元素 |
| onmouseover | 用戶在一個HTML元素上移動鼠標 |
| onmouseout | 用戶從一個HTML元素上移開鼠標 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已完成頁面的加載 |
js能夠作什麼？
事件能夠用於處理表單驗證，用戶輸入，用戶行爲及瀏覽器動做:
- 頁面加載時觸發事件
- 頁面關閉時觸發事件
- 用戶點擊按鈕執行動做
- 驗證用戶輸入內容的合法性
8 字符串（此處說的是純字符串，不是字符串對象，字符串對象如:var name= new String("john"）能夠理解爲建立了一個字符串實例）
字符串支持索引：
var carname="hello world"; var character=carname[7]; //取到o，字符串的索引是從0開始 var a="it \' s alright"; //獲得：it's alright,轉義符號不見了，並且轉單引號就獲得單引號，轉雙引號獲得雙引號。當要字符串內包含的引號和外部衝突了，能夠轉義
var slen=carname.length; //獲得11，空格也算一個字符
字符串中若是須要下列字符，那請先轉義：
| 代碼 | 須要的符號 |
|---|---|
| \' | 單引號 |
| \" | 雙引號 |
| \\ | 反斜槓 |
| \n | 換行 |
| \r | 回車 |
| \t | tab(製表符) |
| \b | 退格符 |
| \f | 換頁符 |
注意：
咱們也可使用 new 關鍵字將字符串定義爲一個對象：
var x = "John"; var y = new String("John"); typeof x // 返回 String，注意typeof,至關於pythonn中的type（） typeof y // 返回 Object //注意： var x = "John"; var y = new String("John"); (x === y) // 結果爲 false，由於 x 是字符串，y 是對象，這二者不一樣
9 運算符
等於號賦值，加號合併字符串或者累加數字。
算術運算符：y=5
| 運算符 | 描述 | 例子 | 結果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 減 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除，不是地板除哦 | x=y/2 | x=2.5 |
| % | 求餘數 (保留整數) | x=y%2 | x=1 |
| ++ | 累加,可理解爲x=y+1 | x=++y | x=6 |
| -- | 遞減，可理解爲x=y-1 | x=--y | x=4 |
賦值運算符：
x=10,y=5
| 運算符 | 例子 | 等價於 | 結果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
字符串合併：
+
順便說一句：x=5 + "5" 獲得」55「，數字與字符串相加，結果將成爲字符串！要注意，否則之後要犯錯的。
順便說一句：document.write(x) ,在js中是原地直接打印輸出的意思
比較運算符
假設x等於5：
| 運算符 | 描述 | 例子 |
|---|---|---|
| == | 等於 | x==8 爲 false |
| === | 全等（值和類型） | x===5 爲 true；x==="5" 爲 false |
| != | 不等於 | x!=8 爲 true |
| > | 大於 | x>8 爲 false |
| < | 小於 | x<8 爲 true |
| >= | 大於或等於 | x>=8 爲 false |
| <= | 小於或等於 | x<=8 爲 tr |
邏輯運算符
假定x=6，y=3，和shell編程裏運算符差很少
| 運算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 爲 true |
| || | or | (x==5 || y==5) 爲 false |
| ! | not | !(x==y) 爲 true |
and 和or別混了，老鐵！
條件運算符（我的以爲這更像是if條件的特殊寫法）
greeting=(visitor=="PRES")?"Dear President ":"Dear "; //visitor等於「PRES」嗎？若是是的話，greeting等於"Dear President",不是的話，greeting等於"Dear"
9，條件運算符
if...else...
<!DOCTYPE html>
<html>
<body>
<p>點擊這個按鈕，得到基於時間的問候。</p>
<button onclick="myFunction()">點擊這裏</button> //定製一個網頁上的按鈕，按下的時候會運行頁面底部的函數
<p id="demo"></p>
<script>
function myFunction()
{
var x=""; var time=new Date().getHours(); //new 運算符是用來實例化一個類，因此Date（）是一個內部定義好了的類，getHours（）是一個方法 if (time<20) //注意格式，花括號在下一行，上括號和下括號都單獨佔一行，和php不一樣，php上括號頂着function寫 { x="Good day"; } else // if ...else if...else...格式都是同樣的 { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
還有個語句叫if...else if...else...,寫法是同樣的。
switch基於不一樣的條件來執行不一樣的動做
<!DOCTYPE html> <html> <body>
<button onclick="myFunction()">點擊這裏</button> <p id="demo"></p> <script> function myFunction() { var x; //聲明一個變量，沒有被賦值 var d=new Date().getDay(); //實例化一個Date對象，而且使用其getDay（）的方法，賦值給d。 switch (d) //按照d的值來決定執行哪一個case語句，今天是周天，sunday在這裏是0，因此會執行第一個case語句 { case 0: x="Today it's Sunday"; //在這裏x被賦值 break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; } document.getElementById("demo").innerHTML=x; //x的值將會在指定的id=demo的位置輸出 } </script> </body> </html>
須要注意的是default： default 關鍵詞來規定匹配不存在時作的事情，約等於else
<html>
<body>
<button onclick="myFunction()">點擊這裏</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x; var d=new Date().getDay(); //實例，獲取當前的星期數
switch (d) //把星期數做爲判斷執行哪一個語句的標準， { case 6: //這個語句會在d等於6的時候執行 x="Today it's Saturday"; break; case 0: //這個語句會在d等於0的時候執行 x="Today it's Sunday"; break; default: //這個語句會在d不等於6和0的時候執行，做用相似於條件判斷語句中的else。 x="Looking forward to the Weekend"; }
document.getElementById("demo").innerHTML=x; } </script> </body> </html>
for循環迭代
循環i
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<cars.length;i++) //迭代i，從i=0一直迭代到小於cars.length,每次加1。括號內的條件判斷語句能夠省略，可是分號不能夠省略 { document.write(cars[i] + "<br>"); } </script> </body> </html>
循環數組：
<script>
function myFunction()
{
var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person) //注意，此處迭代的是person的值，不是鍵，這和php不同 { txt=txt + " "+person[x]; } document.getElementById("demo").innerHTML=txt; // 返回：Bill Gates 56 } </script>
while循環
<script>
function myFunction()
{
var x="",i=0; while (i<5) //注意格式就能夠了 { x=x + "The number is " + i + "<br>"; i++; } document.getElementById("demo").innerHTML=x; } </script>
do...while循環實際上和while循環差很少，只不過斷定語句在執行之後
do
{
x=x + "The number is " + i + "<br>"; i++; } while (i<5);
注意別寫無限循環就好了
10，循環控制語句：
break 語句用於跳出循環。
for (i=0;i<10;i++)
{
if (i==3) //if和x=x+...這一句是平級的，i==3的時候，跳出的循環是for循環，if是條件判斷，不屬於循環，謹記 { break; } //if語句能夠簡寫：if (i==3) break; 注意，php和js條件語句後面不加分號這一點是同樣的。 x=x + "The number is " + i + "<br>"; }
continue 用於跳過循環中的一個迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue; //i==3的時候，就不打印x了，直接調到for語句，i++變成4 x=x + "The number is " + i + "<br>"; }
break在js中還有一個用，指定跳出一個標籤，就是指定中止一個東西的意思
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); } //結果是：cars[0],cars[1],cars[2]能夠被打印出來，break list；之後的語句不會被執行。
11，錯誤
try 語句容許咱們定義在執行時進行錯誤測試的代碼塊。
catch 語句容許咱們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
try
{
//在這裏運行代碼
} catch(err) { //在這裏處理錯誤 } //相似於python中的try...excet...
throw 語句容許咱們建立自定義錯誤。
正確的技術術語是：建立或拋出異常（exception）。
<!DOCTYPE html>
<html>
<body>
<script> //這個例子好好看一下，灰常值得學習
function myFunction()
{
try { var x=document.getElementById("demo").value; if(x=="") throw "值爲空"; if(isNaN(x)) throw "不是數字"; if(x>10) throw "太大"; if(x<5) throw "過小"; } catch(err) //若是try有問題，那就從‘mess’處獲得值 { var y=document.getElementById("mess"); y.innerHTML="錯誤：" + err + "。"; } } </script> <h1>個人第一個 JavaScript 程序</h1> <p>請輸入 5 到 10 之間的數字：</p> <input id="demo" type="text"> //定義了一個文本框，id是‘demo’，類型是text，js經過getElementById（)賦值給x <button type="button" onclick="myFunction()">測試輸入值</button> //定義一個按鈕，按下的時候執行函數 <p id="mess"></p> </body> </html>
- 1. JavaScript編程語言 基礎 （1）
- 2. JavaScript編程基礎
- 3. javascript基礎教程（1）
- 4. JavaScript基礎 - 1
- 5. javascript基礎1
- 6. 1、JavaScript基礎
- 7. JavaScript 基礎1
- 8. javascript-基礎1
- 9. JavaScript基礎1
- 10. 林大媽的JavaScript基礎知識（三）：JavaScript編程（1）對象
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。