【javascript】3小時初學者教學

js
javascript
javascript教學
javascript入門
⭐️ 目錄 ⭐️
⌨️ (0:00:00​) 如何撰寫js
⌨️ (0:05:04) 基本資料型態 & 變數
⌨️ (0:23:16) 如何使用字串、字串用法
⌨️ (0:33:36) 如何使用數字、數字用法
⌨️ (0:42:05) 製作一個基本計算機
⌨️ (0:50:53) 陣列 array
⌨️ (0:58:32) 函式 function
⌨️ (1:12:37) if 判斷
⌨️ (1:34:27) 物件 object
⌨️ (1:40:37) 真實世界物件
⌨️ (1:44:45) while 迴圈
⌨️ (1:50:12) 密碼檢驗程式
⌨️ (1:58:44) for 迴圈
⌨️ (2:10:04) 二維陣列、巢狀迴圈
⌨️ (2:19:34) class 模板
⌨️ (2:26:23) 取得html元素
⌨️ (2:38:54) event listener
⌨️ (2:53:36) 製作一個部落格
html 初學者教學 : • 【html】1小時初學者教學 #html #...
css 初學者教學 : • 【css】2小時初學者教學 #css #cs...
python 初學者教學 : • 【python】4小時初學者Python教學...
#javascript #javascript教學 #javascript入門 #js
javascript,js,javascript教學,javascript入門,javascript初學,js教學,js入門,js初學,javascript自學,js自學,javascript教程,JavaScript编程,javascript入门,js教程,js編程,javascript 入门教程,js 入门编程,前端基础,前端基礎,javascript程序開發,js程序開發,javascript 課程,js 課程,js教学,js 教学,js入门,es6,javascript online,dayjs,reduce js,javascript for,javascript if,js find,slice js,js for,html javascript,includes js,javascript each,node js mysql,js each,js min,javascript 下載,formatdate js,js core,switchery js,jsdate,js re

[@GrandmaCan]

✏最新課程 : 網頁開發組合包 - 前端網頁開發技術一次掌握! grandmacan.com/courses/dmS4146YJasRcWA3NURx 即日起至2024/08/01前購買，即享41折優惠~

[@user-rz3sw2qp8z]

你好,想請問為什麼friends的長度是3,不是都是從0開始算嗎 2:03:12

[@user-rz3sw2qp8z]

😵‍💫😵‍💫

[@beckstrom991]

我阿嬤問我為什麼要跪在電腦前面哭 我跟他說這個教學很細心 自學js 有好一陣子了 複習了裡面的觀念真的非常的實用 希望你的頻道可以幫助到很多人！

[@GrandmaCan]

替我向你阿嬤問好😊

[@iiiix4737]

@@GrandmaCan jnijji

[@anjiecheng2772]

非常感謝你製作這個課程，受益良多。加油~

[@helloha4552]

謝謝老師 找了好多版本 你的最適合初學者

[@sherry3317]

謝謝老師救了我🥲 原本在付費學習平台上看課程，一直不懂函式邏輯，聽老師講解完之後就懂了！！

[@user-wf7mz7zp4t]

这套教学视频非常好，相当于手把手教。谢谢老师！

[@gu7054]

謝謝老師的教學~也有上網買一些線上課程，不過初學者聽一聽很容易混亂，老師教得蠻清楚的~ 不知道之後還會不會出應用的教學

[@user-we9rb4tx3j]

受益良多~感謝小白!!!

[@ken19800813]

受益良多！感謝老師的教學

[@user-qj9oo6bb6f]

辛苦老師了，對於新手很友善~~ ，期待進階的課程。謝謝

[@wongtszpong]

看了好幾片，終於看完了，也全都看懂了，感謝

[@allenchang4206]

感謝老師的教學，受益良多

[@tracywang1]

教的真棒！跟著學完了 敲碗進階Java script

[@yutsacarm8021]

看了好幾個you tuber 小白老師講得真好 還解釋了 為什麼要用這個語法的情況 還加 插些小測驗 不測試一下還真不知道自己不懂的地方在那

[@junfengfan]

javascript 讲得好清楚！

[@j870262]

謝謝老師~~~期待進階版早點出來~~!! (ᗒᗊᗕ)

[@junyang224]

