JavaScript簡單快速入門

時間  2021-01-19
標籤 css html java node 程序員 數據庫 編程 數組 瀏覽器 安全 欄目 JavaScript 简体版
原文   原文鏈接

「 別懼怕顧慮，想到就去作，這世界就是這樣，當你把不敢去實現夢想的時候夢想就會離你愈來愈遠，當你勇敢地去追夢的時候，全世界都會來幫你。」你好，我是夢陽辰！將來我陪你一塊兒成長！css



01.變量

定義：變量是存儲信息的「容器」，是內存單元。html

1.格式：java

var pi;//聲明變量var x =5;//賦值

2.注意：若是從新聲明變量，該變量的值不會丟失。node

var name = "MengYangChen";var name;

name的值依然是MengYangChen程序員

3.動態類型
變量的類型，爲賦值語句後面數據的類型。數據庫

var x;//若是沒有賦值默認爲undefinedvar x =3;var = "MengYangChen";

4.變量的做用域：
再javaScript中，對象和函數一樣也是變量。編程

4.1局部變量：變量在函數內聲明，變量爲局部做用域，只能在函數內部訪問。數組

function myFunction(){
	var age = 20;}

注意：若是在函數內沒有聲明（即沒有使用var關鍵字），改變量爲全局變量。
4.2全局變量
在函數體外定義，即爲全局變量。全局變量具備全局做用域，網頁中全部腳本和漢數據可使用。瀏覽器

4.3JavaScript 中，變量能夠在使用後聲明，也就是變量能夠先使用再聲明。安全

緣由：變量提高：函數聲明和變量聲明老是會被解釋器悄悄地被"提高"到方法體的最頂部。

x = 5; // 變量 x 設置爲 5elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x;                     // 在元素中顯示 xvar x; // 聲明 x

注意：JavaScript 只有聲明的變量會提高，初始化的不會。

var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y;           // 顯示 x 和 yvar y = 7; // 初始化 y

結果：

x 爲：5，y 爲：undefined

y 輸出了 undefined，這是由於變量聲明 (var y) 提高了，可是初始化(y = 7) 並不會提高，因此 y 變量是一個未定義的變量。

5.變量的生命週期
開始：聲明時候的初始化。

結束：
局部變量在函數執行完畢銷燬。

全局變量在頁面關閉後銷燬。

6.JavaScript 嚴格模式（use strict)
「use strict」 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一條語句，可是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。

「use strict」 指令只容許出如今腳本或函數的開頭。

嚴格模式下你不能使用未聲明的變量。

"use strict";x = 3.14;       // 報錯 (x 未定義)

不容許刪除變量或對象。

"use strict";var x = 3.14;delete x;

不容許刪除函數。

"use strict";function x(p1, p2) {};delete x;                // 報錯

不容許變量重名。

"use strict";function x(p1, p1) {};   // 報錯

不容許使用8進制，轉義字符等。
爲何使用嚴格模式?
消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲.

嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向，包括IE 10在內的主流瀏覽器，都已經支持它，許多大項目已經開始全面擁抱它。

另外一方面，一樣的代碼，在"嚴格模式"中，可能會有不同的運行結果；一些在"正常模式"下能夠運行的語句，在"嚴格模式"下將不能運行。

02.數據類型

1.javaScript數據類型分爲：
值類型(基本類型)/原始數據類型：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。

引用數據類型：對象(Object)、數組(Array)、函數(Function)。

2.String(字符串)
字符串可使用單引號或雙引號。
比較字符串是否相等用雙等號。

2.1字符串對象
第一種：var s=「sag」;（小String，屬於String類型）

第二種：var a2= new String(「ab」);（大String，屬於Object類型）

Sting是一個內置的類，能夠直接使用。

