JavaEE 之 網頁腳本技術 JavaScript

資料 ? 青牛 ? 于 2019-06-28 14:53:37 ? 最后回復由 海牛部落 2019-06-28 15:12:35 ? 597 閱讀

2.1 JavaScript概述

之前我們學習了HTML可以在網頁展示數據,又學習了CSS樣式能夠一定程度上美化我們的頁面,但是大家要注意一 個問題就是我們學習頁面的目的是為了讓他更好的幫助我們

進行數據的處理,所以你光靠展示數據肯定是不夠的,你還得讓你的頁面有數據上的交互才能完成我們在頁面上進行 數據的添加刪除修改和查詢操作;

所以現在問題又來了,固定寫死的頁面怎么能讓他"動"起來呢?

這時你就需要用到JavaScript技術了;

2.1.1 什么是JavaScript?

JavaScript是一種基于對象和事件驅動的、并具有安全性能的腳本語言;

有面向對象的特性

什么是事件驅動 :本身擁有這個功能 但是 必須由外界事件觸發 才能執行這個功能;

比如說頁面有一個按鈕,它的單擊事件我們已經編寫好了,但是必須等這個按鈕單擊的時候才能夠執行這個那個功 能,這個就是事件驅動;

2.1.2 JavaScript特點

  1. 向HTML頁面中添加交互行為

  2. 腳本語言,語法和Java類似

  3. 解釋性語言,邊執行邊解釋

2.1.3 JavaScript的基礎結構
file
它和CSS一樣都要寫到head標簽中,不同的時候CSS是style(樣式)標簽,而JavaScript是script(腳本)標簽

2.1.4 入門小程序

在頁面中添加如下代碼:
file
運行頁面的時候會出現如下效果:
file
頁面會彈出一個窗口,所以此處的alert("要輸出的內容")就是一個腳本語言,對應的功能就是頁面彈窗展示某段文字
2.2 JavaScript入門

2.2.1 js的引用方法

js和css一樣有三種引用方法

2.2.1.1 行內引用

代碼 :
file
大家注意一個問題:此處使用了標簽的 onclick 屬性,這個屬性表示當單擊這個標簽的時候會發生什么事情;

那會發生什么事情呢?就是后面的javascript:alert()這個時間了,其中 javascript: 固定前綴代表要開始寫js代碼了

后面的alert() 這個就是js代碼;

這種js的寫法是行內JS優缺點和行內CSS一樣;

而且大部分的標簽都有 單擊事件 不是按鈕獨有的

2.2.1.2 內部引用

和內部CSS一樣是用script標簽統一寫到頁面中的
file
2.2.1.3 外部引用

file
這種是最常用的引入JS的方式,將寫好的js代碼放入一個后綴名為.js的文件中,然后通過引用的方式引入html里,這樣又美觀而且還不互相影響;

引用JS文件的時候必須是雙標簽引用 ,如果不是雙標簽頁面肯定會報錯

2.3 JavaScript編程基礎

在編寫JavaScript腳本的時候和我們編寫java代碼一樣,需要了解其核心代碼語法,我們在學習js的時候應該關注以 下內容:
file
2.3.1 核心語法詳解

2.3.1.1 定義注釋

  1. 單行注釋 : 單行注釋以 // 開始,以行末結束

  2. 多行注釋 : 多行注釋以 / 開始,以 / 結束,符號 /…… / 指示中間的語句是該程序中的注釋
    file
    2.3.1.2 定義變量

語法 :
var 變量名稱 = 變量的值;

比如:
file
此處大家要記住,js定義的變量類型只有一個var(弱類型),它的解析規則是等號后面的值是什么類型var就變成什么 類型(這個應用起來還是很方便的)

但是如果var是這么一個var的話,那這里就存在一個bug,如果我不給str賦值那么str這個變量將會是什么類型呢?

代碼:
file
運行代碼 :

file
str變成了undefined類型,這是個啥類型呢?那么這里我們就要說說JS的數據類型了

