java腳本語言學習心得

時間 2019-12-13

標籤 java 腳本語言學習心得欄目 Java 简体版

原文原文鏈接

第一篇技術博客，必定要認真！javascript

第一篇技術博客，必定要認真！css

第一篇技術博客，必定要認真！html

好了，進入正題：前端

一什麼是腳本語言？java

程序的運行方式有兩種：編譯運行和解釋運行jquery

1.1linux

前者的典型表明是java,web

從文件角度看分爲三步：ajax

write[編寫]:json

a.java文件(拿個記事本就能寫，擴展名是.java),

compile[編譯]:

編譯(cmd命令是java a.java,ide集成了編譯器運行以前自動編譯)以後產生了a.class文件（是一堆二進制碼，人看不懂，是給虛擬機看的）

運行[run]:

運行就是a.class文件在虛擬機上跑，在控制檯或者dos輸出結果，一個典型的helloworld!到此執行完成

這裏有必要提一下java牛逼哄哄的"一次編寫，到處運行"，舉個例子就是windows下編譯的.class文件拿到linux環境下照樣能跑，根本緣由是虛擬機[jvm]只認.class二級制碼文件，脫離了平臺的限制，這樣還有一個好處就是沒法看到源碼，除非反編譯，抄都沒地方抄。

1.2

解釋運行不產生中間代碼，就像翻譯同樣，一句話一句話執行，腳本語言的執行原理就是這樣

這樣運行的一個典型壞處就是一段10次循環的for循環，它就得翻譯10遍，形成了重複執行同一段代碼的現象，於是執行效率比較低

但針對簡短的代碼而言，沒有什麼計算量（後臺處理程序是有必定計算量的），性能影響不是很明顯，這也就是爲何腳本語言總用在前端一些簡單的特效和計算上的緣由

二我的學習路徑

在學校打醬油的J2EE項目要作一些前端特效，組長是大神前端後端全包，我這個當小弟的看着組長那麼辛苦於心不忍（其實也是想學一點東西），因而挺身而出要模仿着組長那幾個頁面的腳本也完成一些工做。原本的理解是照葫蘆畫瓢，不就jquery麼，就幾個選擇器，回調函數的什麼的，有啥難的？找了幾個傳智播客的視頻看一看，搞得入了門，就開始坑隊長了...最弱智的一個問題是int i=$("#div1").html(),當時憋了半天沒想明白，這麼SB的問題竟然把組長帶進去了，還像模像樣地調試了半天...看着本身不是紅叉就是不能響應的腳本，當時別提有多心酸了。心酸歸心酸，該坑還得繼續坑，除了把人家代碼粘下來改爲狗屎以外，就是在火狐上f12改本身的狗屎,浪費了好多精力。吃了很多虧，仍是總結下吧。

1.別人的經驗不能代替本身的思考。從我的來說，當時我是很佩服我組長的，技術一流，解決問題能力強，有毅力，並且我組長性格也好，沒有沾上技術大牛孤芳自賞的臭毛病，每次個人弱智bug他都好耐心地調好（若是是人家本身作可能只用一半時間），而且願意把技術教授於我。可是爲何個人腳本仍是寫的那麼爛？由於我偷懶了，個人思惟天平傾向於依賴別人的經驗，想走捷徑。這是一種愚蠢的思想，身爲技術人員，放棄了對技術的思考和探索，就像狼放棄了本身的牙和爪子，期望着吃從別人嘴裏嚼爛的肉，用進廢退，時間一長，就不得不面臨着被淘汰的命運。

2.動手以前不要浮躁，正常的學習路線應該是這樣的：先理解dom模型，再寫一些簡單的js腳本入門，以後系統的學習jquery(畢竟強大，js雖然是基礎，但主要是入門領會思想，回頭遇到問題再複習js也不遲)。推薦一個網站：w3c,裏面的代碼有展現功能，寓教於樂，更生動一點。推薦一個jquery工具：webstorm，其功能強大簡直能夠用喪心病狂形容，今後媽媽不再用擔憂我不會jquery了。

三技術總結

JQuery是javaScript的庫，所謂的庫就是對js作了一個封裝，若是js是一條生魚，那麼jquery就是紅燒好的裝在真空袋子裏面熟食，食用起來更方便。在無聊的語法解釋以前，有必要說一下dom模型。