3.Number(數字）
javaScript只有一種數字類型，能夠帶小數點，也能夠不帶。很大的數據能夠用科學計數法表示。

var x = 33;var x = 33.00;var y = 12e6;var y = 12e-6;

3.1注意：NaN，表示Not a Number不是一個數字，可是屬於Number類型。

Infinity，表示無窮大。

0,-1,123,…小數，複數，無窮大都是屬於number類型。

當除數爲0時，結果爲無窮大。

isNaN（數據）：結果爲true表示不是一個數字。

parseInt()函數：能夠將字符串自動轉換成數字。保留Int。

parseFloat()函數：將字符串轉換成數字。

Math.Ceil()函數：向上取整。2.1會變爲3。

4.Boolean數據類型
布爾（邏輯）只能有兩個值：true 或 false。

注意：當某個地方必定是boolean類型時，會自動轉換成boolean類型。例如if後面的括號。

NaN,0,"",null,undefined會自動轉換成false。

5.Undefined 和 Null
Undefined 這個值表示變量不含有值。
能夠經過將變量的值設置爲 null 來清空變量。

6.typeof動態的求出變量的數據類型

alert(typeof null);//Objectalert(typeof NaN);//numberalert(typeof undefined);//undefined

7.用」new「聲明變量類型

var x = new Stirng;var y = new Number;var person = new Object;var flag = new Boolean;

8.JavaScript 變量均爲對象。當您聲明一個變量時，就建立了一個新的對象。

03.輸出語句

javaScript能夠經過不一樣的方式輸出數據：

1.使用window.alert（）彈出警告框，window能夠省略。

2.使用document.write()方法將內容寫到HTML文檔中。

3.使用innerHTML寫入到HTML元素中。

4.使用console.log()寫入到瀏覽器控制檯，console能夠省略。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>輸出語句</title></head><body><p id  = "one" ></p>
    <script>
        var x = prompt("請輸入一個數據：");
        var y = 3.1;
        alert(x);
        document.write(x+y);
        var temp = document.getElementById("one");
        temp.innerHTML=x+y;
        console.log(x+y);
    </script></body></html>

輸入數據：
能夠用prompt(」請輸入你的姓名：「)在頁面彈出一個輸出框。數據爲字符串類型。

04.數組

1.javaScript數組爲一個無限大的容器，數組類型能夠是不一致。

2.建立方式：

var nums = new Array();news[0] =  11;news[1] = "22";//或者var computerBrand = new ("ASUS","DELL");

3.數組的遍歷
3.1for循環遍歷

3.2for/in循環遍歷

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>數組的遍歷</title></head><body>
    <script>
        var arr = new Array();
        arr[0]="MengYangChen";
        arr[1]="20";
        arr[2]="boy";
        for(var i = 0;i<arr.length;i++){
            document.write(arr[i]+"<br>");
        }
        
        for(var i in arr){
            document.write(arr[i]+"<br>");
        }
    </script></body></html>

05.函數

JavaScript 函數語法

1.函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：

function functionname(){
    // 執行代碼}或者functionname=function{
	//執行代碼}

2.具備參數的函數

function myFunction(var1,var2){
  //代碼}

3.具備返回值的參數

function myFunction(){
    var x=5;
    return x;}document.getElementById("demo").innerHTML=myFunction();
function myFunction(a,b){
    return a*b;}
 document.getElementById("demo").innerHTML=myFunction(4,3);

06.對象

1.avaScript 中的全部事物都是對象：字符串、數值、數組、函數…。

此外，JavaScript 容許自定義對象。

對象也是一個變量。對象能夠包含多個值。

var computer ={brand:"ASUS",color:"silveryWhite",price:"13"};

2.可使用字面量來定義和建立 JavaScript 對象:

var person ={firstName : "YangChen",lastName :"Meng",age: 20,gender : "men"};

鍵值對一般寫法爲 name : value (鍵與值以冒號分割)。

鍵值對在 JavaScript 對象一般稱爲 對象屬性。
3.訪問對象屬性：

person.lastName;person["lastName"];

4.對象方法
4.1建立對象方法:

methodName : function() {
    // 代碼 }

案例：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>對象</title></head><body><span id = "demo"></span>
    <script>
        var person ={
            firstName :"YangChen",
            lastName :"Meng",
            age: 20,
            gender : "men",
            fullName : function()
            {
                return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("demo").innerHTML=person.fullName();
    </script></body></html>

5.訪問對象的方法

objectName.methodName();

6.建立JavaScript對象
新建對象有兩種不一樣的方法：

6.1使用 Object 定義並建立對象的實例。
在 JavaScript 中，幾乎全部的對象都是 Object 類型的實例，它們都會從 Object.prototype 繼承屬性和方法。

Object 構造函數建立一個對象包裝器。

Object 構造函數，會根據給定的參數建立對象，具體有如下狀況：

若是給定值是 null 或 undefined，將會建立並返回一個空對象。

若是傳進去的是一個基本類型的值，則會構造其包裝類型的對象。

若是傳進去的是引用類型的值，仍然會返回這個值，經他們複製的變量保有和源對象相同的引用地址。

當以非構造函數形式被調用時，Object 的行爲等同於 new Object()。

<script>var person=new Object();person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor="blue"; document.write(person.firstname + " is " + person.age + " years old.");</script>

6.2使用函數來定義對象，而後建立新的對象實例。（對象構造器）

<script>function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    
	this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }}myFather=new person("John","Doe",50,"blue");document.write(myFather.firstname + " is " + myFather.age + " years old.");</script>

有了對象構造器，就能夠建立新的對象：

var myFather=new person("John","Doe",50,"blue");var myMother=new person("Sally","Rally",48,"green");

07.事件

1.HTML 事件是發生在 HTML 元素上的事情。

2.在事件觸發時 JavaScript 能夠執行一些代碼。

<button onclick="displayDate()">點這裏</button><script>function displayDate(){
	document.getElementById("demo").innerHTML=Date();}</script><p id="demo"></p>

3.常見的HTML事件
下面是一些常見的HTML事件的列表:

onchange	HTML 元素改變,下拉列表選中改變，或文本框內容改變。

onclick	用戶點擊 HTML 元素

onmouseover	用戶在一個HTML元素上移動鼠標

onmouseout	用戶從一個HTML元素上移開鼠標

onkeydown	用戶按下鍵盤按鍵

onload	瀏覽器已完成頁面的加載

在js中，doucument.getElementById(‘ 標籤的id’)；發生一個交互事件時，js和html是分離的，獲取標籤對象。

08.DOM

1.文檔對象模型(Document Object Model，簡稱DOM)，是W3C組織推薦的處理可擴展標記語言(HTML或者XML)的標準編程接口。

w3C已經定義了一系列的DOM接口，經過這些DOM接口能夠改變網頁的內容、結構和樣式。

DOM樹
在這裏插入圖片描述
文檔:一個頁面就是一個文檔，DOM中使用document表示。

元素:頁面中的全部標籤都是元素，DOM中使用element表示。

節點︰網頁中的全部內容都是節點（標籤、屬性、文本、註釋等)，DOM中使用node表示。
2.獲取元素

2.1根據ID獲取

使用getElementById()方法能夠獲取帶有ID的元素對象，找不到返回null。

console.dir()方法：

打印咱們返回元素的對象，更好的查看裏面的屬性和方法。

2.2根據標籤名獲取
使用getElementsByTagName()方法，能夠返回帶有指定標籤名的對象的集合。

獲得的元素是動態的。

若是頁面中只有一個元素，返回的仍是一個僞數組。

若是沒有該元素返回空的僞數組。

能夠指定父元素，獲取父元素內部全部指定標籤名的子元素。

注意：父元素必須是單個對象(必須指明是哪個元素對象），獲取的時候不包括父元素本身。即先獲取父元素，再根據父元素獲取，子元素。

如：

var ol = document.getElementsByTagName("ol");console.log(ol[0].getElementsByTagName("li");

根據類名獲取元素

document.getElementsByClassName(「box」);
返回一個僞數組。

根據指定選擇器返回第一個元素對象

document.querySelector(「選擇器」);

根據指定選擇器返回集合
document.querySelectorAll(「選擇器」);

var b = document.querySelectorAll(".two");
    b[0].innerHTML="常";
    b[1].innerHTML="有意思！";

獲取body和html標籤

document.body;document.documentElement;//html

或則經過添加id,class…。

事件

JavaScript使咱們有能力建立動態頁面，而事件是能夠被JavaScript偵測到的行爲。

簡單理解︰觸發—響應機制。

網頁中的每一個元素均可以產生某些能夠觸發JavaScript的事件，例如，咱們能夠在用戶點擊某按鈕時產生一個事件，而後去執行某些操做。

事件有三部分組成：（也稱事件三要素）
事件源

<button id="btn">ff</button>var btn = document.getElementById("btn);

事件類型
如何觸發，什麼事件，好比鼠標點擊（onclick)仍是鼠標通過，仍是鍵盤按下。

事件處理程序：

經過函數完成

執行事件的步驟。

1.獲取事件源。

2.註冊事件（綁定事件）。

btn.onclick=function(){}

3.添加事件處理程序。
在這裏插入圖片描述
操做元素

JavaScript的DOM操做能夠改變網頁內容、結構和樣式，咱們能夠利用DOM操做元素來改變元素裏面的內容、屬性等。注意如下都是屬性。

改變元素的內容
innerTest和innerHTML

innerTest（非標準）不識別HTML的標籤，而innerHTML識別。

能夠獲取裏面的內容,innerTest會去除空格和換行，而innerHTML保留空格和換行。

經常使用元素的屬性操做

先獲取標籤元素對象，而後經過對象.屬性來修改屬性。

分時顯示不一樣圖片，顯示不一樣的問候語。
1.獲取當前時間。

表單元素的屬性操做
利用DOM能夠操做以下表單元素的屬性：
type,value,checked,selected,disabled

<body><button>點擊我</button><input type="text" value="輸入內容">
    <script>
    //1.獲取元素
        var btn  = document.querySelector("button");
        var input = document.querySelector("input");
        //註冊事件
        btn.onclick = function () {
            input.value = '他點擊我了';
            //btn.disabled=true;//禁用按鈕
            this.disabled = true;//指向當前對象，事件函數的調用者
        }
    </script></body>

點擊按鈕密碼框切換爲文本框，並能夠查看密碼明文
1.思路將密碼框改成文本框

<body><div class="box">
    <label for="pwd">
        <img src="#" alt="" id="eye"/>
    </label>
    <input type="password" name="" id="pwd"></div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //註冊事件
        var flag =0;
        eye.onclick = function () {
            if(flag = 0 ){
                pwd.type= "text";
                this.src="#1";
                flag = 1;
            } else {
                pwd.type = 'password';
                this.src="#";
                flag = 0 ;
            }

        }
    </script></body>

樣式屬性操做
咱們能夠經過js修改元素的大小，顏色，位置樣式
1.element.style 行內樣式操做

js修改style樣式操做，產生的是行內樣式，css權重比較高。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>樣式屬性</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style></head><body>
    <div></div><script>
    //1.獲取元素
    var div = document.querySelector('div');
    //2.註冊事件，處理程序
    div.onclick = function () {
        this.style.backgroundColor="blue";
        this.style.width = "300px";
    }</script></body>

2.element.className 類名樣式操做

經過寫好樣式，而後經過獲取元素，在響應事件後，將元素的類名賦咱們事先綁定好的樣式來改變元素的樣式。

.change{......}var test  = document.querySelector('div');test.onclick = function(){this.className = 'change';}

若是樣式修改較多，能夠採用這種方式。

原先的類名會被覆蓋。

若是想要保留原先的類名，能夠採用如下方式：

this.className = 'first change';

在這裏插入圖片描述
獲取自定義屬性值
1.element.屬性 獲取屬性值
獲取內置屬性值（元素自己自帶的屬性）

2.element.getAttribute('屬性‘）；
能夠獲取自定義屬性，程序員自定義的屬性

3.設置屬性值

element.屬性 = '值';
element.setAttribute('屬性','值');//主要用於自定義屬性

4.移除屬性

element.removeAttribute('屬性');

H5的自定義屬性
自定義屬性的目的：是爲了保存並使用數據。有些數據能夠保存到頁面中而不用保存到數據庫中。

自定義屬性獲取是經過getAttribute('屬性’）獲取。

可是有些自定義屬性很容易引發歧義，不容易判斷是元素的內置屬性仍是自定義屬性。

<div getTime="20"><div>var di = document.querySelector('div');

如何區分是自定義屬性仍是內置屬性呢？

H5規定自定義屬性data-開頭作爲屬性名而且賦值。
好比：

<div data-index ="1"></div>

或者使用Js設置
element.setAttribute(‘data-index’,2);

H5獲取自定義屬性的方法

1.element.getAttribute('data-indexd data-list-name=andy');2.H5新增element.dataset.index 或者element.dataset['index'] ie11纔開始支持。


dataset是一個集合裏面存放了全部以data開頭的自定義屬性。

若是自定義屬性裏面有多個-鏈接的單詞，咱們獲取的時候纔去駝峯命名法

```java
div.getAtrribute("data-list-name");div.dataset.listName;

節點操做

爲何學節點操做？
獲取元素一般使用兩種方式：

1.利用DOM提供的方法獲取元素
document.getElementById();
document.getElementByTagName();
document.querySelector();

缺點:邏輯性不強，繁瑣。

2.利用節點的層次關係獲取元素（父子兄弟關係）
邏輯性強，可是兼容性差

通常節點至少擁有nodeType(節點類型），nodeName(節點名稱）和nodeValue(節點值）這三個基本屬性。

元素節點nodeType 爲1

屬性節點nodeType爲2

文本節點nodeType 爲3(文本節點包含文字、空格、換行等)

通常獲取元素節點。

<div>
	<span></span><div>

3.節點層級
利用DOM樹能夠把節點劃分爲不一樣的層級關係，常見的是父子兄層級關係。

父級節點
獲得與元素最近的節點。找不到父節點則返回爲null。

node.parentNode;

子節點
獲得全部的子節點，包括元素節點，文本節點，等

parentNode.ChildNodes(標準)

parentNode.ChildNodes返回包含指定節點的子節點的集合，改集合爲即時更新的集合。

若是隻想得到裏面的元素節點，則須要專門處理，因此咱們通常不提倡使用。

var ul =document. queryselector ( 'ul');for(var i = 0; i < ul.childNodes.length; i++){if (ul.childNodes[i].nodeType -- 1){// ul.childNodes[i]是元素節點console.log(ul.childNodes[i]);}

爲了解決這個問題還有一種非標準的用法。

parentNode.children(非標準）

parentNode.children是一個只讀屬性，返回全部的子元素節點。它只返回子元素節點，其他節點不返回(這個是咱們重點掌握的)。

雖然children是一個非標準，可是獲得了各個瀏覽器的支持，所以咱們能夠放心使用。
第一個節點和最後一個節點

父節點.firstChild
父節點.lastChild

第一個子元素和最後一個元素節點

父節點.firstElementChild
父節點.LastElementChild

4.三種動態建立元素的區別
4.1document.write()

document.write("<div>fa<div>"):

會致使頁面重繪:document.write是直接將內容寫入頁面的內容流，可是文檔流執行完畢，再使用該語句，則它會致使頁面所有重繪。

4.2 element.innerHTML

element.innerHTML="<a href="#">dfa</a>";

4.3 document.createElement();

var a = document.createElement();element.appendChild(a);

innerHTML是將內容寫入某個DOM節點，不會致使頁面所有重繪.

innerHTML建立多個元素效率更高(不要拼接字符串，採起數組形式拼接），結構稍微複雜
.
createElement(建立多個元素效率稍低一點點，可是結構更清晰

09.BOM

什麼是BOM對象？
Brower Object Model,指的是瀏覽器對象模型。

做用：操做瀏覽器窗口及窗口上的空間，實現用戶和頁面的動態交互。如返回，前進，刷新，地址欄，關閉窗口，縮放窗口等。

瀏覽器對象：指的是瀏覽器提供的一系列內置對象的統稱。

BOM瀏覽器對象模型：各內置對象之間按照某種層次組織起來的模型的統稱。
在這裏插入圖片描述
document（文檔對象)﹔也稱爲DOM對象，是HTML頁面當前窗體的內容，同時也是JavaScript重要組成部分之一。

history(歷史對象)﹔主要用於記錄瀏覽器的訪問歷史記錄，也就是瀏覽網頁的前進與後退功能。

location(地址欄對象）﹔用於獲取當前瀏覽器中URL地址欄內的相關數據。navigator(瀏覽器對象）﹔用於獲取瀏覽器的相關數據，例如瀏覽器的名稱、版本等，也稱爲瀏覽器的嗅探器。

screen(屏幕對象）:可獲取與屏幕相關的數據，例如屏幕的分辨率等。

window對象

window對象是BOM中全部對象的核心，同時也是BOM中全部對象的父對象。定義在全局做用域中的變量、函數以及JavaScript中的內置函數均可以被window對象調用。

window對象的屬性和方法：

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
setTimeout()方法在執行一次後即中止了操做;setlnterval()方法一旦開始執行，在不加干涉的狀況下，間歇調用將會一直執行到頁面關閉爲止。

若要在定時器啓動後，取消該操做，能夠將setTimeout()的返回值（定時器ID）傳遞給clearTimeout()方法;或將setlnterval()的返回值傳遞給clearIntexal()方法。

location對象

location對象提供的用於改變URL地址的方法，全部主流的瀏覽器都支持。
在這裏插入圖片描述
利用location.href能夠跳轉到指定的url地址中。

history對象

history對象可對用戶在瀏覽器中訪問過的URL歷史記錄進行操做。

出於安全方面的考慮，history對象不能直接獲取用戶瀏覽過的URL，但能夠控制瀏覽器實現「後退」和「前進」的功能。
在這裏插入圖片描述

navigator對象

navigator對象提供了有關瀏覽器的信息，主流瀏覽器中存在的屬性和方法以下：
在這裏插入圖片描述
在這裏插入圖片描述

screen對象

screen對象用於返回當前渲染窗口中與屏幕相關的屬性信息，如屏幕的寬度和高度等。
在這裏插入圖片描述

If your happiness depends on what somebody else does, I guess you do have a problem.　
若是你的快樂與否取決於別人作了什麼，我想，你真的有點問題。


在這裏插入圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程