JavaScript 直接放入包含網頁 HTML 的文件中非常適合在學習 JavaScript 時使用的短腳本。
但是,當你開始創建腳本來為你的網頁提供重要功能時,JavaScript 的數量可能會變得非常大,并且將這些大型腳本直接包含在網頁中會帶來兩個問題:如果 JavaScript 占據了頁面內容的大部分,它可能會影響你的頁面在各種搜索引擎中的排名。這降低了使用關鍵字和短語來識別內容的頻率;這使得在你網站的多個頁面上重用相同的 JavaScript 功能變得更加困難。每次你想在不同的頁面上使用它時,你都需要將其復制并插入到每個附加頁面中,以及新位置所需的任何更改。
如果我們讓 JavaScript 獨立于使用它的網頁會更好。
選擇要移動的 JavaScript 代碼
幸運的是,HTML 和 JavaScript 的開發者已經為這個問題提供了解決方案。我們可以將我們的 JavaScript 移出網頁,但仍保持其功能完全相同。
我們需要做的第一件事是在使用它的頁面外部創建 JavaScript 代碼,即選擇實際的 JavaScript 代碼本身(不包括周圍的 HTML 腳本標簽)并將其復制到單獨的文件中。
例如,如果以下腳本在我們的頁面上,我們將選擇并復制粗體部分:
<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>
曾經有一種做法是將 JavaScript 放在 HTML 文檔中的注釋標記內,以阻止舊版瀏覽器顯示代碼; 但是,新的 HTML 標準規定瀏覽器應該自動將 HTML 注釋標簽內的代碼視為注釋,這會導致瀏覽器忽略你的 Javascript。
如果你從其他人那里繼承了帶有注釋標簽內的 JavaScript 的 HTML 頁面,那么你不需要在你選擇和復制的 JavaScript 代碼中包含這些標簽。
例如,你將只復制粗體代碼,省略以下代碼示例中的 HTML 注釋標記 <!-- and -->:
<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);
// --></script>
將 JavaScript 代碼保存為文件
選擇要移動的 JavaScript 代碼后,將其粘貼到新文件中。為文件命名,以暗示腳本的作用或標識腳本所屬的頁面。
給文件一個 .js 后綴,以便你知道該文件包含 JavaScript。例如,我們可以使用 hello.js 作為保存上例中的 JavaScript 的文件名。
鏈接到外部腳本
現在我們已經將我們的 JavaScript 復制并保存到一個單獨的文件中,我們需要做的就是在我們的 HTML 網頁文檔中引用外部腳本文件。
首先,刪除腳本標簽之間的所有內容:
<script type="text/javascript">
</script>
這還沒有告訴頁面運行什么 JavaScript,所以我們接下來需要向 script 標簽本身添加一個額外的屬性,告訴瀏覽器在哪里可以找到腳本。
我們的示例現在看起來像這樣:
<script type="text/javascript"
src="hello.js">
</script>
src 屬性告訴瀏覽器應該從中讀取該網頁的 JavaScript 代碼的外部文件的名稱(在我們上面的示例中是 hello.js)。你不必將所有的 JavaScript 放在與 HTML 網頁文檔相同的位置。你可能希望將它們放入單獨的 JavaScript 文件夾中。在這種情況下,你只需修改 src 屬性中的值以包含文件的位置。你可以為 JavaScript 源文件的位置指定任何相對或絕對 Web 地址。
你現在可以獲取你編寫的任何腳本或從腳本庫中獲取的任何腳本,并將其從 HTML 網頁代碼移動到外部引用的 JavaScript 文件中。然后,你可以通過添加調用該腳本文件的適當 HTML 腳本標簽從任何網頁訪問該腳本文件。
了解更多
次我們來說一下,HTML網頁中的定位,有很多小伙伴一定好奇,為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中,我們的各種樣式,標簽,圖片等東西都是出現在網頁的各個位置,網頁看起來很美觀,各種盒模型擺放合理,這是因為在HTML中有定位的能力,今天我們就來學習一下。
position在英語中是位置的意思,而在我們CSS代碼中position也是跟位置有關的,position有三個屬性值分別為relative(相對定位:相對于自己原來的位置進行定位,但保留自己原來的位置,別的元素無法占用),absolute(絕對定位:相對于有定位的父級進行定位,如果沒有則相對于文檔進行定位,定位會脫離文檔,不保留原來的位置,會和原來的文檔不在一個層),fixed(位置定位:他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告,他也會脫離文檔流)。
我們說完了position,接下來我們就說說他是怎么進行定位的,我們有left,top,right,bottom,五個屬性分別對應 距左邊,距上邊,距右邊,距下邊,大家注意到我在每個方向前都加了個距字,我們所做的定位是距各個方向的距離而不是移動,例:left:200px,是向右移動200像素,他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom,我們知道,滑輪是可以一直往下滑的,所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下:
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動,而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了,并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動,以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。
avaScript的執行過程
JavaScript(簡稱JS)是一種廣泛應用于網頁開發和移動應用程序的腳本語言。在瀏覽器中運行時,JS需要經歷一系列的步驟,從解析到執行,以實現所需的功能。本文將詳細說明JS的執行過程。
1. 詞法分析
JavaScript的執行過程始于詞法分析。在這個階段,JS引擎會將輸入的代碼按照規定的語法進行分解,將其劃分為一個個的標記或令牌。這些標記包括關鍵字、變量名、操作符等。詞法分析器會忽略空格和換行符,并將代碼轉化為一個標記流。
2. 語法分析
在詞法分析之后,JS引擎會對標記流進行語法分析。語法分析器會根據JS的語法規則,將標記流轉換成抽象語法樹(AST)。抽象語法樹是一個以樹形結構表示代碼語法結構的數據結構,它將代碼的邏輯結構清晰地呈現出來。
3. 作用域和作用域鏈
在執行JS代碼之前,引擎會創建一個全局作用域。作用域是一種存儲變量和函數的容器,它規定了變量和函數的可訪問性。在JS中,作用域是基于詞法作用域的,即作用域在代碼編寫時就已經確定。
當JS引擎執行代碼時,會根據作用域鏈來查找變量和函數。作用域鏈是一個由多個作用域組成的鏈表,它按照定義的順序進行查找。如果一個變量或函數在當前作用域找不到,引擎會沿著作用域鏈向上查找,直到找到為止。
4. 解釋和執行
一旦完成了詞法分析、語法分析和作用域鏈的建立,JS引擎就會開始解釋和執行代碼。解釋器會逐行讀取AST,并將其轉換為機器能夠理解和執行的指令。這個過程是逐行進行的,所以即使在代碼中出現了錯誤,也會盡可能地執行完剩余的代碼。
在執行過程中,JS引擎會創建執行上下文(Execution Context)。執行上下文是一個包含了當前代碼執行環境的對象,它包括了變量、函數和其他的運行時信息。每當一個函數被調用時,都會創建一個新的執行上下文。執行上下文會被添加到執行上下文棧中,以便在需要的時候進行訪問和管理。
5. 內存管理和垃圾回收
最后,JS引擎會進行內存管理和垃圾回收。在執行過程中,JS會使用內存來存儲變量、對象和其他數據。為了避免內存泄漏和浪費,JS引擎會定期進行垃圾回收。
垃圾回收器會檢查不再被引用的對象,并將它們從內存中釋放出來。這樣可以確保內存的有效利用,并提高程序的性能。垃圾回收是一個自動的過程,由JS引擎負責管理。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。