感謝小白的教學 期待進階js的教學片

[@yw7913]

謝謝你 剛開始上課學寫網頁 看你的片很有用啊

[@user-by6on8ct9n]

謝謝小白 教的超好ㄉ 期待進階內容

[@GrandmaCan]

你挖到石油了嗎

[@hasenty2917]

man i just love being recommended totally understandable content!

[@user-ck8nc3qc7c]

太感謝QQ 初學者哭出來! 很有幫助! BY已迷失在語法大海ㄉ人

[@user-cl8gb6ud9r]

小白老師教學真是太利害了，完全是以初學者的視角在教學的!!

[@walkdino8771]

厲拉幹

[@py6827]

謝謝老師 1:37:24 物件 2:38:54

[@kategan5404]

谢谢老师的讲解 很仔细 我终于明白了😭

[@xufengzheng1318]

感谢教学！希望后续能有jq, vue跟react的基础教学

[@chichialin7265]

看了影片後對js更加了解，希望日後能有與資料庫互動的教學影片

[@gxkk296]

谢谢，已经第四遍了，非常适合我这样的新手。希望能推出进阶的教程，再次感谢。

[@Chin-YaoHsiao]

感謝教學!! 希望未來有JS現行主流框架的主題

[@dlibra5597]

推一個 React JS

[@wakaeewaka455]

感謝 終於看懂物件

[@cvsc00640]

優良教學!

[@sheep4484]

教學很有趣！

[@davidchen251]

非常感谢老师的课程，受益良多！ 提一点点小的建议： es6以上的版本现在好像不太提倡用 var作为变量申明了，推荐用 let做为变量，const作为常量声明 var的问题在于： 在函数式function（） {里面的var} 可以被外部引用到，另外，用var，会被它上一行的打印语句打印出来，导致次序混乱

[@Obvious0287]

沒錯~

[@Monster-lr7pb]

不好意思我是新手，想請問這樣var就沒有用處了嗎，全部都改用let就好嗎?

[@asiaboy3289]

@@Monster-lr7pb 是的，全用let取代var

[@romona76]

全部看完!!全部練習完!!

[@ppopfg]

已全部學習完畢，感謝老師的教學。

[@katsiangkoh111]

谢谢老师

[@祐祐音樂]

其實上到function的時候我還是有一些不懂的地方，希望大大可以再出一支影片講解一下!

[@frankchiou4229]

25:25 若要在字串中加上雙引號，則引號前面加\即可

[@taishi5378]

能否做個實際範例的應用程式 ，將學的這些基礎直接用上的影片

[@kangshifuym]

虽然是几年前的贴子了 现在来看 还是很不错的

[@phonedr.1013]

Pray for更新進階的版本 我看國外甚至有人是直接直播馬拉松挑戰10個project 中文卷也有人能做這種進階的講解 另外雖然這個版本的很簡單我都會了不過還是有學到一點點小東西以及複習 非常感謝

[@tinghanguo3582]

不知不覺看了你的第四部教學影片，謝謝你淺顯易懂的教學， 請問一下2：24：46時的phone_age函式寫的格式為什麼是那樣呢？

[@yingyang7380]

非常感谢，很喜欢小白的风格，期待更多课程

[@yiankwp]

密碼檢驗程式的迴圈條件部分，實測這樣寫也是可以的 let password=123456; //密碼 let input; //輸入 let out_of_limit=false; //輸入次數是否超出總次數 while(input!=password && out_of_limit==false)

[@yuwarm1159]

感謝大大，這對初入門想瞭解JS的同學很有幫助，但是如果以為工作中只用到這些的話就真的要給大家潑冷水了。 不信可以拿出工作中的一個專案來看，保證看得一頭霧水.... 目前也是以為懂這些就能找工作的人共勉之

[@kuen555]

那怎麼辦 有建議嗎

[@user-dp2lw6kl1x]

老師你好，謝謝你的教學，十分有用！ 另外，我想問問，如果我寫好的網站想複製鏈接給別人進入我的網站要怎麼做？？？ 目前好像只能自己看和用，還沒對外開放。

[@user-qv3fe7mm4e]

希望之後有更進階的教學

[@eastnoob8341]

喜欢您的讲解风格，不知后续有没有typescript的计划呀😁