file
根據上圖我們可以知道,雖然js聲明變量的時候只有一個var 但是其實它也是可以區分出很多數據類型的;

但是又有問題 : 定義一個變量是這么定義,如果定義一個數組怎么定義呢?

定義數組的語法:

var 變量名稱 = new Array();

或者

var 變量名稱 = [值1,值2,值3,值4....]

這個比較類似以Java中ArrayList集合的使用

比如:
file
直接效果:

file
JS語法和java差不了多少,因為JavaScript就是把java代碼轉移到頁面去寫而已,不教你遍歷一下這個數組;

for循環的用法:

file
怎么樣是不是很像,就連數組的length屬性都是一模一樣,所以學習完javaSE之后其實學js一點都不難;

數組除了有length屬性外,還有一些方法需要大家記住:
file
代碼 :

添加元素
file
效果:

file
排序 :

file
效果:

file
注意:

sort()方法默認按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現

這一點,首先應把數組的元素都轉換成字符串(如有必要),以便進行比較。

椰子的UTF-8編碼是 椰子

蘋果的UTF-8編碼是 蘋果

香蕉的UTF-8編碼是 香蕉

鴨梨的UTF-8編碼是 鴨梨

我們驗證一下 : 比如添加一個荔枝 UTF-8編碼 荔枝

添加之后排序應該是在蘋果的下面 香蕉的上面

代碼:
file
效果 :

file
數組轉字符串:

file
效果:

file
字符轉UTF-8編碼網站

UTF-8 轉換工具 - 站長工具

2.4 JSON(非常重要)

剛才我們定義了變量,知道了數據類型,也定義了數組并且也遍歷了數組,那么這時候就會產生一個疑問,定義一個變 量可以了,那怎么定義一個對象呢?

問題 : 假設有兩個人
1 孫建國 男 24歲 北京市人
2 趙文明 男 24歲 河北省人

需要你用js將這兩個人的息定義出來;

要解決這個問題不簡單,如果說在java時期你看到這樣的數據一定會先想到定義一個person類然后創建id(編 號)name(姓名) sex(性別)age(年齡)from(籍貫)這些屬性
file
定義好類直接new對象保存到一個數組,齊活;

file
結果 :

file
看完這個結果我們瑟瑟發抖,Java可以定義類保存對象,JS定義啥保存對象呢?

回答 : JS定義JSON來保存對象!

2.4.1 什么是JSON?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

要求 符合 以下特性的數據 才叫做json

{key:val,key:val}

JSON為什么那么重要?因為它是頁面中OOP思想的體現

如果要保存這個人員類下的一個對象的話

1 孫建國 男 24歲 北京市人

var obj = {"id":1,"name":"趙文 明","sex":"男","age":24,"from":"北京市"}

通過以上的定義我們可以發現,JS中定義對象是定義與賦值一起進行的,就是因為它又方便又面向對象,所以JSON這種數據格式才被 前段人員廣泛使用

JSON是Douglas Crockford在2001年開始推廣使用的數據格式,在2005年-2006年正式成為主流的數據格式,雅虎和谷歌就在 那時候開始廣泛地使用JSON格式。

2.4.2 JSON入門使用

在 JS 語言中,一切都是對象。

因此,任何支持的類型都可以通過 JSON 來表示,例如字符串、數字、對象、數組等。

但是對象和數組是比較特殊且常用的兩種類型:

對象表示為鍵值對

數據由逗號分隔

花括號保存對象

方括號保存數組

其實說白了JSON就是JavaScript中用于定義對象的一種數據格式
JSON存儲的對象,而不是單個變量的值!

打個比方,比如存儲一個Person類的對象
Person p = new Person();

設置屬性
p.setId(1);
......

設置屬性的時候其實大家可以看到 是 屬性名稱 然后對應一個值, 如果我們把屬性名稱看成是鍵然后值就看成是值的話就得到了 JSON對象的定義

