在本篇開始之前,佛心的給大家 HTML Form 表單的設計入門預習。
畢竟要了解這一篇,是需要了解HTML 裡面一些原生設計好的元件的喔!
參考連結:
https://hackmd.io/@MikanS/BypCrTfkF
好想吃漢來海港喔~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Practice/DOM/CSS/Decoration.css">
<title>DOM Get Values</title>
</head>
<body>
<input type="text" class="txt" value="想要吃甚麼?">
<select class="list">
<option value="肯德基">肯德基</option>
<option value="麥當勞">麥當勞</option>
<option value="拿坡里炸雞">拿坡里炸雞</option>
<option value="漢來海港">漢來海港</option>
<option value="寧夏夜市">寧夏夜市</option>
</select>
<script src="Practice/DOM/JS/all01.js"></script>
</body>
</html> 加入選擇器document.querySelector() 此時你可以將文本內容提取出來。
const txt =document.querySelector(".txt");
console.log(txt.value);
const list =document.querySelector(".list");
console.log(list.value)
.txt{
background:gray;
padding: 5px;
font-size: 120%;
color:beige;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.list{
background:gray;
padding: 5px;
font-size: 120%;
color:beige;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
此時我們可以來操作看看執行視窗,將.txt 賦於其他字串資料。
const txt =document.querySelector(".txt");
console.log(txt.value);
txt.value ="好像不知道要選甚麼..."
const list =document.querySelector(".list");
console.log(list.value)
將原本的肯德基 >> 拿坡里炸雞
輸入 list.value
你會得到了最新更改過的賦予值!
https://www.lovethispic.com/image/337093/the-day-you-stop-learning-is-the-day-you-start-dying
import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module(模組)…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開,不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組,今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分,稱為模塊。 下面將逐一介紹這些概念,以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module(模組)…
像是很多專案必須讀取國家資料中心的metadata,許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲;拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15, 抓取空位數量 <15。…