iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

網頁前端基礎&Vue.js系列 第 16

認識與建立javascript(DAY16)

Javascript是一種直譯式語言,直譯式就是在執行時會一行一行的動態直譯然後執行,在執行上速度會比較慢,但是有較靈活的型別處理,也就是說不需要特別去宣告資料型別,它會依各種情況去做型別的轉換;javascript也會區分大小寫。而javascript會給瀏覽器端執行,所以在用戶端是看的到開發者的原始碼的

  • 主要的應用和效果

1. 能夠與使用者產生更多的互動
2. 更多的網頁效果
3. 動態更新網頁內容
4. 提供表單驗證功能(也減少伺服器的驗證負擔)
5. 事件驅動(例如點選一個按鈕來觸發javascipt的功能)

  • 建立javascript(2種方法)

1. 內嵌於html中

<head>
  <script></script>
</head>

2. 外部引用.js檔

  1. 在下圖mark的部分(鐵人project)按下滑鼠右鍵
    https://ithelp.ithome.com.tw/upload/images/20210928/20140225ekbLhM7XR1.png
  2. 按下滑鼠右鍵後可以看到下圖,然後點選”加入”,再點選”javascript檔”,這樣就建立完成了。
    https://ithelp.ithome.com.tw/upload/images/20210928/20140225n8A2m2FXYE.png
  3. 在html中引用javascript檔
  <head>
    <script src="XXX.js"></script>
  </head>
  • Javascript運算元

+ - * /
== != > < >= <=
&& ||
% (餘數)
** (次方)
===(值得表較)
!== (值和資料型別的比較)
  • Javascript流程控制

for(迴圈)
if-else
switch
while
do-while
  • Javascript常見資料型別(會自動判別型別)

let number = 123; //數字
let string = "123";//字串
let boolean = true; // (false),布林值
let array = [123, "123"]; //陣列
let x =new Date();//日期object

補充:let是變量的意思,而還有其他的變量,像是var,let和var的差別在於let在同一區塊域內不能重複設定同一個變數名稱(例如已使用過let x,則不能再使用x這個變數名稱),而var則可以let變數的範圍會受限在block scope(代碼塊區域)中,而var則不會受限在block scope中,也就是全域變數的意思。
https://ithelp.ithome.com.tw/upload/images/20210928/20140225p5teZ5ltc8.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140225L1ssgR1LaH.pnghttps://ithelp.ithome.com.tw/upload/images/20210928/20140225gPeGBGL2CY.png

結語

這篇文章介紹了什麼是Javascript、主要的應用和如何建立javascript,也稍微介紹了運算元、流程控制、常見的資料型別以及常用的輸出方式,下一篇將會介紹函數的呼叫與動態變更網頁內容。


上一篇
CSS 定位屬性(DAY15)
下一篇
javascript函式與動態變更網頁內容(DAY17)
系列文
網頁前端基礎&Vue.js30

尚未有邦友留言

立即登入留言