1. 程式人生 > >一,零基礎學習JavaScript-JavaScript簡介(0)

一,零基礎學習JavaScript-JavaScript簡介(0)

**

一、簡單好學,富有表現力 —— JavaScript簡介

1.1 JavaScript的用途

JavaScript用來製作web頁面互動效果,提升使用者體驗。

簡單列出幾個JavaScript能夠製作的頁面效果,它能幹什麼:

輪播圖 Tab欄(選項卡) 地圖 表單驗證
例子1:那些JavaScript能做出的頁面效果,我們首先想到的是輪播圖,它具有淡入淡出的效果,這些效果都是用JavaScript編寫的 例子2:其次的是tab欄(選項卡)當點選選項,下面內容也相應變化 例子3:攜程的地圖,滑鼠移動到酒店名稱,地圖給出相應提示資訊 例子4:表單驗證,當輸入不符合郵箱標準,出現提示資訊

web前端三層來說:

層次 角度 作用
結構層 HTML 從語義的角度, 描述頁面結構
樣式層 CSS 從審美的角度, 美化頁面
行為層 JavaScript 從互動的角度, 提升使用者體驗

1.2 JavaScript歷史背景介紹

布蘭登·艾奇
        布蘭登·艾奇(Brendan Eich,1961年~),1995年在網景公司,發明的JavaScript。
一開始JavaScript叫做LiveScript,但是由於當時Java這個語言特別火,所以為了傍大牌,就改名為JavaScript。如同“北大”和“北大青鳥”的關係。“北大青鳥”就是傍“北大”大牌。
同時期還有其他的網頁語言,比如VBScript、JScript等等,但是後來都被JavaScript打敗,所以現在的瀏覽器中,只執行一種指令碼語言就是JavaScript。

1.3 JavaScript和ECMAScript的關係

     ECMAScript是一種由Ecma國際前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association,制定的標準。
        JavaScript是由公司開發而成的,公司開發而成的一定是有一些問題,不便於其他的公司拓展和使用。所以歐洲的這個ECMA的組織,牽頭制定JavaScript的標準,取名為ECMAScript。
       簡單來說ECMAScript不是一門語言,而是一個標準。符合這個標準的比較常見的有:JavaScript、Action Script(Flash中用的語言)。就是說,你JavaScript學完了,Flash中的程式也會寫了。
       ECMAScript在2015年6月,釋出了ECMAScript 6版本,語言的能力更強。但是,瀏覽器的廠商不能那麼快的去追上這個標準。這些新的特性,我們就業班的深入,也會給大家介紹。

1.4 今天的JavaScript:承擔更多責任

        2003年之前,JavaScript被認為“牛皮鮮”,用來製作頁面上的廣告,彈窗、漂浮的廣告。什麼東西讓人煩,什麼東西就是JavaScript開發的。所以瀏覽器就推出了遮蔽廣告功能。
        **2004年**JavaScript命運開始改變了,那一年穀歌公司,開始帶頭使用Ajax技術了,Ajax技術就是JavaScript的一個應用。並且,那時候人們逐漸開始提升使用者體驗了。
這裡寫圖片描述
百度的智慧感應
再比如:
這裡寫圖片描述
網易的Ajax驗證

       2007年喬布斯釋出了iPhone,這一年開始,使用者就多了上網的途徑,就是用移動裝置上網。
       JavaScript在移動頁面中,也是不可或缺的。並且這一年,網際網路開始標準化,按照W3C規則三層分離,人們越來越重視JavaScript了。
這裡寫圖片描述
聚划算的手機頁面
       2010年的時候,人們更加了解HTML5技術了,HTML5推出了一個東西叫做Canvas(畫布),工程師可以在Canvas上進行遊戲製作,利用的就是JavaScript。
這裡寫圖片描述
      canvas製作的水果忍者

       2011年,Node.js誕生,使JavaScript能夠開發伺服器程式了。
    這裡寫圖片描述

       今天,JavaScript工程師是絕對的吃香,能夠和iOS、Android工程師比肩,毫不遜色的。
       現在,公司都流行WebApp,就是用網頁技術開發手機應用。什麼意思呢?手機系統有iOS、安卓、windows phone。那麼公司比如說開發一個“攜程網”APP,就需要招聘三隊人馬,比如iOS工程師10人,安卓工程師10人,windows工程師10人。共30人,工資開銷大。並且,如果要改版,要改3個版本。所以,現在公司,都用web技術,用html+css+javascript技術來開發app。好處是不用招聘那麼多工程師,只需要幾個前端開發工程師即可。並且也易於迭代,就是網頁一改變,所有的終端都變了。

1.5 JavaScript非常好學

        JavaScript在“對初學者友好的語言”排行榜中排名第一。

        JavaScript是有介面效果的,比如你學習C語言,對不起,白底黑字。而JavaScript有絢麗的效果,效果是可見的。你的勞動,是真真正正有效果啊。

        JavaScript是弱變數型別的語言,變數只需要用var來宣告。Java中變數的宣告,要根據變數是什麼型別的來宣告:

