當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS基础学习（一）
首先感謝?http://www.w3school.com.cn/js/index.asp
學js真的很方便，&下面的內容其實是我自己做的一個備忘
第一節 大致了解 一 js基本介紹1.輕量級腳本語言2.可插入html，插入后可使用瀏覽器執行 二 js輸出document.write("中間寫你要輸出的東西");//在加載完全部文字后，再次使用它，會覆蓋之前的內容alert("彈出框，輸入你要彈出的東西"); 三 js對事件作出反應<button type = "button" onclick = "alert('歡迎！')">點擊這里</button> （創建一個點擊這里的按鈕，點擊后彈出對話框“歡迎”） 四 改變HTML內容（包括文字圖片等）<p id="demo">JavaScript 能改變 HTML 元素的內容。</p> x=document.getElementById("demo"); // 找到元素x.innerHTML="Hello JavaScript!"; // 改變內容 五 其他雜七雜八1.js中，用分號表示語句的結束是可選的2.大小學敏感3.無視多余的空格4.可以換行，用“\” eg. document.write("Hello \World!");————————————————————truedocument.write \("Hello World!");————————————false5.單行注釋 // 6.多行注釋 /* */第二節 怎么寫一個hello world 一 js的使用<html><head>//通常把函數放在head里面<script>//中間寫你的js代碼</script></head><body><script>//中間寫你的js代碼</script></body></html> 第三節 基礎語法 一 變量的聲明與類型1.所有的變量聲明都是var w;//未經賦值，是空的var a = 123;var b = "4560";var c = "15", d = 16;//可以一行賦值多個var c = "15", //可以分行賦值d = 16;2.注意事項必須字母或者$ _開頭大小寫敏感（最好）在代碼開始處，對所需要的變量進行聲明3.類型js是動態類型，相同的變量可以用作不同的類型js中，所有變量都是對象1.字符串var a = "123";2.數字var a = 12;var a = 12.01;var a = 12e15;var a = 12e-15;3.布爾var a = true;var a = false;4.數組var a = new Array();a[0] = "1";a[1] = "2";var a = new Array("1", "2");var a = ["1", "2"];5.對象//聲明//1var person = {firstName : "ABC",lastName : "DEF",id : "45789"};//2var person = new Object();person.firstName = "ABC";person.lastName = "DEF";person.id = “456780”;//使用var targetName = person.lastName;var targetName = person["lastName"];6.Null可以用Null清空變量a = null;7.Undefined表示不含有值聲明新變量時，可使用new表明類型var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object; 二 Js的對象技術中，所有的變量都是對象js中，對象是擁有屬性和方法的數據1.訪問對象的屬性的語法是targetObject.propertyName//對象名.屬性名2.訪問對象的方法的語法//對象名.方法名(參數)； 注意，與C#不同，js的方法名常常首字母小寫三 函數function 函數名(變量一, 變量二 。。。。){//要執行的代碼//有返回值就直接return }eg.function add(num1, num2){var c = num1 + num2;//他是局部變量，函數運行完就會刪除return c;//你也可以直接return； }&var a = add(2,3);a最終等于的是5，而不是add函數函數外面聲明的變量全是全局變量，即所有位置都能夠訪問全局變量在頁面關閉后刪除將一個值賦給未生明的變量，他將是全局變量，即使他在函數里面 四 運算符，比較符，與或非//這個沒什么好說的，與C#相同 五 判斷語句ifif (time<10){x="Good morning";}else if (time<20){x="Good day";}else{x="Good evening";}//除了elseif中間加了空格，其余與C#完全相同 六 選擇語句//與C#完全相同 七 循環//所有循環的注意事項//不要死循環！！！//for 中的三個部分都輸可選的for(var i = 0; i < 100; i++){document.write("hahaha" + i);}for (var i=0,len=cars.length; i<len; i++){document.write(cars[i] + "<br>");}//遍歷對象中的所有屬性for(a in person){txt = txt + person[x];}//下面兩個與C#中的一樣while (i<5){x=x + "The number is " + i + "<br>";i++;}do{x=x + "The number is " + i + "<br>";i++;}while (i<5);break;//除了C#中的用法，還可以用在有標簽的引用中 eg.cars=["BMW","Volvo","Saab","Ford"];list://這個是標簽，進行標記，個人理解，類似于C#里面的 #region {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>");}continue;//同C# 八 異常處理try{var x=document.getElementById("demo").value;//下面是定義錯誤類型if(x=="") throw "empty";if(isNaN(x)) throw "not a number";if(x>10) throw "too high";if(x<5) throw "too low";}catch(err){var y=document.getElementById("mess");y.innerHTML="Error: " + err + ".";}第四節 稍微高級一點的應用 一 JS HTML DOM（js，html文本對象模型）1.JS功能1.能夠改變頁面中所有的HTML元素2.------------------------屬性3.--------------------CSS樣式4.--------------------事件作出反應2.查找HTML元素1.通過Id查找var x = document.getElementById("id名字");//如果沒有找到，則x = null2.通過標簽查找var x = document.getElementById("Id名字");var y=x.getElementsByTagName("p");//查找<p>標簽內容//y是數組，通過數組來確定使用第幾個標簽中的值3.改變html中的內容document.getElementById("p1").innerHTML = "New text!";//獲取到內容 （屬性）顯示在html中的東西4.改變html中的屬性document.getElementById("image").src="landscape.jpg";//更換圖片資源5.改變html中的樣式document.getElementById("p2").style.color="blue";//style 是關鍵詞6.隱藏html中的內容document.getElementById('p1').style.visibility='hidden'(或者visible);7.事件onclick//點擊onmouseover //鼠標放上onmouseout //鼠標離開onfocus //鼠標選中（點擊）onchange //內容改變onload //加載頁面開始onunload //退出頁面時//定義按鈕時，直接定義店家事件<button οnclick="displayDate()">點擊這里</button>//給按鈕加上Id，在其他地方獲取然后添加事件屬性document.getElementById("myBtn").οnclick=function(){displayDate()};8.節點var para=document.createElement("p");//創建元素<p>var node=document.createTextNode("這是新段落。");//創建要添加的文本para.appendChild(node);//將文本添加帶你創建的元素中var element=document.getElementById("div1");//找到一個已有的節點element.appendChild(para);//將你創建的元素添加到已有的標簽中var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);//從一個父節點中移除一個子元素var child=document.getElementById("p1");child.parentNode.removeChild(child);//從當前所在的父節點中刪除自己 第五節 對象 所有數據類型都是對象 一 構造器function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}var a = new person("123", "123", 15, "red");js，面向對象語言，但不使用類不會創建類，也不通過類來創建對象js基于屬性，而不是基于類的二 數字1.js數字均為64位2.整數最多15位，小數最多17位3.前綴位0，八進制；前綴位0x，十六進制 三 字符串，數組，Data，Boolean，Math這些用到現查沒有什么特殊的 四 RegExp正則用于規定在文本中檢索的內容。var patt1=new RegExp("檢索目標");//檢索目標patt1.test("The best things in life are free");//檢查字符串中的指定值，返回true、false patt1.exec("The best things in life are free");//一樣是檢索，不過返回的是被查找的值，沒有書nullpatt1.compile("d");//改變檢索目標var patt1=new RegExp("e","g");//第二個參數，表示要查找目標所有的關鍵詞do{result=patt1.exec("The best things in life are free");document.write(result);}while (result!=null)
//未完待續
轉載于:https://www.cnblogs.com/singledigit/p/5938939.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： 配置虚拟机网桥模式
- 下一篇： linux虚拟机ip地址更改