document object model是一種基於瀏覽器的建模，它將瀏覽器頁面的元素抽象成樹形結構，根元素是document，枝葉有<div>，塊，就像地圖裏面的省，下面有<p>,文本，<img>,圖片等若干元素，這樣組織的一大好處就是有條理性，另外可以經過父子，鄰居關係遍歷到每個元素，從計算機和人的角度都很容易接受。每一個元素想要被選到有四條路徑(按照經常使用度排序)：

1.id選擇：<p id="p1" class="style1">我是一段話</p> ； $（「#p1」）【$表明juqery選擇器，（）裏面是字符串，因此要打引號，#的含義是表明id】

2.元素選擇: $("p") 【選擇全部段落元素】

3.類選擇器：$(".style1") 【選擇style1這一類的元素】

4.採用相對位置的選擇器：$("#p1").find("p10") 【選擇了p1到p10之間的全部子元素】

前面經過dom模型對瀏覽器作了抽象，那麼拿到元素以後呢？接下來就說一下JQuery/JS的另一個特色：弱類型

咱們知道在java中有八種基本數據類型，從int到char，爲了符合面向對象的思想，對八種基本數據類型又作了裝箱：從integer到character不等，再往上是全部對象的父類,object類（今後能夠看出樹形結構在計算機應用之普遍），可是在JQuery/JS中，只有一種類型，var類型，var類型就像孫悟空，囊括了全部從int到object的全部變種(你能想到的全部類型，反正聲明變量上來就是var,var a='100'聲明瞭一個字符串100，var a=100聲明瞭整形100，前者加200是100200,後者是300)：

好比聲明一個數組（二維的）:var a=new Array(); a[1]=new Array("a","b");

在好比獲取標籤元素並改變css樣式：var p1=$("#p1") 　　p1.attr("font-color":red)

還能夠定義對象（他們管他叫JSON,就是腳本中的對象,注意這是一個僱員而非普通抽象類型）：

var employees=[{"name":"BillGates","money":"100"},{"name":"Baffete","money":"200"}]

定了了一個對象數組，有兩個僱員，蓋茨和巴菲特，若是想看到蓋茨的存款那麼下面的代碼能夠作到：

$("#p1").html("<B>"+employee[0].money+"</B>"),讓p1的內容顯示蓋茨的存款100塊，哈哈

dom模型做爲針對瀏覽器建模，var類型做爲接受對象的容器,走到這裏我突然想到了MVC的設計思想（model[模型]+view[視圖]+controller[控制層]，不管從請求響應流程角度，仍是從解耦抽取代碼角度看都堪稱完美的一種軟件設計思想）。那麼dom和var同屬於M層，手裏有了磚頭[蓋房子的基本單位]，接下來就該考慮的是如何讓這些磚頭組織起來，也能夠理解成爲讓這些磚頭之間發生關係，動起來。

從客戶角度來說，於電腦交互靠鼠標，就容易想到鼠標的兩個操做，點擊和移動，對應兩個最經常使用的事件click和mouseover

$("button").click(function(){執行的代碼}) 這段代碼的含義是點擊了按鈕觸發了一個函數(這個函數若是隻用於點擊就不用起名字了，相似於匿名函數)，完整的代碼是這樣子的，$(document).ready是瀏覽器打開頁面時執行的第一段代碼：

<script type="text/javascript" >
 $(document).ready(function () {
 $("#mm").click(function () {
 alert("123")
 })
 })

</script>

若是好多事件都用到了一個函數那麼能夠這麼幹，onclick="a()"是指點擊按鈕時觸發的事件：

<script type="text/javascript" >
 function a() {
 alert("nihao a")
 }
</script>

<input type="button" id="mm" onclick="a()">
一個經典的jquery代碼的兩種寫法到此完成，它實現的功能是，點擊按鈕彈出一個你好啊的對話框，以後能夠在這基礎上動一些小手腳，好比添加一段1000毫秒的動畫，點擊按鈕以後，讓一個畫布(div)鋪滿整個屏幕，伸縮，淡出，顯示指定的文字等等....除此以外還能發送ajax請求，所謂的ajax（異步消息處理）,通俗地講就是區別於傳統TCP交互方式【同步處理】，傳統方式的一個典型例子是發送一個request,回傳response以後刷新整個頁面，對於某些請求（如只需改動頁面某一數據）因爲消耗資源太大，就發明了異步消息處理（回顧一下同步和異步，通俗地講同步就是A喊B吃飯，A只有在獲得B的迴應以後才能作別的事情，異步中A只發送消息，而沒必要等待B的迴應），在不刷新整個頁面的條件下獲得了響應，發送和獲得的數據格式能夠是json樣式的