1 int a;
2 float a;
3 double a;
4 String a;
5 boolean a;

      JavaScript中,只用一個:

1 var a;

      JavaScript不用關心一些其他的事情,比如記憶體的釋放,指標。程式設計師只需要關心自己的業務,不需要關係這些雞毛蒜皮的破事兒。

1.6 我們的教程

JavaScript分為幾個部分:

語言核心 - 基礎只學習語言核心,變數、表示式、運算子、函式、if語句、for語句

DOM -以後會學習,就是控制HTML中的元素,比如讓盒子移動、變色、輪播圖。DOM是啥,以後會學習。

BOM - 以後會學習,就是控制瀏覽器的一些東西,比如讓瀏覽器自動滾動。BOM是啥,以後會學習。

JavaScript的學習方法和HTML、CSS有著非常大的區別:

● 要多去“品”程式,多去思考內在邏輯。 HTML、CSS好比富士康,人力密集型;JS好比發條手錶,很精密,令人嘖嘖稱奇。

● JS機械重複性的勞動幾乎為0,基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重複勞動。

● 永遠不要背程式,每一個程式都必須自己會寫。今後有一個隱性作業,重每一個案例。

      我們的基礎的JS課程,最大的目的就是讓純小白,純0基礎的同學體驗到什麼是程式設計、什麼是邏輯,如何程式設計,程式設計如何思維?程式設計的樂趣。所以,我們JS基礎,不介紹細枝末節的東西,以後再說。換句話說,基礎的知識,就是應該會的一些皮毛。一些奇怪的東西,基礎不介紹比如:

1 13 + true;
1 13 && true;

這些東西,隨著以後慢慢深入,都會介紹。最後能成為JS的面試專家。

二、JavaScript是前臺語言,而不是後臺語言

這裡寫圖片描述
      JavaScript執行在客戶的電腦裡面,而不是伺服器上,所以我們稱為“前臺語言”。JavaScript就是一個簡單的製作頁面效果的語言,不能操作資料庫。就是服務於頁面的互動效果、美化、絢麗。
      “後臺語言”是執行在伺服器上的,比如PHP、ASP、JSP等等,這些語言都能夠操作資料庫,都能夠對資料庫進行“增刪改查”操作。
(Node.js除外,先別管Node.js是什麼)。

比如一個圖書館,要開發“圖書借閱程式”,能夠記錄每個學生借了什麼書,有沒有按時歸還,不能用JS開發!因為,設計資料庫的資料記錄。

比如,一個公司要開發“訂餐系統”,每天上午11:00統計所有的員工想吃什麼?不能用JS開發。因為涉及資料庫的資料記錄。

比如,一個公司的網頁想要做的漂亮、有互動效果,絢麗。用JS開發。

未完待續~~~~

相關推薦

基礎學習JavaScript-JavaScript簡介0

** 一、簡單好學,富有表現力 —— JavaScript簡介 1.1 JavaScript的用途 JavaScript用來製作web頁面互動效果,提升使用者體驗。 簡單列出幾個JavaScript能夠製作的頁面效果,它能幹什麼: 輪

Swift教程_基礎學習Swift完整例項_swift基礎簡單值、控制流、方法和閉包

三、Swift基礎介紹 本章將對Swift做一個簡單說明,內容取自《The Swift Programming Language》,並加之自己的理解。首先swift全域性作用域中的程式碼會被自動當做程

Swift教程_基礎學習Swift完整例項_swift完整例項構建展示層

本章節主要來完善前前面已經建立好的storyboard中的頁面,包括自定義的view等。 1.PKOElementTableViewCell 該自定義view作為列表的行view,包含左側的圖片以及中間的文字描述。這裡要注意需要通過setNeedsDisplay告訴系統進行繪製。 程式碼如下。 import

Swift教程_基礎學習Swift完整例項_總結

五、總結 加上寫博文的時間,用了前前後後一週左右的時間,每晚2小時左右,完成了這個改造,由於我是第一次碰swift,有些東西還用不順手,用時比較長。期間還簡單學習了一下swift基本語法和部分用法。

Swift教程_基礎學習Swift完整例項_swift完整例項新增View的動畫效果、新增View的陰影

6.新增View的動畫效果 本章節主要來做明細頁面點選後翻轉的動畫效果,該效果可以進行多種改變,以達到想要的效果。 1.首先我們需要進行翻轉的正反兩個view,前面我們已經做好了,分別是PKOElementDetailImageView和PKOElementDetailIm

Swift教程_基礎學習Swift完整例項_swift例項簡介

一、文章簡介 本人最近開始學習有關Swift這個新東東,由於沒有專案支撐,只能通過官方文件進行自學,精簡的看了Swift官方文件,感覺理解起來還是比較簡單,於是突發奇想,想把官方object-c的sa

