Java-JavaWeb-JavaScript

時間 2020-05-06

標籤 java javaweb javascript 欄目 Java 简体版

原文原文鏈接

概述
- 基於對象（與Java的面向對象不一樣）和事件驅動的語言，應用於客戶端（瀏覽器）
- 交互性、安全性（不能訪問本地磁盤）、跨平臺性
- 弱類型
- 3個組成部分
  - ECMAScript
    - ECMA:歐洲計算機協會
  - BOM
    - 瀏覽器對象模型
  - DOM
    - 文檔對象模型
Js和html的結合方式
- 使用標籤<script type="text/javascript">Js代碼</script>
- 引入文件<script type="text/javascript" src="1.js"></script>
  - 標籤裏就不要寫Js代碼了，不會執行
Js的註釋
- 單行：//單行註釋
- 多行：/*多行註釋*/
Js的數據類型
- 定義變量：
  - var 變量名=值；
- string
- number
  - 數字類型
  - 不區分整數和小數
- boolean
- null
  - 對象引用爲空
- undifined
  - 變量未賦值
- typeof(變量名)
  - 能夠查看變量的類型
語句
- if
  - 和java中一致
- switch同Java同樣，只是Js中支持全部的數據類型
- while(){}同Java同樣
- for循環同Java同樣，只是變量定義時要使用var
- document.write("xx");
  - 能夠寫HTML代碼：document.write("<br/>")
    - 若須要寫標籤內的屬性的話，須要使用單引號
運算符
- 字符串操做
  - "12"+1 結果是"121"
  - "12"-1 結果是11
- boolean類型的運算
  - true在運算時至關於1，false至關於0
- ===和==的區別
  - ===
    - 比較值和類型
  - ==
    - 只比較值
數組
- 特色
  - 角標從0開始
  - 能夠從存放不一樣的數據類型
  - 長度是可變的
- 定義
  - var a=[1,3,4];
  - var a=new Array(5);
    - 定義一個長度爲5的數組
  - var a=new Array(2,5,6);
    - 直接將數組中的元素一塊兒給出
- 數組長度屬性
  - arr.length
- 方法
  - concat()
    - 鏈接2個數組
  - join()
    - 將數組元素放入字符串，按照指定的字符分隔元素
  - push()
    - 向數組末尾添加元素，而且會返回新的數組的長度
    - 參數能夠是新的元素，也能夠是另外一個數組（這種狀況會將這個數組看成一個總體添加）
  - pop()
    - 刪除並返回最後一個元素
  - reverse()
方法
- 建立方法：
  - 一：function 方法名（參數列表）{方法體}
    - 返回值無關緊要
    - 參數列表中不寫var，直接寫變量名
  - 二：var f =function (參數列表){方法體}
  - 三：使用js的內置對象Function
    - var a =new Function("參數列表","方法體");
- js中不存在重載
  - 會調用最後一個
  - 函數會將參數傳給arguments這個數組中！因此能夠經過操做arguments的每個元素類模擬實現重載。
  - 當傳入的參數個數超過了函數定義的時候定義的參數數量，這些超出的參數同樣會被傳入arguments這個數組中。就算定義的時候沒有寫參數列表，也是如此
局部變量和全局變量
- <script></script>標籤內定義的變量是全局變量，在別的<script>標籤中也能夠訪問
- 方法內部定義的，只能在方法內部訪問
<script>標籤的位置
- 建議放在<body></body>標籤的後面，若放在<body>標籤以前，是沒法獲取到<body>中某些標籤中的屬性值的
String對象
- 定義
  - var str="abc";
- 屬性
  - length
- 方法
  - str.bold()\fontcolor()\fontsize()等
  - str.link(url) 將字符串顯示爲超連接
  - sup()\sub()
  - 與Java類似的一些方法
    - concat()方法，將2個字符串進行鏈接
    - charAt(index)
    - indexOf()
    - split()
    - replace()
    - substr()
    - substring()
Date對象
- var date=new Date();
- 方法
  - toLocaleString() //Java中也有這個方法
    - 以本地日期格式顯示
  - getFullYear()
    - 獲得年字段
  - getMonth()
    - 返回0-11月份
  - getDay()
    - 返回一週中的某一天，0-6，星期天是0
  - getDate()
    - 返回月中的某一天，1-31
  - getHours()\getMinutes()\getSeconds()
  - getTime()
    - 返回19700101至今的毫秒數
Math對象
- 都是靜態方法，使用類名調用：Math.sin()
- ceil()\floor()\round()
全局函數
- Js中不屬於任意一個類的一些方法，這些方法不須要對象去調用，直接使用函數名調用
- eval(str)
  - str表示一行Js代碼，這個方法能夠執行str這行代碼
- encodeURI()\decodeURI()
  - 對字符進行編碼、解碼
- isNaN()
  - 判斷是否不是數字，是數字的話，則返回false
