Web開發的大爆炸：利用JavaScript進行移動

我們進入更復雜的主題之前，我們本周回來探索Web開發的基本元素。本周焦點是JavaScript。如果你還沒有檢查出我的以前的博客為Web開發的三連勝，請查看我的博客文章在HTML和CSS。

JavaScript：曾經令人擔憂的技術現在（并且已經有一段時間了）是事實上的開發選擇。它允許您在網頁上編寫動態行為。

JavaScript是我們稍后將要探討的常用框架的基礎。它是MEAN堆棧的基礎 - 當今Web開發的標準。MEAN代表M：MongoDB（后端/數據庫），E：Express（易于在HTTP后端使用Node.js模塊），A：Angular（頁面結構的前端框架）和N：Node.js 。我們將在未來幾周內探索Node.js！

但在涵蓋所有性感內容之前，讓我們了解JavaScript的基礎知識以及它如何與頁面交互。JavaScript（或從此以后的JS）允許我們操縱DOM（文檔對象模型）。DOM幫助我們理解HTML頁面上的內容（因為HTML是一個文檔）。它將HTML頁面分解成節點，我們可以使用JS等其他語言輕松理解節點。

為了向你展示一個例子，讓我們在頁面上添加一些帶有一些JS的按鈕。打開你的index.html文件。

在您的個人資料鏈接下，我們定義一個新的按鈕標簽。

Load the picture

也許添加一對斷線（） - 這相當于在word文檔上敲擊回車鍵。這是一個不好的造型習慣，但是對于初學者來說，這將是沒問題的，因為當我們在接下來的幾周談論Bootstrap時我們會解決它。

保存您的更改，然后在瀏覽器中打開index.htm文件。

這將在您的頁面上創建一個新的按鈕元素。

如果你點擊這個按鈕，它將不會執行任何操作。讓我們改變它！這是你添加一個小JS的地方。我們可以定義“ onclick ”事件屬性。事件屬性允許我們在元素與之交互時觸發JavaScript代碼。例如，onclick按鈕時觸發......等待它......點擊！

操縱DOM的另一個關鍵部分是ID。所有標簽都應該有ID。這使他們可以通過他們的ID進入。

讓我們在我們的按鈕下面定義一個占位符圖像標簽（），但一定要給它一個ID！

<img id="myImage">

現在我們可以通過ID myImage來訪問這個元素。

在該按鈕中，將onclick屬性添加到按鈕打開標記。所述的onclick值將是一個小的腳本，將更新的值SRC為屬性圖像元素。我們可以通過引用其ID 來訪問img標簽，然后我們可以設置src值。要為JS中的屬性賦值，我們使用一個equals（=）。使用多個equals是一個等價操作符，我們將在一分鐘內完成。

目前，著眼于將圖像域的源屬性設置為圖片。我使用了JS標志的在線圖像。

document.getElementById('myImage').src='http://m.jungjaehyung.com/uploadfile/2024/1012/20241012051842346.png'

所以你的按鈕應該看起來像這樣：

<button onclick="document.getElementById('myImage').src='http://m.jungjaehyung.com/uploadfile/2024/1012/20241012051842346.png'">Load the picture</button>

保存您的更改，然后在瀏覽器中打開index.html文件。

你將有一個按鈕，你現在可以采取行動。點擊按鈕，你的圖片將加載到你的按鈕旁邊。

如果我們希望能夠重用它，我們也可以將JS移出元素定義。

在您的目錄中創建一個新的script.js文件。

我們來定義一個新的函數。這樣，如果需要，多個元素可以訪問它。函數用于包含調用時應執行的代碼塊。當一個函數被調用時，只有該函數塊內的代碼才會被執行。

在新的script.js文件中定義一個空白函數。

function onPictureButtonClicked() {
}

給你的函數命名是一個好主意，所以很容易理解它們的功能。

現在，將onclick 屬性中的代碼復制到您的新函數中。

function onPictureButtonClicked(){
document.getElementById('myImage').src='http://m.jungjaehyung.com/uploadfile/2024/1012/20241012051842346.png';
}

保存對script.js文件的更改。

要在index.html文件中使用這個新函數，我們需要添加一個對文件的引用（類似于我們對CSS樣式表的操作），然后在onclick 屬性中調用該函數。

為了告訴index.html文件它可以引用script.js文件中的JS代碼，我們在頭文件中定義一個標簽。src是script.js。

<script src="script.js"></script>

這讓我們的頁面知道可引用的JS可以在這個文件中找到。

最后，更新按鈕。在按鈕定義中，刪除以前的代碼并將其替換為 onPictureButtonClicked()。這將為該onclick 事件分配該功能。