開始學習比特幣--P2P網路建立的流程之查詢DNS節點

上節開始我們已經開始講解比特幣系統中P2P網路是如何建立的。還記得在比特幣系統啟動的的第12步的講解中,我們提到有幾個執行緒相關的處理非常重要嗎?以下內容正是基於此做了詳細的講解。由於篇幅過長,我們分幾篇文章依次道來。 P2P 網路的建立是在比特幣系統啟動的第 12 步,最後時刻呼叫 C

開始學習比特幣--P2P網路建立的流程之套接字的讀取和傳送

寫在前面: 本篇文章接續 從零開始學習比特幣開發(四)–網路初始化,載入區塊鏈和錢包,匯入區塊啟動節點 從零開始學習區塊鏈技術(三)-接入比特幣網路的關鍵步驟解析、建立比特幣錢包,以及重要rpc指令 從零開始學習區塊鏈技術(二)–如何接入比特幣網路以及其原理分析 從零開始學習

Python基礎學習---類與方法

1 #!/usr/bin/python3 class MyClass: """一個簡單的類例項""" i = 12345 def f(self): return 'hello world' # 例項化類 x = MyClass() #

Python基礎學習---運算子和字串

1 #!/usr/bin/python3 a = 21 b = 10 c = 0 if ( a == b ): print ("1 - a 等於 b") else: print ("1 - a 不等於 b") if ( a != b ): print ("2

前端基礎學習筆記 選擇器高階

組合選擇器的優先順序 比較優先順序時,保證精準控制到了元素 比較id選擇器,如果id多,那優先順序高 id選擇器一樣多時,比較class選擇器,class多的則優先順序高 class如果相等,比較標籤選擇器,標籤選擇器多則優先順序高 偽類選擇器,如hover,優先順

線下工坊|Blockchain Coding Day:基礎教你開發DAPP北京

我們的目標是通過程式設計學習讓你更瞭解區塊鏈技術。這將對區塊鏈開發初學者一次很好的體驗。這裡需要強調一下,程式設計零基礎也能學會。 我們將以小組的形式,由教練帶領學員完成DAPP開發。每位學員在指導下自主完成程式開發任務,結束後會得到一個自己的DAPP: 本次活動的開發基於Nervos的Appchain

開始學習Kinect程式設計筆記 4.23

睡到中午11點半才起來 orz 中午又吃太多了,什麼時候才能到155啊!! 昨天寫到環境配置 配置完之後可以開始程式設計了 下面這些是轉載別人的文章程式碼 #include <windows.h> #include <iostream>

在上網時出現Javascript:void0網頁沒有反應

從上上週開始發現寫CSDN部落格的時候網頁沒有反應,而且在個人分類這沒有顯示分類的類別,除了能進去這個頁面其他的啥也操作不了。 網頁左下角顯示Javascript:void(0),如圖所示 後來查的

javaScript:void0含義

javascript:void(0) 中最關鍵的是 void 關鍵字, void 是 JavaScript 中非常重要的關鍵字,該操作符指定要計算一個表示式但是不返回值。 語法格式如下: <head> <script type="text/javascr

關於連結地址為JavaScript:void0的問題

我們在點選超連結時,經常發現有的超連結左下角顯示的為javascript:void(0)的情況,這種情況主要說明此處的超連結主要目的不是為了連線到某處,而是為了要超連結onclick裡的function,例如: <a href="javascript

百度雲網盤下載無反應javascript:void0救急辦法

點選百度雲網盤普通下載的時候經常出現沒反應 提示javascript:void(0) 以下是應急辦法: 1.儲存到自己的百度網盤 2.嘗試下載,不行繼續 3.選擇一個能下載的,跟目標檔案合併下載

造輪子:搭建一個簡單的nodejs伺服器開始搭建一個自用網站0

伺服器用的是阿里雲最早期的伺服器低配版本1Gcpu,512M記憶體,20G硬碟,1M頻寬,平常只是用來做測試,目前只處理業務邏輯,網站的設計上儘量避免佔用太多的頻寬, 靜態檔案的儲存用的是阿里雲oss,100G空間,夠放視訊,圖片什麼的, html/js/c

開始學習區塊鏈技術--如何接入比特幣網路以及其原理分析

如何接入比特幣網路以及原理分析 1、如何接入比特幣網路? 其實接入比特幣網路是非常簡單的,我說了你一定不信,啟動比特幣客戶端即可: 在命令列終端輸入啟動命令:./src/bitcoind -testnet 輸入之後會有一個和網路同步資料的過程,

iOS開發基礎學習筆記——標籤欄UITabBar

一、     物件的建立(可用程式碼,也可以使用IB)                         記得對標籤設定標記Tag,使用的時候按照Tag值呼叫                         可以通過設定SelectedItem屬性,選擇預設選中的標籤(檢