htmljs編程筆記（html代碼筆記）

本文目錄一覽：

• 1、html代碼和JS代碼有什麼區別
• 2、如何在html中調用js函數
• 3、JavaScript學習筆記之數組基本操作示例
• 4、HTML5初學者筆記
• 5、《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結

html代碼和JS代碼有什麼區別

一、基礎不同

1、JS代碼：基於原型編程、多範式的動態腳本語言，並且支持面向對象、命令式和聲明式（如函數式編程）風格。

2、html代碼：是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

二、用處不同

1、JS代碼：用於Web應用開發,常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。

2、html代碼：結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

三、特點不同

1、JS代碼：主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。

2、html代碼：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言採取子類元素的方式，為系統擴展帶來保證。

參考資料來源：百度百科-JS腳本

參考資料來源：百度百科-html代碼

如何在html中調用js函數

一、工具：Dreamweaver軟件、電腦

二、操作步驟：

【1】打開Dreamweaver軟件，然後在創建新項目下選擇HTML；

【2】點擊“文件”選項，然後點擊“另存為”，將文件命名為test，並將其保存在電腦桌面上；

【3】編寫一個基本的html文件，該html文件包含一個用戶名及一個密碼輸入文本框和一個確定以及一個取消按鈕；

【4】在title標籤下插入script language=”JavaScript”js代碼/script，然後在html中調用js函數；

【5】完成js代碼編寫及html調用js代碼後保存tset.html文件，然後在瀏覽器中打開test.html文件，檢查js代碼執行的效果；

【6】在Dreamweaver軟件中新建一個check.js文件（方法同html文件新建），在check文件中輸入校驗函數；

【7】然後在test.html的title標籤下引用check.js文件；

【8】在程序中引用check.js文件中的js函數，然後在瀏覽器中刷新test.hmtl文件，然後在username的輸入框中輸入非法字符來檢驗js代碼。

JavaScript學習筆記之數組基本操作示例

本文實例講述了JavaScript學習筆記之數組基本操作。分享給大家供大家參考，具體如下：

一、數組定義

1、定義

vara=[1,2,3]

vara=newArray(1,2,3);

2、長度

返回長度

script

vara=[1,2,3,4,5,6];

alert(a.length);

/script

設置長度

script

vara=[1,2,3,4,5,6];

a.length=2;

alert(a);

/script

二、數組連接

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

三、數組排序

sort()函數

默認情況是把數組元素按字符串排序

例子

01

script

vararr=[‘float’,’width’,’alpha’,’zoom’,’left’];

arr.sort();

alert(arr);

/script

例子02

vararr=[12,8,99,19,112];

arr.sort();

alert(arr);

例子03

sort()函數的改進

vararr=[12,8,99,19,112];

arr.sort(function(n1,n2){

returnn1-n2;

});

alert(arr);

四、數組連接

1、兩個數組間的連接：contact()

script

vara=[1,2,3];

varb=[4,5,6];

alert(a.concat(b));

alert(b.concat(a));

/script

2、數組元素間的連接：join()

script

vararr=[1,2,3,4];

alert(arr.join(‘–p’));

/script

五、數組元素添加、刪除

1、數組尾部的添加、刪除

尾部添加：push(value)

例子01

script

vara=[1,2,3];

a.push(4);

alert(a);

/script

尾部刪除：pop()

例子02

script

vara=[1,2,3];

a.pop();

alert(a);

/script

2、數組頭部的添加、刪除

頭部添加

unshift(value)

例子01

script

vararr=[1,2,3];

arr.unshift(0)

alert(arr);

/script

頭部刪除:shift()

例子02

script

vararr=[1,2,3];

arr.shift();

alert(arr);

/script

3、數組——splice()

刪除數據

例子01

script

vararr=[1,2,3,4,5,6];

//splice(起點，長度)

arr.splice(2,3);

alert(arr);

/script

插入數據

例子02

script

vararr=[1,2,3,4,5,6];

//插入數據splice（起點，長度，元素）

arr.splice(2,0,’a’,’b’,’c’);

alert(arr);

/script

替換數據

例子02

script

vararr=[1,2,3,4,5,6];

//替換數據

arr.splice(2,2,’a’,’b’);

alert(arr);

/script

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：測試上述代碼運行結果。

更多關於JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript排序算法總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:js數組與字符串的相互轉換方法js刪除數組元素、清空數組的簡單方法(必看)js數組循環遍曆數組內所有元素的方法JS

