Web開發日誌:第0話

更新於 發佈於 閱讀時間約 3 分鐘
你好,在下最近在學習開發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檔下載下來的

raw-image
<!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

raw-image

接著進入所要的資料夾

raw-image


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

raw-image


接著按f12,去到console的地方

raw-image


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

avatar-img
2會員
5內容數
這是一篇帶新手快速入門的Web教學。會帶你製作第一個todo-list,雖然看起來很簡單,但其實蘊含很多觀念。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
本文介紹瞭如何寫 HTML 標籤,製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例,讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
可能包含敏感內容
先說一下我的背景,非本科系從 2022/3 開始接觸到前端領域,在摸索過程中遇到六角學院,買了 HTML 和 CSS 課程從基礎學起。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
本文介紹瞭如何寫 HTML 標籤,製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例,讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
Thumbnail
人們對於學習HTML的興趣持續增長,本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程,為讀者提供全方位的學習體驗。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。