Web前端-JavaScript基礎教程上

時間 2019-11-26

原文原文鏈接

Web前端-JavaScript基礎教程javascript

將放入菜單欄中，便於閱讀！css

JavaScript是web前端開發的編程語言，大多數網站都使用到了JavaScript，因此咱們要進行學習，JavaScript是必備的前端技能。html

HTML是用來描述網頁的結構，css是用來描述網頁的延時，而JavaScript是用來描述網頁的行爲的。前端

JavaScript是一種高端，動態，弱類型的編程語言。來源於Java，它的一等函數來源於Scheme，原型來源於Self。html5

var x; // 聲明變量爲x
x=0; // 給變量賦值爲0

var student = {
 name: "dashu",
 age: "12"
};

// 經過"."或"[]"來訪問對象屬性
student.name;

student["age"];

// 建立新的屬性，進行添加操做
student.tall = "123";

// {}空對象，沒有屬性
student.dog = {};

var num = [1,2,3,4,5];
num[0];
num.length;
num[num.length-1];

// 添加新元素
num[num.length] = 6;
// 改變已有的元素
num[num.length] = 7;

// 定義空元素 
var em = [];
em.length;

// 數組對象
var students = [
 { name: dashu1, age: 1 },
 { name: dashu2, age: 2 }
];

var dashu = {
 dog: [ [1,2], [3,4] ],
 dog1: [ [2,3] ]
};

function add(x) {
 return x+1;
}
add(1);

var num = function(x) {
 return x+1;
}

var arrs = []; // 定義空數組
arrs.push(1,2,3); // push()添加元素
arrs.reverse(); // 元素次序反轉

// 兩點
points.dist = function() {
 var p1 = this[0];
 var p2 = this[1];
  // 數組的兩個元素
  // x 軸距離
  var a = p2.x - p1.x;
  var b = p2.y - p2.y;
  return Math.sqrt( a*a + b*b); //平方根
};
points.dist();