[@GrandmaCan]

會納入考慮的 感謝你的喜歡~

[@hoshiyomi6848]

謝謝老師，之後會有jQuery的教學嗎

[@yuxuancao9261]

謝謝小白老師，我照著class模板那章試寫code，然後出現the keyword 'class' is reserved, 運行不出來，請問應該怎麼辦？

[@sandersnolan6895]

这一部分的学习完成后，我会再找英文的教程看，期待小白的js进阶教程，毕竟中文教程更好懂

[@user-ls1wx8or3r]

可以問一下小白，製作一個部落格的 css檔案能看一下嗎~ 有些設定看不懂

[@user-tm7cu2hw7j]

老師好 最後部落格教學的很詳細,部落格完全按照此方法寫真的有用,不過重新整理後之前寫在部落格發佈的內容會消失，相當於is不是真的改變了原始的html對吧,而希望他永久留存算是後端的內容嗎

[@jasmine097276]

請問有關於Angular的一整集嗎?

[@user-cg1jx5im9p]

手把手教学的好人

[@yutsacarm8021]

語法Document.write 跟console.log 是同一意思嗎

[@Jason__Chu]

謝謝哥，已訂閱付費❤

[@user-hf8ts1jj7h]

想請教一下為什麼我在剛開始創建一個檔案之後如果title使用英文或其他符號而非中文會顯示亂碼呢?

[@serenachang4884]