array

數組詳解js數組去重的三種常用方法總結JavaScript從數組中刪除指定值元素的方法JS數組的遍歷方式for循環與for…in向JavaScript的數組中添加元素的方法小結JS刪除數組裡的某個元素方法javascript

數組的定義和數組的長度Js數組的操作push,pop,shift,unshift等方法詳細介紹

HTML5初學者筆記

HTML5記錄

一、VS code引入插件後運行，終端執行

二、引入外部js文件：

1、js的exports.a = a；方式暫時不知道怎麼做

2、直接引入，script之後可以直接使用。參照html-vue項目

3、數據類型

String、Number、Boolean、Null、undefined、symbol、Object、Array、Function

三、 JS顯示數據方式：

window.alert()

document.write()

innerHTML=‘’

console.log()

四、 let、const、var

五、全局變量、局部變量注意點

如果變量在函數內沒有聲明（沒有使用 var 關鍵字），該變量為全局變量。

六、事件：

onchange、onclick、onmouseover、onmouseout、onkeydown、onload…

html dom onclick之類的直接使用，vue是@click，小程序是bindTap

七、 this關鍵字：

1、在對象方法中， this 指向調用它所在方法的對象。

2、單獨使用 this，它指向全局(Global)對象。

3、函數使用中，this 指向函數的所屬者。

4、嚴格模式下函數是沒有綁定到 this 上，這時候 this 是 undefined。

5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

6、apply 和 call 允許切換函數執行的上下文環境（context），即 this 綁定的對象，可以將 this 引用到任何對象。

八、 箭頭函數：

1、有的箭頭函數都沒有自己的 this 。 不適合定義一個 對象的方法。

2、當我們使用箭頭函數的時候，箭頭函數會默認幫我們綁定外層 this 的值，所以在箭頭函數中 this 的值和外層 的 this 是一樣的。

3、箭頭函數是不能提升的，所以需要在使用之前定義。

4、使用 const 比使用 var 更安全，因為函數表達式始終是一個常量。

九、閉包：

閉包是一種保護私有變量的機制，在函數執行時形成私有的作用域，保護裡面的私有變量不受外界干擾。

直觀的說就是形成一個不銷毀的棧環境。

閉包會持有父方法的局部變量和參數並且不會隨父方法銷毀而銷毀

不必要的閉包只會增加內存消耗

十、 事件

body事件：onload、onunload

元素事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus

事件捕獲

document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕獲傳遞)

方法名：如果是相應事件，則只可寫方法名methodName，寫成methodName()則會自動執行

如果方法需要傳遞參數，則只可以使用匿名函數， function( { methodName(p1, p2) } );

是否捕獲傳遞：默認false，即冒泡傳遞

IE8和更早版本： x.attachEvent(“onclick”, myFunction) ;

十一、Window加載，頁面聲明周期入口

window.onload = function () { }

十二、數據存儲

localStorage不會被自動刪除，

sessionStorage 網頁關閉會自動刪除

cookie

sql

manifest文件

區別：

localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。

sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。

十三、 CSS聲明權重（選擇器）

內聯ID偽類屬性類元素/類型通用

!important會改變優先級

十四、 元素隱藏/顯示

1、dispatch：none 隱藏 不佔用空間

2、visibility：hidden 隱藏，仍然佔用空間

3、v-if 存在/不存在

4、v-show 只生成一次，佔用內存

十五、 Position

static 默認方式，沒有定位

fixed 相對於瀏覽器窗口固定定位，不佔用文檔流，其他元素會相對位移

absolute 相對於最近的已定位父元素定位，不佔用文檔流，其他元素會相對位移

relative 相對於自身的定位

sticky 粘滯定位，基於用戶的滾動位置定位

十六、 float

1、只能左右浮動

2、左右浮動，直到外邊緣碰到另一個浮動元素

3、浮動之後的元素將圍繞它

4、浮動之前的元素不受影響

5、如果是圖像浮動，下面的文本流將環繞它

6、clear聲明的元素， 屬性指定元素兩側不能出現浮動元素。

推薦使用flex布局

十七、 文字顯示…

單行

任意行

十八、 box-shadow順序

十九、 flex布局

容器屬性：

屬性 / 說明可選值

f方向： lex-direction

換行：flex-wrap

簡寫：flex-flow

主軸上的對齊方式：justify-content

交叉軸上如何對齊：align-items

多根軸線的對齊方式：align-content。