function da(x) {
 if(x>=0）{
  return x;
 }else{
  return -x;
 }
}

// 計算階乘
function da(n){
 var num = 1;
 while(n>1){
  num *= n;
  n--;
 }
 return num;
}

function Point(x,y) {
 this.x = x;
 this.y = y;
}

var a = new Point(1,1);

Point.prototype.r = function() {
 return Math.sqrt{
  this.x * this.x +  this.y * this.y
 };
}

p.r();

<html>
<head>
<script src="library.js"></script>
</head>
<body>
<p>html</p>
<script>
</script>
</body>
</html>

<script>
 function add(){
  var a = confirm("html");
  if(a){
   window.location = "";
  }
 }
 setTimeout(add, 2222);
</script>

windwo.onload = function() {
 var images = document.getElementsByTagName("img");
 for(var i = 0; i<images.length; i++){
  var image = images[i];
  if(image.addEventListener){
    image.addEventListener("click", hide, false);
   }else{
    image.attachEvent("onclick", hide);
   }
 }
}

font-weight: bold;
text-decoration: underline;
border: solid black 1px;
vertical-align: top;

保留字：java

break, delete, function, return, typeof
case, do, if, switch, var
catch, else, in, this, void
continue, false, instanceof, throw, while
debugger, finally, new, true, with
default, for, null, try

class const enum export extends import super

implements let privae public yield
interface package protected static

abstract double gote native static 
boolean enum implements package supper
byte export import private synchronized
char extends int protected throws
class final interface public transient
const float long short volatile

Math.pow() 次冪
Math.round() 四捨五入
Math.ceil() 向上求整
Math.floor() 向下求整
Math.abs() 求絕對值

Math.max()
Math.min()

Math.random() 隨機數
Math.PI 圓周率
Math.E 天然對數的底數

Math.sqrt() 平方根
Math.pow() 立方根

日期和時間：Date()構造函數，建立時間和日期的對象。node

var now = new Date(); 當前日期和時間

文本：是字符串，是由一組16位組成的不可變的有序列。react

字符串jquery

var s = "dashu";
s.charAt(0);

布爾值，在JavaScript中有布爾值類型，爲true和false。webpack

null在JavaScript中表示空值，null的typeof運行爲字符串object。null爲特殊的對象值，含義爲非對象。

null類型的惟一一個成語，它表示數字，字符串和對象是「無值」的。

undefined值表示「空值」，代表變量沒有初始化，代表屬性或元素不存在，返回沒有值就爲undefined。值爲「未定義」，運行typeof時，返回的「undefined」。

全局屬性：

undefined，Infinity，NaN

String()，Number()，Boolean()

var s = "dashu";
var n = "123";
var b = true;
var S = new String(s);
var N = new String(n);
var B = new String(b);

「「和」=」

第一個將原始值和其包裝對象視爲相等
第二個則是視爲不等

undefined, null, 布爾值, 數字, 字符串
數組和函數

var str = "dashu";
str.toUpperCase();
s;

var a = { x:1 };
a.x = 3;
a.y = 3;

var a = [1,2,3];
a[0]=2;

var a = { x: 1 };
var b = { x: 1 };

a === b // false

var a = [];
var b = [];

a === b; // false

對於上面的也是不相等的。

只有指向同樣的引用纔是相等的。

var a = [];
var b = a;
b[0] = 1;
a[0]; // 1
a === b // true

複製數組：

var a = [ 1,2,3 ];
var b = [];
for(var i = 0; i<a.length; i++){
 b[i] = a[i];
}

比較數組：

function equalArrays(a,b){
 if(a.length != b.length) return false;
 for(var i = 0; i<a.lenght; i++)
  if(a[i] !== b[i]) return false;
 return true;
}

類型轉換：

"2" * "3" // 6
undefined 轉 字符串 "undefined"，數字"NaN"，布爾值"false"

null 轉字符串"null"， 數字爲0

"" 空字符串 轉數字 0

相等：

null == undefined
"0" == 0
0 == false
"0" == false

Number("2"); // 2
String(false); // "false"
Boolean([]); // true
Object(2) // new Number(2);

toFixed根據小數點後的指定數字轉字符串

var a = 1234.567;
a.toFixed(0) // "1234"
a.toFixed(2) // "1234.56"

parseInt("1 dash"); // 1
parseFloat(" 2, dashu") // 2

toString()返回一個反映對象的字符串。

[1,2,3].toString(); // "1,2,3"

valueOf()方法返回對象自己

變量聲明：

var i;

循環：

for(var i = 0; i<6; i++){
 console.log(i);
};

for(var item in lists) console.log(item);

做用域：

var q = "dashu"; // 聲明一個全局變量
function add() {
 var q = "da"; // 聲明一個局部變量
 return q;
}

聲明全局變量能夠不用var聲明

function test(item) {
 var i = 0;
 if(typeof item == "object"){
  var j = 0;
 for(var k = 0; k < 10; k ++){
   console.log(k);
  }
  console.log(j);
 }
}

函數定義表達式：

var a = function(x) {
 return x++;
}

ECMAScript 6 入門

let用於聲明變量，只有在所在代碼塊有效

{
 let a = 1;
 var b = 2;
}

a // ReferenceError: a is not defined.
b // 2

let只有在它所在的代碼塊有效：

for (let i = 0; i < 10; i++) {
}
console.log(i);
// ReferenceError: i is not defined

for (let i = 0; i < 3; i++) {
  let i = 'a';
  console.log(i);
}
// a
// a
// a

函數內部變量i和循環變量i不在同一做用域。

// var 
console.log(a); // 輸出undefined
var a= 2;

// let 
console.log(b); // 報錯ReferenceError
let b= 2;

var命令會發生變量的提高，運行時，變量a已經存在了，而let不會。

暫時性死區：

var a= 123;

if (true) {
  a= '123'; // ReferenceError
  let a;
}

若是一個變量沒有被聲明，不會報錯：

typeof a // "undefined"

若是調用函數，而函數中的參數變量沒有被聲明，就會致使死區，報錯。

// 不報錯
var a = a;

// 報錯
let a = a;
// ReferenceError: x is not defined

不能夠重複聲明：

// 報錯
function b() {
  let a = 100;
  var a = 10;
}

// 報錯
function b() {
  let a = 100;
  let a = 10;
}

塊級做用域的須要，若是沒有塊級做用域可能會覆蓋外層變量，塊級做用域，如，變量循環i，循環結束後，沒有消失，而是變爲全局變量。

外層代碼塊不受內層代碼塊的影響。

function add() {
  let a = 5;
  if (true) {
    let a = 1;
  }
  console.log(a); // 5
}

在ES6中容許使用塊級做用域中聲明函數。

`const`命令

const聲明常量的值，一旦聲明，就不能改變。

const PI = 3.14;
PI // 3.14

PI = 1;
// TypeError: Assignment to constant variable.

const一旦聲明變量，就要進行初始化，不賦值，就報錯

const a;
// SyntaxError: Missing initializer in const declaration

const只在聲明的塊中有效，聲明的變量不會提高，存在暫時性死區，不能重複聲明，本質是指變量指向內存地址所保存的數據不能改動。

const a= {};

a.prop = b;
a.prop // b 

// 將 a 指向另外一個對象，就會報錯
a= {}; // TypeError: "a" is read-only

const ab = [];
ab.push('dashu'); // 可執行
ab.length = 0;    // 可執行
ab = ['dashu'];    // 報錯，這就致使了錯誤，由於把一個數組賦值給變量，就不是同個地址了

Object.freeze對象凍結

const foo = Object.freeze({});

// 下面一行不起做用；
// 會報錯
foo.prop = 12;

頂層對象

window.a = 1;
a // 1

a = 2;
window.a // 2

// es6開始
// var,function聲明變量是全局變量，是頂層對象的屬性

var a = 1;
window.a // 1

// let const class 聲明就不是了
let b = 1;
window.b // undefined

IE: trident內核
Firefox: gecko內核
Safari: webkit內核
Opera: Blink內核
Chrome: Blink

<!DOCTYPE> 聲明位於文檔中的最前面位置，處於<html>標籤以前。

用於告訴瀏覽器文檔使用哪一種HTML或XHTML規範。

區分Quirks模式和Standards模式區別：

Standards模式是標準模式，遇到一個問題是之前的規則不兼容新的規則，使用了新的功能，就弄個參數，若是等於就使用新的規則，不等於就使用以前的規則，這就是Quirks模式。

區分與，佈局，樣式解析，腳本執行，三個方面。

div+css佈局table優勢，改變的時候方便，只改css文件，頁面加載速度快，結構化清晰，頁面顯示簡潔，表現與結構分離，易於seo優化。

JavaScript的數據類型有：

基本數據類型：

String, Boolean, Number, Undefined, Null

引用數據類型：

Object

JavaScript中的繼承：

原型鏈繼承，構造函數繼承，組合繼承，寄生式繼承等

DOM操做：

createDocumentFragment();
createElement()
createTextNode()
appendChild()
removeChild()
replaceChild()
insertBefore()
getElementsByTagName()
getElementsByName()
getElementsById()

JavaScript中typeof返回的數據：

object number function boolean underfined

JavaScript本地對象能夠實例化，內置對象不能實例化，宿主自帶document,window。

var str = '123';
str = str.split('').reverse().join('');
// '321'

200：請求已成功
302：請求的資源臨時從不一樣的 URI 響應請求
403：服務器已經理解請求，可是拒絕執行它
404：請求失敗

node.js, mongodb, npm, mvvm, react, angularjs, webpack等

應用 web 標準進行設計，99%的網站都須要被重構。

數組解構：

let a = 1;
let b = 2;
let c = 3;

let [a, b, c] = [1, 2, 3];

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

var {x = 2} = {x: undefined};
x // 2

var {x = 2} = {x: null};
x // null

let {length : len} = 'hello';
len // 5

如何優化頁面的加載速度？

減小css文件的數量和大小，壓縮css和js文件代碼；圖片的大小；把css樣式表放在頂部，把js放置在底部；減小http請求數，使用外部js或css。

頁面性能優化：壓縮，合併，減小請求，diam層析優化

內存泄漏的緣由有：內存泄漏是任何對象在不使用時它還存在，致使內存泄漏爲setTimeout，閉包，控制檯日誌，循環等。

從服務器推送數據到客戶端：

html5 websocket
websocket flash

庫：

jquery, yui, prototype, dojo, ext.js

框架：

modernizr, underscore, backbone

前端開發：

Sublime Text, Eclipse, Notepad, Firebug, HttpWatch

前端路由
是指
在不進行後端請求的狀況下對頁面進行跳轉

雙向數據綁定：angular

單向數據綁定：knockout

單純地 View 層: React

jquery優化，優先使用id選擇器，jquery若是要使用dom元素，就建議存儲一個變量保存使用，使用dom操做的過程很是耗性能。

class前使用tag。

jquery操做dom的框架，jqueryui是基於jquery作的一個ui組件庫。

jquery一個對象能夠同時綁定多個事件，底層實現原理：addEventListener與attachEvent兼容處理作事件註冊。

Jquery.extend 用來擴展 jQuery 對象自己
jquery.fn.extend 用來擴展 jQuery 實例的

如何將數組轉換爲json字符串，而後換回來？

$.parseJSON('{"name":"dashu"}');
JSON.stringify

在jquery.fn中的init返回的this指的是？返回this又是？

this是執行init構造函數自身的，其實就是jquery實例對象，返回this實現jquery的鏈式操做。

http狀態碼：

1##: 用於指定客戶端的動做；
2##: 用於表示請求成功；
3##: 用於定位頭信息；
4##: 用於指出客戶端的錯誤；
400 語義有誤
401 當前請求須要用戶驗證
403 服務器已經接收請求，但拒絕執行
5##: 用於指出服務器的錯誤
503: 服務不可用

前端開發優化：

減小http請求次數，css,js代碼壓縮，圖片大小控制適合，CDN託管，Data緩存。能夠用innerHTML代替dom操做，減小dom操做次數，優化js性能。

能夠多用className,少用全局變量，緩存dom節點。

少用css表達式，圖片預加載，樣式放頂部，腳本放在底部，使用div+css佈局。

var str=$("a").attr("href")

將數組轉化爲 json 字符串

$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}

