當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Web前端-JavaScript基础教程上

發布時間：2025/5/22 javascript 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端-JavaScript基础教程上小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Web前端-JavaScript基礎教程

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

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

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

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

var x; // 聲明變量為x x=0; // 給變量賦值為0var 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;

保留字：

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()構造函數，創建時間和日期的對象。

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

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

字符串

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

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

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 // falsevar 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 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'; // ReferenceErrorlet 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.14PI = 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-onlyconst ab = []; ab.push('dashu'); // 可執行 ab.length = 0; // 可執行 ab = ['dashu']; // 報錯，這就導致了錯誤，因為把一個數組賦值給變量，就不是同個地址了

Object.freeze對象凍結

const foo = Object.freeze({});// 下面一行不起作用； // 會報錯 foo.prop = 12;

頂層對象

window.a = 1; a // 1a = 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 // 1let [x = 1] = [null]; x // null var {x = 2} = {x: undefined}; x // 2var {x = 2} = {x: null}; x // nulllet {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

數組去重：

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

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

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

標簽語義化復合物文檔語義的標簽。
用正確的標簽做正確的事情，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,閉包，控制臺日志，循環。

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

異步腳本：

結言

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

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

作者簡介

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

轉載于:https://www.cnblogs.com/dashucoding/p/10503848.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Web前端-JavaScript基础教程上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：边分治学习笔记
下一篇：编程心法之什么是MVP What is