四碎碎唸的回顧

這一部分主要是對一些零散的知識點作一些回顧，代碼基本上都本身跑了一遍，看着效果也會有成就感，主要複習jquery的雞零狗碎（理解了思想以後其實到這裏就好像記單詞，我從w3c上面扒下來一些散碎，就像字典一個留個索引，方便之後用的時候回顧），也會穿插一點json,ajax，學習的時候注意推廣着想(如對象-》數組對象；獲取css的一個屬性-》獲取css的多個屬性-》修改css的多個屬性,下拉-》上拉-》動畫時間，快慢-》能不能寫一個回調函數?)

4.1語法

<head>
<script src="jquery-1.4.2.min.js"></script>
</head>
在head裏引入jquery庫

語法：
$(this).hide()
$(selector).action() 美圓符表明jquery,選擇符selector查詢和查找html元素，action()執行對元素操做

　$(document).ready(function(){...});
　選擇器：$("p#demo")選取全部id=demo的<p>元素$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素$("p").css("background-color","red");選取全部指定樣式的元素

4.2效果（效果均可以加入callback做爲參數，即回調函數【執行完效果後執行回調函數】）

　　hide(),隱藏；show(),顯示；toggle()隱藏的變成顯示的，顯示的變成隱藏的

　　fadein(),淡入（漸漸顯示隱藏的元素）;fadeout,淡出；fadetoggle,fadeto("slow",0.7) 快慢，透明度

　　$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });

　　animate:執行動畫

　　$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); })

　　上面這行代碼執行了2個動畫

　　stop:中止動畫

　　$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });

　　在執行漸隱以後回調無名函數

　　$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);

　　改變樣式以後執行了兩段函數

4.3 jquery和html

text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值--主要是輸入框標籤的內容

裏面的內容也能夠設置:$("#p1").html("<p>"+我是一段文本+"</p>")

$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

拿到舊文本，在回調函數中顯示

attr屬性

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
})
改變連接的內容

4.4添加

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容
before() - 在被選元素以前插入內容

$("p").prepend("Some prepended text.");

4.5刪除

remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

$("p").remove(".italic");
上面的例子刪除 class="italic" 的全部 <p> 元素：

4.6jquery和css
範例：

.important
{
font-weight:bold;
font-size:xx-large;
}

$("div").addClass("important");

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操做
css() - 設置或返回樣式屬性

　　設置了p的新樣式

$("p").css({"background-color":"yellow","font-size":"200%"});
　　尺寸

width()
height()

　　$("#div1").width()返回了畫布的寬度

4.7jquery遍歷

dom就像一個家族，經過血脈能夠找到每一位成員

向上的 parent,parents,parentsUntil("mm")介於之間的元素

向下的 children,children("p.1")類爲1的p元素，find("span")介於之間的

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil(）

全部同胞，下一個同胞，下一個全部同胞，到某一元素的全部同胞

first,last,eq,filter(".intro"),not五大過濾器，好像都是先選到元素再過濾的

 $("p").not(".intro");不是intro類的p元素

4.8 AJAX

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});
讓div1載入了demo_test的內容，回調是一個格式，xhr封裝了response的header,成功，返回200和success,statusTxt則是真正的返回值

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
關鍵點:url（像誰請求，去哪?）,data(數據，key-value形式的)，回饋(data,狀態[成功？失敗])

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
交互代碼，拿東西，處理，返回

noconflic做爲處理$表達式符號做爲其餘框架關鍵字時候的衝突，不多見，到用的時候再百度吧


5

最後頭腦中遺留一個問題，js的弱類型實現依賴了什麼機制？爲何申請的var可以包容全部的類型？有大神能從原理方面或者是var的來歷方面解讀一下就太感謝啦！

您的點贊是對我前進道路上的鼓勵，感謝閱讀！若是轉載，請註明出處，謝謝！