想請問小白 關於 while 迴圈的密碼登入我有一個問題， var password = 123456 var input var entry_count = 0 var entry_limt = 3 var out_of_limit = false while(password!=input && !out_of_limit){ console.log(!out_of_limit) entry_count++ if(entry_count

[@ddssus1]

// 模版語法 注意;; `為 Esc下方那個` 不是單引號 //為何不直接使用字串，原因有三： //1 字串沒辦法換行在javascript中，js程式全部擠在同一行，不易閱讀 //2 無法在字串裡面，直接帶入javascript中的東西 //3 單雙引號沖突問題

[@eastern815]

謝謝老師! PS : 你阿嬤很強😄

[@John-im7se]

想請問 2:22:56 這裡 為什麼函式寫進class裡面就不用再+function了??

[@mm370503]

感謝你的教學 很有幫助， 有個地方不懂想請問 kzbin.info/www/bejne/r4vanYprfrObnc0 這邊 ${title.value} ${content.value} 雖然我嘗試拿掉 $ 會無法正常顯示打出的標題和內容出來 不過想聽你講解 $ 這符號是什麼功能

[@user-iy5zz1hm9o]

TKS!!!

[@GrandmaCan]

CKS 0.38

[@Super_1115_]

1:33:54 其實可以這樣寫 function max_num(n1,n2,n3){ return(Math.max(n1,n2,n3)) }

[@tpa3007129]

他希望教學裡面的原理，而不是你這個套用已有的function，一樣的東西也不用重複套對吧

[@hedi_dreamland]

9/18 1:12:41 第一天上課段落 9/23 1:34:31 理解目標 如何進行 資料條件設定

[@mcl3413]

想問一下最後的部落格 我網頁重新整理就 沒了 要怎麼讓這些發文可以繼續保存下去

[@puden0122]

有Bootstrap 教學嗎~

[@deoutmus]

請問vs code 出現這個錯誤是甚麼原因??要如何排除??謝謝

[@850425ian]

1:30:34 請問一下為什今天有下雨 是給1000元呢 而不是沒有下雨

[@leowjiayou1384]

哈喽小白老师你好， 我想请教您关于 How to loop multiples images infinitely using JavaScript. 这是我们学校老师出的难题， 希望小白老师能抽空一点时间来帮帮我, 谢谢您， 感恩感恩！！！ Y_Y

[@hongzi-gui370]

先看過C#教學 再來看這個 怎麼用法都很像！ 酷

[@yfeng6267]

你好！我想请问下在密码检验程式章节中遇到代码和视频一致情况下第二个password！下有波浪线提示：非 null 断言只能在 TypeScript 文件中使用。ts(8013)是什么原因呢？导致代码无法运行

[@kooisimlee9823]

老师什么时候教中级 JavaScript？

[@milkycat9562]

感謝教學!想請問script標籤放越下面越好嗎?比較不容易出錯

[@GrandmaCan]

原則上是這樣沒錯 不過還是要看需求來決定 如果希望js越早執行越好的話是可以往上擺的 至於出錯的問題如果是怕js取不到html元素的話，是可以用load事件來解決的，像是這樣 window.addEventListener("load", function() { //取html元素 });

[@milkycat9562]

@@GrandmaCan 了解! :)

[@YJZ1997]

太感謝拉!!!!!!!!!!!!!!!!!!!!!

[@YJZ1997]

02:17:27

[@YJZ1997]

01:50:14

[@YJZ1997]

02:01:59

[@metallidraw]

HEY hello from FRANCE!! it's very funny to see programming in japanese! continue I enjoy it ^.^

[@metallidraw]

@@g4o2 sorry dude, thx for the answer.

[@cynthia168]

老師請問一下，關於 (2:10:04) Two-dimensional array, nested loop這邊的quiz 為何要使用巢狀來寫出此陣列? 如果光是以下的部分，也可以得到同樣的結果，是代表不同的意義嗎? for(var i=0; i

[@user-hx8zb4ck6e]

我的理解是， 如果使用巢狀迴圈方式去取得二維陣列的話，會明確得出的是一個數字一個數字。 而如果使用你的方式去取得二維陣列的話，得出的是一整行一整行。 之後如果要取得更高維的陣列，例如三維陣列，使用巢狀迴圈的時候，可以使用三個變數去取。 希望有回答到你的問題

[@hahaha8552]

你這樣寫的話每一行都是一個一維陣列 無法得出最低維的元素 例如你印出number[0] 實際上是[1,2,3]是一個整體一個元素 而不是各別的1 2 3有三個元素 只是印出來看起來是一樣的

[@averylaf]

希望还有jquery的教程

[@user-ih4se5fr4h]

您好，小白打擾一下，最後面建立一個部落格，我打跟您一樣的程式碼，但都不能輸入文章，請問有可能是什麼原因呢？

[@user-ss6cs7gi8h]

45:32 小白好年輕！！

[@user-vt4vv4bf9q]

請問老師 為什麼我在我的html 打標籤 他沒有反應 是不是應該用html5 要下載嗎

[@jwang6069]

想請教小白老師 3:04:22 按鈕按下去後，出現的 是加在CSS裡面嗎? 可以參考一下您的style.css的code嗎

[@sennen.]

我猜是css中針對 article 加上border-bottom

[@johnwang2196]

@@sennen. 感謝，試了以後確實是可以有這樣的效果

[@kazawan]

Let const定义变数可以说一下吗？

[@user-mm5er5mr2u]

希望可以教jQuery

[@user-jl8eb6uy8m]

有没有LINUX的教程?

[@haotan2460]

好厲害啊！ 準備面試一家公司，要求JS。 看完這個視頻，繼續努力。 JS真是强大啊。

[@kuen555]

請問做完這個可以做出面試的JS?

[@Min-gh2gw]

老師講解得很好 請問老師，為什麼我在 (1:37:35) 這個地方的 js 顯示不出來 以下是我照著打的程式碼~ var person ={ name:"小旻", age:23, is_male:ture }; document.write(person.neme);

[@Lin-vp5yk]

(person.name) name打錯?

[@Min-gh2gw]

@@Lin-vp5yk 哈哈 我恍然大悟

[@user-xc1ju6dx5n]

1:44:45 請問演員資訊的範例，有辦法一次性叫出演員的所有資訊嗎? 有辦法一次性叫出所有演員的所有資訊嗎?

[@feng6485]

console.log(movie) 或 console.log(movie.actors) 不確定你要的是哪種

[@hahaha8552]

for(let i = 0 ; i < movie.actors.length( ) ; i++){ console.log(movie.actors[i]); }

[@HaydenCornerOfKnowledge]

你好小白， 我看完了整个教学 学习了很多 但是有一个问题想请教你一下 在密码检验程式那里 为什么while里面out_of_limit的条件在上面已经设定为false了 为什么在while里面是用 "! out_of_limit"而不是直接用"out_of_limit"呢？因为密码不是应该只要他没有超出limit的话就可以继续在while loop里面跑吗？

[@aass-lt3vv]

如果只打out_of_limit 這代表的意思是等於ture而不是false 那要執行迴圈的話out_of_limit要在false 所以加! 就會變成等於false 沒有加的話迴圈不會執行

[@HaydenCornerOfKnowledge]

@@aass-lt3vv 你好 谢谢你的解答， 这样的意思是上面的var out_of_limit = false 在 while loop的时候就会自动变成true 所以我们要加！把它变成false， 请问是这个意思吗？

[@aass-lt3vv]

@@HaydenCornerOfKnowledge 不是那個意思跟你設定變數沒有關係 while迴圈條件式如果只打變數甚麼都不加 那它的預設條件就變數=ture的時候執行 這樣的話代表你其實把變數先設為ture來執行 等滿足條件後用false跳出 反過來這個意思也是一樣的 只是我們人自己看會不好判斷這是開還是關

[@HaydenCornerOfKnowledge]

@@aass-lt3vv ermm 这样的意思是不管我上面如何设定 只要进到while loop的话他就会是true对吗？如果理解错了真的不好意思 。。

[@aass-lt3vv]

@@HaydenCornerOfKnowledge 對 所以你要設false 有兩個方式 1.加！ 2.加==false

[@KuanYuShi]

你好 請問為什麼return那裡寫好後網頁會顯示不出來?

[@helloha4552]

老師請問一下 console. log 跟 document. write 基本上是同樣的意思?

[@psp-cr3ts]

不是喔，console.log基本上就是紀錄的意思，是讓你用來查看變數以及除錯使用。 document.write是將你輸入的字串解析成html後放入你的dom裡面

[@helloha4552]

@@psp-cr3ts 謝謝

[@helloha4552]

@@psp-cr3ts 謝謝老師

[@user-uu1ug5rf8q]

非場感謝...

[@gemeil8917]

什麼時候講一下c#

[@user-hg2md8zt6z]

請問js後面會規劃有專案的範例嗎？您講的超仔細明瞭，超適合學習的。

[@mingweiyeow368]

请问能不能做个jquery的教学

[@GrandmaCan]

還有有很多主題想做 不過我會納入考慮的~

[@ZephyrQQ]

@@GrandmaCan 敲碗jquery

[@wfbtmcc]

請問你用的是什麼編輯軟件，謝謝.

[@user-bo2tj1wd2g]

vs code

[@user-cf6iy5yi6l]

为什么我的function的（）是紫色的?我也执行不到怎么办，救救我。。。

[@osimport9274]

請教一下大家..如果多行文字前面都要加註解..就是加//..暫時不使用要怎麼按呢?

[@boaz411133]

框起來Carl /?

[@osimport9274]

@@boaz411133 謝謝你.終於解開我多年的疑惑.也救了問號鍵一命

[@boaz411133]

@@osimport9274 不客氣，我也曾經被困擾過一下下

[@jyoukuo9816]

請問要註解一段程式，可以按什麼快捷鍵?還有 js如果後面不加分號會怎樣嗎?感覺沒差 謝謝小白老師!!

[@yutsacarm8021]

Control+/

[@jyoukuo9816]

@@yutsacarm8021 感謝!

[@user-vo3ll2zv7d]

2:23:20 class模板的時候為甚麼要加一個 new

[@mm370503]

目前我知道應該是 "創建" 的意思， 看有沒有前輩可以指導。

[@wade6032]

簡單來說 class Phone(第3行) 這裡的Phone是一個"類別"，像是藍圖的東西，可以看到裡面很多個變數(有number、year、is_waterproof)，稱為屬性，每個變數在"被建立"時都會被電腦分配一個記憶體空間，但是這個類別並不能直接使用的，因為他只是一張藍圖。 那我們要如何使用呢? 有一個方法就是使用"new"這個運算子來建立物件(已經建立的物件稱為"實例")，而且new會在建立時初始化變數，這樣就可以在建立完馬上使用上面所說的三個變數。 第14行裡的phone1代表你所建立Phone物件的實例的名稱。 我的理解是這樣，有錯請指正。

[@YouZhe0305]

感覺class像是基於建構式出來的東西，或許原理是一樣的

[@shamking119]

用class创建的类就像一个模板，我们要使用这个模板来用new命令为这个模板创建一个实例，这个实例是具有类所定义的属性的了。