Schalom Divac: [程式設計]Javascript

顯示具有 [程式設計]Javascript 標籤的文章。顯示所有文章

2024年12月11日星期三

在 JavaScript 中，你可以使用幾種方法來修改 div 元件顯示的內容

1. 使用 `innerHTML` 修改內容

innerHTML 屬性允許你獲取或設定元素的 HTML 內容。這對於修改 <div> 內部的 HTML 結構非常有用。

範例：

<div id="myDiv">Hello World</div>

<script>
  // 修改內容
  document.getElementById("myDiv").innerHTML = "New Content!";
</script>

修改後，<div> 的顯示內容會變為 "New Content!"。

閱讀全文＞＞

2024年12月10日星期二

在 JavaScript 中，取得 HTML 元件可以使用幾種不同的方法

根據你想取得的元素特徵（例如 ID、類別、標籤等），以下是幾種常見的方式：

1. 根據 `ID` 取得元素

如果 HTML 元件有一個唯一的 id 屬性，你可以使用 document.getElementById 方法來取得它。
<div id="myDiv">Hello World</div>
const element = document.getElementById("myDiv");
console.log(element);  // 輸出: <div id="myDiv">Hello World</div>

2. 根據 `class` 取得元素

閱讀全文＞＞

2024年8月4日星期日

[javascript] undefined null NaN

undefined

是一種「值」，它的值叫做 undefined。
type 也是很特別的，叫做 undefined：

檢查方式
if (typeof firstName !== 'undefined')

閱讀全文＞＞

2024年8月1日星期四

[javascript] 隱藏span裡太長的文字

在網頁中隱藏過長的文字，可以用 CSS 的 overflow、white-space 和 text-overflow 屬性來實現。

範例程式碼

HTML

<div class="text-container">
    <span class="text">這是一段非常長的文字，可能會超出容器的寬度，因此我們需要將其截斷並隱藏。</span>
</div>

閱讀全文＞＞

2023年6月20日星期二

特殊字元 HTML 編碼對照表

Character HTML Entity Description

Number Name

" " " quotation mark

& & & ampersand

' ' ' apostrophe / apostrophe-quote

< < < less-than sign

閱讀全文＞＞

2022年6月5日星期日

【暫存】Nodejs筆記

【Nodejs】

Q: These critical programs are missing or too old: gawk bison

sudo apt-get install gawk

sudo apt-get install bison

閱讀全文＞＞

2021年12月28日星期二

typeof 用法

var a = 3;
console.log(typeof a); // number

閱讀全文＞＞

2021年10月26日星期二

2021年4月1日星期四

建立正規式

正規式也可以叫做正則表達式，在 JavaScript 中可以使用兩個 / 或 new RegExp 來建立，且其型別為物件

const ares = /a+87/
const ares = new RegExp('a+87')

typeof /a+87/
// object

如需要測試也可使用regex101

閱讀全文＞＞

2021年2月2日星期二

Promise的白話理解及範例

Promise 概念：

想像一下你是個孩子，你媽承諾(Promise)你下個禮拜會送你一隻新手機。

現在你並不知道下個禮拜你會不會拿到手機。你媽可能真的買了新手機給你，或者因為你惹她不開心而取消了這個承諾。

這就是一個 Promise，一個 Promise 有三種狀態：

pending 未發生、等待的狀態。到下週前，你還不知道這件事會怎樣。
resolved 完成/履行承諾。你媽真的買了手機給你。
rejected 拒絕承諾。沒收到手機，因為你惹她不開心而取消了這個承諾。

總結來說狀態有等待、成功、失敗，使用情境就是我們當前還不知道結果，需要等待結果發生才繼續後續的處理。

閱讀全文＞＞

2021年1月7日星期四

[Javascript] 在js中call另一個js的function

簡短的說明如何在index.html檔中呼叫test.js檔的function，而test.js中又呼叫showLog.js中的function。最近在寫js code，js檔發展的愈來愈大，終於忍不住想把它拆開來模組化。上網找資料，不知道為什麼找到的總是和node.js有關，不然就是要裝一些其它軟體，瀏覽器上的東西怎麼可能這樣搞，東拼西湊終於試出來，簡單的範例以及中間遇到過比較討厭的問題寫在下面。

Access to script at 'file:///User/test.js' from origin 'null'

has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes:

http, data, chrome, chrome-extension, https.

閱讀全文＞＞

2021年1月4日星期一

【Javascript】建立和存取動態變數名稱

