2024-06-29|閱讀時間 ‧ 約 24 分鐘

Web開發日誌:第0話

你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。

首先先介紹我的開發環境:

我用了vscode當編譯器，接著下載JQuery(這是js的函式庫，會打的字數會少很多，而且還寫好兼容性了，真香)，最後在vscode裝Live Server 跟JQuery Code Snippets

痾...反正跟這個差不多

二日目：在VScode 撰寫JavaScript。插件。Chrome檢查工具。 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

還有jquery:

jQuery入門 - HackMD

如果真的沒辦法的話，請留言跟我講，人數太多的話我會在寫一篇安裝教學。

如果你安裝好了

那就創一個資料夾，創一個index.html 跟 list.js

新創好的檔案

其中jquery-3.6.0.min.js 是我從jquery的官網把.min.js檔下載下來的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="button"></button>

    <script src="jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>   
</body>
</html>

index.html

$(function () {
    $(".button").on('click', function () {
        console.log('hello world');
    });
});

script.js

然後將程式複製進去

如果都好了，那就點擊右下角的live server

接著進入所要的資料夾

接著左上角會有一個按鈕，點擊它。

接著按f12，去到console的地方

出現hello就代表成功了!!!

分享至

成為作者繼續創作的動力吧！

React tailwindcss web

追蹤

從 Google News 追蹤更多 vocus 的最新精選內容

你可能也想看

發表回應

成為會員後即可發表留言