jquery是一個js庫，而jquery ui是在jquery基礎上，利用jquery的擴展性設計的插件。

sub，add.call(sub,3,1) == add(3,1) 
alert(4);

function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);

異步加載方式：

defer, ie
async,
callBack

上述描述的json術語是一種輕量級的數據交換格式，數據格式簡單，易於讀寫。

判斷對象是否屬於某個類：

instanceof

原型對象也是普通的對象，不爲Null，就叫原型鏈

setInterval（fn1,500）// 重複執行

setInterval（fn1(),500）// 只執行一次

原生JavaScript，return false;只阻止默認行爲
jQuery中的return false; 既阻止默認行爲，又阻止冒泡

事件委託指利用冒泡的原理，本身所要觸發的事件，讓其餘元素取執行。

join()表示用數據中所用元素拼接成字符串。
split()把字符串分割開。
slice()能夠從已有的數組返回選定的元素。
splice()從數據中添加或刪除，返回被刪除的部分數組。

閉包讀取函數內部的變量值，並保持在內存中。

apply()和 call()

做用是同樣的，傳遞的參數就不一樣了。

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

阻止冒泡：

ev.stopPropagation();
ev.cancelBubble = true;

高性能的JavaScript?

使用DocumentFragment，clone，innerHTML，switch，三目運算符，setInterval等。