對寫C/C++的人來說，javascript和php都有一個神奇的功能，就是動態變數名稱。在javascript裡，不管是一般動態變數，或者物件裡的成員是動態變數，都可以使用eval()方法存取（PHP我要回去翻翻以前的code）。

有時候會有一個需求，想在某種情況代入變數Value_A，某些時候代入變數Value_B，那可能會寫：

var output = '';

if (status=='A'){

output = Value_A

}

閱讀全文＞＞

2020年12月21日星期一

【JavaScript】setTimeout 與 setInterval的用法

setTimeout

setTimeout() 的作用是在延遲了某段時間 (單位為毫秒) 之後，才去執行「一次」指定的程式碼，並且會回傳一個獨立的 timer ID，使用格式有下列幾種：

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);

var timeoutID = scope.setTimeout(function[, delay]);

var timeoutID = scope.setTimeout(code[, delay]);

例如：

var timeoutID = window.setTimeout(( () => console.log("Hello!") ), 1000);

閱讀全文＞＞

2020年12月6日星期日

Javascript處理JSON常用的函式

JSON is？

JSON 就是 JavaScript Object Notation，JavaScript 物件表示法
JSON 為純文字格式
JSON 具自我描述性、易於人理解、閱讀和編寫，同時也易於機器解析和生成
JSON 較 XML (eXtensible Markup Language) 小、快且更易解析

閱讀全文＞＞

2020年8月22日星期六

JSON格式解析

JSON格式

簡單來說，就這二句重點：

物件(object)用大括號 { }

陣列(array)用中括號 [ ]

物件(object)

用key：value的方式儲存，一個鍵(key)對應一個值(value)，鍵(key)一定要用文字。

{"subject":"Math","score":80}

以上例來說，subject這個key有個值叫Math、score的值為80

閱讀全文＞＞

2020年8月3日星期一

Javascript新手筆記

Debug

用console.log把偵錯訊息顯示在主控台上，在瀏覽器chrome和firefox上只要按下F12，就可以在裡面找到主控台選項，網頁運行時的log訊息可以在這裡觀察。

接下來看看console.log可以將資料用哪些方式顯示在主控台：

1. 布林值(true or false)

用console.log()印大於小於之類的比較算式，就會顯示布林值。

var x = 123;

console.log(x > 2);

顯示結果：

閱讀全文＞＞

2020年5月26日星期二

什麼是 jQuery & 重要基礎筆記

jQuery

由JavaScript，query（查詢）的意思組成。也就是說，這個工具庫在設計時主要考濾是基於JavaScript的查詢。那麼在JavaScript中查詢主要是依靠DOM（文檔對象模型）結構中的節點。而在網頁中的所有內容我們都可以稱之為節點，比如文檔節點、標籤（元素）節點、文本節點（普通文本）、注釋節點、屬性（標籤中這屬性）節點等。這個工具庫的主要特點就是簡化對頁面節點操作的功能的封裝。使前端人員可以更高效、快速的實現頁面交互功能。

Ajax

全稱是Asynchronous JavaScript and XML(異步的JavaScript與XML)，主要是在網頁沒有刷新頁面的時候，使用js與伺服器進行交互的一種技術。

閱讀全文＞＞

訂閱：意見 (Atom)

網頁

2024年12月11日 星期三

1. 使用 innerHTML 修改內容

範例：

2024年12月10日 星期二

1. 根據 ID 取得元素

2. 根據 class 取得元素

2024年8月4日 星期日

undefined

檢查方式

2024年8月1日 星期四

範例程式碼

HTML

2023年6月20日 星期二

2022年6月5日 星期日

2021年12月28日 星期二

typeof 用法

2021年10月26日 星期二

2021年4月1日 星期四

建立正規式

2021年2月2日 星期二

2021年1月7日 星期四

2021年1月4日 星期一

2020年12月21日 星期一

setTimeout

2020年12月6日 星期日

JSON is？

2020年8月22日 星期六

JSON格式

物件(object)

2020年8月3日 星期一

Debug

2020年5月26日 星期二

jQuery

Ajax

2024年12月11日星期三

1. 使用 `innerHTML` 修改內容

2024年12月10日星期二

1. 根據 `ID` 取得元素

2. 根據 `class` 取得元素

2024年8月4日星期日

2024年8月1日星期四

2023年6月20日星期二

2022年6月5日星期日

2021年12月28日星期二

2021年10月26日星期二

2021年4月1日星期四

2021年2月2日星期二

2021年1月7日星期四

2021年1月4日星期一

2020年12月21日星期一

2020年12月6日星期日

2020年8月22日星期六

2020年8月3日星期一

2020年5月26日星期二