JSON定義一個對象
file
JSON定義時候需要注意

JSON中如果key的值是簡單類型,比如數字(整數和浮點),boolean類型,這時可以不用加 "", 如果是字符串是必要要 加 "" 的!

JSON定義單個對象
file
JSON定義一個數組

file
調用數組里元素的屬性值

file
2.4.3 JSON入門小結

2.4.3.1 JSON數據格式總結
file
跨時代的意義 : 彌補了JavaScript中不能定義類的遺憾,有了JSON,JavaScript就能更好的發揮編程語言的工作完成

更多的功能,逐漸超過java超過Python超過大數據成為No1,當然這是不太現實的........

2.4.3.2 JSON定義總結

通過上面的定義不難發現,JSON的這種數據格式類似于map形式的key/val形式的存儲

在定義JSON的時候需要注意以下幾點

  1. {} 代表是一個JSON對象

  2. 所有的字符都必須帶雙引號 ""

  3. 每個屬性都是 key : val 的形式

那我們定義完了一個JSON對象怎么定義一個JSON數組呢?

非常簡單!

JSON數組的定義

var arrays = [{JSON對象1},{JSON對象2}.........]

2.4.4 JSON入門練習

用JSON保存這兩個人并輸出他們的息 1 孫建國 男 24歲 北京市人

2 趙文明 男 24歲 河北省人

代碼實現 :
file
效果

file
2.5 JavaScript分支結構

業務需求 : 接收頁面輸入的數字,判斷是奇數還是偶數
file
上面的代碼中有一個 prompt(提示語句,默認值); 這個方法,它是干嘛的呢?

它可以接收用戶輸入哦!
file
2.6 JavaScript調錯

2.6.1 Chrome開發人員工具(F12打開開發人員工具)

file
2.7 JavaScript函數

2.7.1 JS函數的定義

上面的代碼編寫起來好是好,但是也會出現一個問題,就是這些代碼好比我們寫的測試類,每次測試還可以,如果完成 功能的話那就很尷尬了,比說如我想單擊某個按鈕執行什么操作,現在的JS是辦不到的!

那么怎么才能都讓JS幫助我們完成更多的事情呢?這時你就要學習JS函數的定義了;

2.7.1.1 什么是函數?

函數(function),最早由中國清朝數學家李善蘭翻譯,出于其著作《代數學》。之所以這么翻譯,他給出的原因是“凡此變數 中函彼變數者,則此為彼之函數”,也即函數指一個量隨著另一個量的變化而變化,或者說一個量中包含另一個量。

函數的定義通常分為傳統定義和近代定義,函數的兩個定義本質是相同的,只是敘述概念的出發點不同,傳統定義是從運動變化 的觀點出發,而近代定義是從集合、映射的觀點出發。

JS函數就是Java中的方法,可以寫帶參數的 也可以寫不帶參數的,而且需要注意的就是因為JS中沒有類型一說(都是 var)所以定義函數的時候返回值類型 和 參數類型都不需要定義

2.7.1.2 語法規則
file
2.7.1.3 舉例 : 定義無參函數

業務需求 : 點擊一個按鈕輸出Hello,JavaScript!

代碼:

file
效果:

file
2.7.1.4 舉例 : 定義有參函數

需求 : 點擊按鈕計算 1+1=?

代碼 :file
效果
file
需求 : 傳輸 姓 和 名進行拼接輸出

代碼 :

file
效果 :

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36798
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 1
暫無評論~~
  • 請注意單詞拼寫,以及中英文排版,參考此頁
  • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
  • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
  • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
  • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
Ctrl+Enter
江西快三下期预测 浙江体育彩票20选5 二分彩呿 qq股票怎么玩 微乐吉林麻将手机版 天天捕鱼电玩城下上分 安徽快3开奖软件 精准平特二尾连高手榜 福彩快乐8玩法 20选5历史开奖 幸运赛车官网