call()和apply()區別在於apply的參數是數組形式，而call的參數是單個的值。

dom操做：

createDocumentFragment()
createTextNode()
appendChild()
removeChild()
replaceChild()
insertBefore()
getElementsByTagName()
getElementsByName()
getElementById()

class Point {
add(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}

判斷一個對象是否屬於某個類:

instanceof constructor

嚴格模式

"use strict";

　　function strict(){
　　　　"use strict";
　　　　return "這是嚴格模式。";
　　}

　　function notStrict() {
　　　　return "這是正常模式。";
　　}

window.onload()方法須要等全部元素加載完畢才執行，$(document).ready只要dom結構加載完畢就行。

頁面加載性能優化：

壓縮css,js文件；合併Js.css文件，減小http請求，使用外部js,css文件，減小dom操做。

this:

var User = {
count: 1,
add: function() {
return this.count;
}
};
console.log(User.add()); 
var func = User.add;
console.log(func());

1 和 undefined

數組去重：

var arrs = [ 1,2,2,3,4 ];
function add(){
 // 定義一個空數組
 var newArr = [];
 // 定義一個空對象
 var obj = {};
 // 定義索引
 var index = 0;
 // 定義數組的長度
 var long = arr.length
 // 循環索引
 for(var i = 0; i<long; i++){
  if(obj[arrs[i]]==undefined){
   obj[arrs[i]] = 1;
   newArr[index++] = arr[i];
  }else if(obj[arrs[i]==1){
   continue;
  }
  return newArr;
 }
 var new Arr2 = add(arrs);
}

// 數組去重：

function add(array){
    var aaa = []; //一個新的臨時數組
    for(var i = 0; i < array.length; i++){
        if(aaa.indexOf(array[i]) == -1){
            aaa.push(array[i]);
        }
    }
    return temp;
}

var arr = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(add(arr));

function add(arr){
 arr.sort();
 for(var i = 0; i<arr.length-1; i++){
  if(arr[i] == arr[i+1]){
   arr.splice(i,1);
   i--;
   }
 }
 return arr;
}

function add(arr){
 // 定義一個空數組
 var newArr=[];
 for(var i=0; i<arr.length; i++){
  if(newArr.indexOf(arr[i]) == -1){
   newArr.push(arr[i]);
  }
 }
 return newArr;
}

function add(arr){
 var obj = {};
 var newArr = [];
 for(var i = 0; i<arr.length; i++){
  if(obj[arr[i]] == nudefined){
   newArr.push(arr[i]);
    obj[arr[i]] = 1;
  }
 }
 return newArr;
}

ajax的過程，建立XMLHttpRequest對象，建立一個異步調用對象，建立新的HTTP請求，並指定HTPP請求的方法，url以及驗證信息，設置響應HTTP請求狀態變化的函數，發送HTTP請求，獲取異步調用返回的數據。

如何解決跨域問題，跨域就是，協議，域名，端口相同才同域，不然爲跨域。ajax不能夠跨域獲取數據，能夠獲取文件內容，使用js腳本，函數調用，調用的參數爲服務器返回的數據。

ajax請求，XMLHttpRequest標準瀏覽器，ActiveXObjectie瀏覽器：

var ha = null; // 建立對象
if(window.XMLHttpRequest){
 ha = new XMLHttpRequest();
}else{
 ha = new ActiveXObject("Microsoft.XMLHTTP");
}
ha.open(「方式」,」地址」,」標誌位」);//初始化請求
ha.setRequestHeader(「」,」」);//設置 http 頭信息
ha.onreadystatechange =function(){}//指定回調函數
ha.send();//發送請求

標籤語義化複合物文檔語義的標籤。
用正確的標籤作正確的事情，html語義化讓頁面的內容結構化，便於對瀏覽器，搜索引擎解析。

僞類清除浮動，after僞元素，clear:both，

window, document, location, screen, history, navigator
alert() open() close() setInterval() setTimeout() clearInterval() clearTimeout()

$.ajax({
 url: "",
 data: // post數組
 dataType: "json",
 type: "POST",
 success: function(data){
 },
 error: function(){
 }
});

內存泄漏：setTimeout,閉包，控制檯日誌，循環。

<script>標籤的位置

<!DOCTYPE html>
<html>
<head>
<title></title>
<script></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script></script>
</body>
</html>

異步腳本：

<script type="text/javascript" async src=""></script>

結言

好了，歡迎在留言區留言，與你們分享你的經驗和心得。

感謝你學習今天的內容，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

做者簡介

達叔，理工男，簡書做者&全棧工程師，感性理性兼備的寫做者，我的獨立開發者，我相信你也能夠！閱讀他的文章，會上癮！，幫你成爲更好的本身。長按下方二維碼可關注，歡迎分享，置頂尤佳。

相關標籤/搜索

每日一句

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

Web前端-JavaScript基礎教程上

const命令

頂層對象

結言

`const`命令