保存您的更改。你的頁面的行為將是相同的。在我們繼續之前對它進行測試，但是與網頁沒有明顯區別。

現在讓我們說我們想要改變這個動作，這個圖像是否已經加載？

我們可以讓JS為我們完成這項工作，但在我們完成JavaScript代碼之前，我們需要對HTML進行一些調整。還記得我說身份證重要嗎？好吧，我們忘了在我們的按鈕上添加一個，所以讓我們來添加一個！

<button id="pictureButton" onclick="onPictureButtonClicked()">

我們要確保按鈕始終反映我們正在采取的操作，因此我們需要在更改功能時更新文本。

保存您的更改，然后回顧script.js文件。

在你的 onPictureButtonClicked 功能中，我們需要做一些改變。

首先，我們保存src屬性值的副本。我們需要多次引用它，所以將它定義為一個變量并在我們需要該值時使用該變量會更容易。

我們可以通過使用var和名稱來創建一個變量。在你的函數定義下面定義這個權利（所以這是你函數的第一行）。

var imageSrc=document.getElementById('myImage').src;

現在無論何時我們需要調用函數時圖像src的初始狀態，我們都可以引用imageSrc。

讓我們根據src的當前值采取行動。如果什么都沒有，讓我們加載一個圖像。如果有圖像，讓我們刪除圖像。

你看我在前一段中如何使用ifs？JS符號與我們如何發聲以及如果，然后聲明英語非常相似。如果imageSrc為空，則設置一個值。

if(imageSrc=='') {
document.getElementById('myImage').src='http://m.jungjaehyung.com/uploadfile/2024/1012/20241012051842346.png';
}

這里我們使用了double equals（==）來做比較。這做了一個價值比較。JS中的最佳實踐聲明您應該使用三元組equals（===），因為它比較了值和類型，所以它們確實是等價的。這可能非常棘手，但對于空值非常重要，因為并非所有的空值都是相同的。

否則，請刪除該值。

else {
document.getElementById('myImage').removeAttribute('src');
}

（注意：由于許多原因，包括可訪問性，src是圖像的必填字段，所以這也不是一個好習慣，這純粹是為了演示目的。）

我之前提到，按鈕應始終說明其預期的操作。如果我們的代碼刪除圖像，“加載圖像”是否有意義？不。所以我們需要解決這個問題。

您可以更新按鈕文本，類似于我們如何更新圖像的src元素，除了將使用的src屬性之外 innerHTML。試一試！

需要一些幫助？

你的script.js文件應該如下所示：

function onPictureButtonClicked(){
var imageSrc=document.getElementById('myImage').src;
if (imageSrc=='') {
document.getElementById('myImage').src='http://m.jungjaehyung.com/uploadfile/2024/1012/20241012051842346.png';
document.getElementById('pictureButton').innerHTML="Remove Picture";
} else {
document.getElementById('myImage').removeAttribute('src');
document.getElementById('pictureButton').innerHTML="Load Picture";
}
}

保存您的更改，然后在瀏覽器中打開index.html文件。

如果您點擊該按鈕，圖像將加載并且按鈕文字將變為“刪除圖像”。如果再次單擊該按鈕，它將刪除圖片并將按鈕文本更改為加載圖像。整齊！

這只是一個小小的入門知識，你可以用JavaScript做什么！如果我要涵蓋所有內容，我想我會這樣做3年以上！

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端開發-拖拽上傳文件</title>
</head>
<body>
  
<script>
document.ondragover=(e)=> {
  e.preventDefault()
}
document.ondrop=(e)=> {
  e.preventDefault()
  // 某些版本的 Firefox 無視 preventDefault
  // 需要執行 stopImmediatePropagation 防止瀏覽器打開文件
  e.stopImmediatePropagation()
  const file=e.dataTransfer.files[0]
  const img=new Image()
  img.src=URL.createObjectURL(file)
  document.body.appendChild(img)

  console.log(file)
  // 如何上傳文件？
  // 參見 https://www.toutiao.com/article/7298667864926536242/
}
</script>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:400px; height:300px; background:#CCC; position:relative;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

if(l<0)
{
l=0;
}
else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
{
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}

if(t<0)
{
t=0;
}
else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
{
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false;
};
};
</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
</body>
</html>

在線咨詢

上一篇：前端：使用CSS干JavaScript的活，Pseu
下一篇：WeCam，一款非常好用的虛擬視頻及直播軟件（pc）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發的大爆炸：利用JavaScript進行移動

否則，請刪除該值。

需要一些幫助？

您的項目需求