<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # 無處不在的Javascript Javascript現在已經無處不在了,也許你正打開的某個網站,他便可能是node.js+json+javascript+mustache.js完成的,雖然你還沒理解上面那些是什么,也正是因為你不理解才需要去學習更多的東西。但是你只要知道Javascript已經無處不在了,它可能就在你手機上的某個app里,就在你瀏覽的網頁里,就運行在你IDE中的某個進程里。 ## 2.1 Javascript的Hello,world 這里我們還需要有一個helloworld.html,Javascript是專為網頁交互而設計的腳本語言,所以我們一點點來開始這部分的旅途,先寫一個符合標準的helloworld.html ~~~ <!DOCTYPE html> <html> <head></head> <body></body> </html> ~~~ 然后開始融入我們的javascript,向HTML中插入Javascript的方法,就需要用到html中的標簽,我們先用頁面嵌入的方法來寫helloworld。 ~~~ html <!DOCTYPE html> <html> <head> <script> document.write('hello,world'); </script> </head> <body></body> </html> ~~~ 按照標準的寫法,我們還需要聲明這個腳本的類型 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript"> document.write('hello,world'); </script> </head> <body></body> </html> ~~~ 沒有顯示hello,world?試試下面的代碼 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript"> document.write('hello,world'); </script> </head> <body> <noscript> disable Javascript </noscript> </body> </html> ~~~ ## 2.2 更js一點 我們需要讓我們的代碼看上去更像是js,同時是以js結尾。就像C語言的源碼是以C結尾的,我們也同樣需要讓我們的代碼看上去更正式一點。于是我們需要在helloworld.html的同一文件夾下創建一個app.js文件,在里面寫著 ~~~ document.write('hello,world'); ~~~ 同時我們的helloworld.html還需要告訴我們的瀏覽器js代碼在哪里 ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript" src="app.js"></script> </head> <body> <noscript> disable Javascript </noscript> </body> </html> ~~~ ### 從數學出發 讓我們回到第一章講述的小明的問題,**從實際問題下手編程,更容易學會編程**。小學時代的數學題最喜歡這樣子了——某商店里的糖一個5塊錢,小明買了3個糖,小明一共花了多少錢。在編程方面,也許我們還算是小學生。最直接的方法就是直接計算3x5=? ~~~ document.write(3*5); ~~~ document.write實際也我們可以理解為輸出,也就是往頁面里寫入3*5的結果,在有雙引號的情況下會輸出字符串。我們便會在瀏覽器上看到15,這便是一個好的開始,也是一個糟糕的開始。 ## 2.3 設計和編程 對于實際問題,如果我們只是止于所要得到的結果,很多年之后,我們就成為了code monkey。對這個問題進行再一次設計,所謂的設計有些時候會把簡單的問題復雜化,有些時候會使以后的擴展更加簡單。這一天因為這家商店的糖價格太高了,于是店長將價格降為了4塊錢。 ~~~ document.write(3*4); ~~~ 于是我們又得到了我們的結果,但是下次我們看到這些代碼的時候沒有分清楚哪個是糖的數量,哪個是價格,于是我們重新設計了程序 ~~~ tang=4; num=3; document.write(tang*num); ~~~ 這才能叫得上是程序設計,或許你注意到了";"這個符號的存在,我想說的是這是另外一個標準,我們不得不去遵守,也不得不去fuck。 ### 2.3.1 函數 記得剛開始學三角函數的時候,我們會寫 ~~~ sin 30=0.5 ~~~ 而我們的函數也是類似于此,換句話說,因為很多搞計算機的先驅都學好了數學,都把數學世界的規律帶到了計算機世界,所以我們的函數也是類似于此,讓我們做一個簡單的開始。 ~~~ function hello(){ return document.write("hello,world"); } hello(); ~~~ 當我第一次看到函數的時候,有些小激動終于出現了。我們寫了一個叫hello的函數,它返回了往頁面中寫入hello,world的方法,然后我們調用了hello這個函數,于是頁面上有了hello,world。 ~~~ function sin(degree){ return document.write(Math.sin(degree)); } sin(30); ~~~ 在這里degree就稱之為變量。 于是輸出了-0.9880316240928602,而不是0.5,因為這里用的是弧度制,而不是角度制。 ~~~ sin(30) ~~~ 的輸出結果有點類似于sin 30。寫括號的目的在于,括號是為了方便解析,這個在不同的語言中可能是不一樣的,比如在ruby中我們可以直接用類似于數學中的表達: ~~~ 2.0.0-p353 :004 > Math.sin 30 => -0.9880316240928618 2.0.0-p353 :005 > ~~~ 我們可以在函數中傳入多個變量,于是我們再回到小明的問題,就會這樣去編寫代碼。 ~~~ function calc(tang,num){ result=tang*num; document.write(result); } calc(3,4); ~~~ 但是從某種程度上來說,我們的calc做了計算的事又做了輸出的事,總的來說設計上有些不好。 ### 2.3.2 重新設計 我們將輸出的工作移到函數的外面, ~~~ function calc(tang,num){ return tang*num; } document.write(calc(3,4)); ~~~ 接著我們用一種更有意思的方法來寫這個問題的解決方案 ~~~ function calc(tang,num){ return tang*num; } function printResult(tang,num){ document.write(calc(tang,num)); } printResult(3, 4) ~~~ 看上去更專業了一點點,如果我們只需要計算的時候我們只需要調用calc,如果我們需要輸出的時候我們就調用printResult的方法。 ### 2.3.3 object和函數 我們還沒有說清楚之前我們遇到過的document.write以及Math.sin的語法為什么看上去很奇怪,所以讓我們看看他們到底是什么,修改app.js為以下內容 ~~~ document.write(typeof document); document.write(typeof Math); ~~~ typeof document會返回document的數據類型,就會發現輸出的結果是 ~~~ object object ~~~ 所以我們需要去弄清楚什么是object。對象的定義是 > 無序屬性的集合,其屬性可以包含基本值、對象或者函數。 創建一個object,然后觀察這便是我們接下來要做的 ~~~ store={}; store.tang=4; store.num=3; document.write(store.tang*store.num); ~~~ 我們就有了和document.write一樣的用法,這也是對象的美妙之處,只是這里的對象只是包含著基本值,因為 ~~~ typeof story.tang="number" ~~~ 一個包含對象的對象應該是這樣子的。 ~~~ store={}; store.tang=4; store.num=3; document.writeln(store.tang*store.num); var wall=new Object(); wall.store=store; document.write(typeof wall.store); ~~~ 而我們用到的document.write和上面用到的document.writeln都是屬于這個無序屬性集合中的函數。 下面代碼說的就是這個無序屬性集中中的函數。 ~~~ var IO=new Object(); function print(result){ document.write(result); }; IO.print=print; IO.print("a obejct with function"); IO.print(typeof IO.print); ~~~ 我們定義了一個叫IO的對象,聲明對象可以用 ~~~ var store={}; ~~~ 又或者是 ~~~ var store=new Object{}; ~~~ 兩者是等價的,但是用后者的可讀性會更好一點,我們定義了一個叫print的函數,他的作用也就是document.write,IO中的print函數是等價于print()函數,這也就是對象和函數之間的一些區別,對象可以包含函數,對象是無序屬性的集合,其屬性可以包含基本值、對象或者函數。 復雜一點的對象應該是下面這樣的一種情況。 ~~~ var Person={name:"phodal",weight:50,height:166}; function dream(){ future; }; Person.future=dream; document.write(typeof Person); document.write(Person.future); ~~~ 而這些會在我們未來的實際編程過程中用得更多。 ### 2.3.4 面向對象 開始之前先讓我們簡化上面的代碼, ~~~ Person.future=function dream(){ future; } ~~~ 看上去比上面的簡單多了,不過我們還可以簡化為下面的代碼。。。 ~~~ var Person=function(){ this.name="phodal"; this.weight=50; this.height=166; this.future=function dream(){ return "future"; }; }; var person=new Person(); document.write(person.name+"<br>"); document.write(typeof person+"<br>"); document.write(typeof person.future+"<br>"); document.write(person.future()+"<br>"); ~~~ 只是在這個時候Person是一個函數,但是我們聲明的person卻變成了一個對象**一個Javascript函數也是一個對象,并且,所有的對象從技術上講也只不過是函數。**這里的"\"是HTML中的元素,稱之為DOM,在這里起的是換行的作用,我們會在稍后介紹它,這里我們先關心下this。this關鍵字表示函數的所有者或作用域,也就是這里的Person。 上面的方法顯得有點不可取,換句話說和一開始的 ~~~ document.write(3*4); ~~~ 一樣,不具有靈活性,因此在我們完成功能之后,我們需要對其進行優化,這就是程序設計的真諦——解決完實際問題后,我們需要開始真正的設計,而不是解決問題時的編程。 ~~~ var Person=function(name,weight,height){ this.name=name; this.weight=weight; this.height=height; this.future=function(){ return "future"; }; }; var phodal=new Person("phodal",50,166); document.write(phodal.name+"<br>"); document.write(phodal.weight+"<br>"); document.write(phodal.height+"<br>"); document.write(phodal.future()+"<br>"); ~~~ 于是,產生了這樣一個可重用的Javascript對象,this關鍵字確立了屬性的所有者。 ## 2.4 其他 Javascript還有一個很強大的特性,也就是原型繼承,不過這里我們先不考慮這些部分,用盡量少的代碼及關鍵字來實際我們所要表達的核心功能,這才是這里的核心,其他的東西我們可以從其他書本上學到。 所謂的繼承, ~~~ var Chinese=function(){ this.country="China"; } var Person=function(name,weight,height){ this.name=name; this.weight=weight; this.height=height; this.futrue=function(){ return "future"; } } Chinese.prototype=new Person(); var phodal=new Chinese("phodal",50,166); document.write(phodal.country); ~~~ 完整的Javascript應該由下列三個部分組成: * 核心(ECMAScript)——核心語言功能 * 文檔對象模型(DOM)——訪問和操作網頁內容的方法和接口 * 瀏覽器對象模型(BOM)——與瀏覽器交互的方法和接口 我們在上面講的都是ECMAScript,也就是語法相關的,但是JS真正強大的,或者說我們最需要的可能就是對DOM的操作,這也就是為什么jQuery等庫可以流行的原因之一,而核心語言功能才是真正在哪里都適用的,至于BOM,真正用到的機會很少,因為沒有完善的統一的標準。 一個簡單的DOM示例, ~~~ <!DOCTYPE html> <html> <head> </head> <body> <noscript> disable Javascript </noscript> <p id="para" style="color:red">Red</p> </body> <script type="text/javascript" src="app.js"></script> </html> ~~~ 我們需要修改一下helloworld.html添加 ~~~ <p id="para" style="color:red">Red</p> ~~~ 同時還需要將script標簽移到body下面,如果沒有意外的話我們會看到頁面上用紅色的字體顯示Red,修改app.js。 ~~~ var para=document.getElementById("para"); para.style.color="blue"; ~~~ 接著,字體就變成了藍色,有了DOM我們就可以對頁面進行操作,可以說我們看到的絕大部分的頁面效果都是通過DOM操作實現的。 ## 2.5 美妙之處 這里說到的Javascript僅僅只是其中的一小小部分,忽略掉的東西很多,只關心的是如何去設計一個實用的app,作為一門編程語言,他還有其他強大的內制函數,要學好需要一本有價值的參考書。這里提到的只是其中的不到20%的東西,其他的80%或者更多會在你解決問題的時候出現。 * 我們可以創建一個對象或者函數,它可以包含基本值、對象或者函數。 * 我們可以用Javascript修改頁面的屬性,雖然只是簡單的示例。 * 我們還可以去解決實際的編程問題。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看