- parseInt()
  - 將字符串轉成數字
BOM
- browser object model瀏覽器對象模型
- navigator對象
  - 用於獲取客戶機瀏覽器信息
  - 屬性
    - navigator.appName\\瀏覽器名稱
- screen對象
  - 用於獲取屏幕信息
  - 屬性
    - screen.width
    - screen.height
- location對象
  - location.href
    - 獲取、設置URL地址
    - location.href="1.html";
    - 案例：定義一個按鈕，當點擊時，調轉是指定頁面
      - <input type="button" value="跳轉至。。" onclick="href();"/> \\onclick屬性用於定義鼠標點擊事件，這裏這個事件會觸發href()函數的調用
      - function href(){ location.href="hello.html";} \\觸發事件會跳轉至hello.html
- history對象
  - 請求的URL的歷史
  - history.back()
  - history.forward()
- window對象
  - 頂層對象，其中的方法能夠直接調用，例如alert()
  - navigator\screen等都是它的子對象
  - 屬性
    - opener
      - 獲取建立了本窗口的上一個窗口的引用
  - 方法
    - alert()
    - confirm(參數)
      - 提供一個確認\取消的對話框，用戶點擊確認\取消後會返回true\false
      - 參數：要顯示的內容
    - prompt()
      - 輸入對話框
    - open()
      - 打開一個新的窗口
    - close()兼容性差
    - setInterval()
      - setInterval("alert('123');",3000)
        
        每隔3秒alert一次123
        
        會返回一個該方法的id，該id能夠用來做爲clearInterval()的參數
    - setTimeout("js代碼",毫秒數)
      - 毫秒數以後，執行代碼，只執行一次
    - clearInterval()\clearTimeout()清楚間隔器和計時器
DOM
- 概述
  - document object model 文檔對象模型
  - 提供一些對象和方法，對html\xml等文檔進行操做
  - DOM將標籤，屬性，文本等全都封裝爲對象，這些對象的父對象是node節點對象
  - DOM如何解析HTML文檔
    - 根據HTML的層級結構，在內存中分配一個樹形結構
    - 樹形結構有且只有一個根節點，其餘包括子節點/葉子節點
  - DOM包括：document對象/element（標籤）對象/屬性對象/文本對象/Node節點對象（全部對象的父對象）
  - DHTML
    - 多種技術的結合：html\css\javascript\dom(dom屬於javascript)
- document對象
  - 表示整個文檔
  - 方法
    - write()
    - getElementById()
      - 根據ID獲取某個標籤、能夠經過這個標籤變量設置其屬性
    - getElementsByName()
      - 返回一個符合條件的標籤的集合
    - getElementsByTagName()
      - 返回的是一個集合
      - 當符合條件的tag只有一個的時候，返回的還是數組，不過長度是1
      - 當須要獲取某一個標籤的全部子標籤時，推薦使用這個方法，它雖然是document對象的方法，但仍可使用標籤對象去調用
    - createElement("標籤名稱");
      - 建立一個標籤
    - createTextNode("文本內容");
      - 建立文本
    - appendChild()
      - 將某元素添加到另外一個元素的子節點上，添加至末尾
- Element對象
  - 經過getElementById()獲取到標籤對象後，能夠：
    - getAttribute()\setAtrribute()方法，訪問修改標籤的屬性
    - removeAttribute()
- Node對象
  - Node節點的3個屬性，對於每個Node（標籤、屬性、文本）都具備：
    - nodeType
    - nodeName
    - nodeValue
    - 獲取Node節點的方法
      - getAttributeNode()
      - 屬性：firstChild
  - 子節點
    - 屬性：childNodes
      - 某一個節點的子節點們，瀏覽器的兼容性差
      - 這裏指的是標籤節點
    - firstChild
    - lastChild
  - 父節點
    - 屬性：parentNode
  - 同輩節點
    - nextSibling
    - previousSibling
  - 操做DOM樹
    - appedChild()
      - 在末尾添加子節點
      - 特色：相似剪切+粘貼（將插入的節點，會被從原位置刪除）
    - insertBefore(newNode, oldNode)
      - 在某一個節點以前插入新的節點
      - 須要父節點調用此方法
      - 不存在insertAfter()方法
    - removeChild()
      - 經過父節點調用
    - replaceChild(newNode, oldNode)
      - 經過父節點調用
    - cloneNode(boolean)
      - 複製節點
      - 節點自身調用
innerHTML屬性
- 並不是DOM的組成部分，可是多數瀏覽器都支持
- 獲取標籤裏的文本內容
  - span1.innerHTML
- 也可設置HTML代碼
  - div1.innerHTML="<h1>AAA</h1>";
鼠標事件
- onclick
- onchange
- onfocus
  - 獲得焦點（好比鼠標點擊輸入框時，產生事件）
- onblur
  - 失去焦點

更多相關文章...

相關標籤/搜索

JavaScript

Java

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。