如果項目只有一根軸線，該屬性不起作用

項目item屬性:

order：排列順序，越小越靠前

flex-grow：放大比例，2比1佔用的空間大一倍

flex-shrink：縮小比例，默認1，當空間不足時等比例縮小。如果一個項目的屬性為0，其他項目都為1，則空間 不足時，前者不縮小

flex-basis：定義了在分配多餘空間之前，項目佔據的主軸空間

flex ：簡寫

align-self：允許單個項目與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch

《web前端筆記7》js字符—獲取、查找、遍歷、提取、替換方法總結

（1）字符串就是零個或多個排在一起的字符。

（2）放在單引號或雙引號之中。 ‘abc’ “abc”。

（3）單引號字符串的內部，可以使用雙引號。

（4）雙引號字符串的內部，可以使用單引號。

（5）反引號“ ：反引號允許跨行。

反引號允許字符串跨越多行並可以使用

${…} 在字符串中嵌入表達式。

（1）charAt 方法返回指定位置的字符，參數是從0開始編號的位置。

找一個字符串中的某個位置是那個字符串。

charCodeAt：返回字符串指定位置的 Unicode 碼點（十進制表示）

（2）[]

字符串可以被視為字符串數組，因此可以用數組的方括號運算符，用來返回某個位置的字符

但是字符串只是數組的相似性而已實際上、沒辦法改變字符串中的某個字符

length 只是返回了字符串的長度，該屬性沒辦法改變

字符串使用Unicode字符集，js內部所有的都是Unicode表示的。

JavaScript中的字符串使用的是 UTF-16 編碼。

toLowerCase() 和 toUpperCase()方法可以改變大小寫。

String對象是js原生提供的三個包裝對象之一。用來生成字符串對象。

（1）構造函數

字符串對象是一個類數組對象，很像數組，但不是真正的數組。

（2）將任意的值轉成字符

用於連接兩個字符串，返回一個新字符串，不改變原字符串。

從原字符串取出子字符串並返回，不改變原字符串。

它的第一個參數是子字符串的開始位置，

第二個參數是子字符串的結束位置（不含該位置）。

如果省略第二個參數，則表示子字符串一直到原字符串結束。

用於從原字符串取出子字符串並返回，不改變原字符串，跟slice方法很相像。

它的第一個參數表示子字符串的開始位置，

第二個位置表示結束位置（返回結果不含該位置）

如果省略第二個參數，則表示子字符串一直到原字符串結束。

區別：slice 和 substring的區別？

slice：

如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度。

如果第一個參數大於第二個參數（正數情況下），slice()方法返回一個空字符串。

substring：

如果第一個參數大於第二個參數，substring方法會自動更換兩個參數的位置。

如果參數是負數，substring方法會自動將負數轉為0。

由於這些規則違反直覺，因此不建議使用substring方法，應該優先使用slice。

總結：獲取子字符串，使用 slice 或 substring。

用於確定一個字符串在另一個字符串中第一次出現的位置，

返回結果是匹配開始的位置。如果返回-1，就表示不匹配。

indexOf方法還可以接受第二個參數，表示從該位置開始向後匹配。

lastIndexOf

lastIndexOf方法的用法跟indexOf方法一致，主要的區別是lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。

總結：查找子字符串時，使用 indexOf 或 includes/startsWith/endsWith 進行簡單檢查。

endsWith 用來判斷當前字符串是否是以另外一個給定的子字符串“結尾”的，根據判斷結果返回 true 或 false。

用於去除字符串兩端的空格，返回一個新字符串，不改變原字符串。

toLowerCase方法用於將一個字符串全部轉為小寫，

toUpperCase則是全部轉為大寫。

它們都返回一個新字符串，不改變原字符串

split方法按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。

如果分割規則為空字符串，則返回數組的成員是原字符串的每一個字符。

如果省略參數，則返回數組的唯一成員就是原字符串。

split方法還可以接受第二個參數，限定返回數組的最大成員數。

返回一個新字符串，表示將原字符串重複n次。

字符串補全長度的功能。如果某個字符串不夠指定長度，

會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

trimStart()消除字符串頭部的空格，

trimEnd()消除尾部的空格。

返回一個由替換值（replacement）替換部分或

所有的模式（pattern）匹配項後的新字符串。

模式可以是一個字符串或者一個正則表達式，

替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。

如果pattern是字符串，則僅替換第一個匹配項.

web前端筆記4-有講 如果感興趣、請參考之前文章