[Day 09 - JS] 网页第三大核心技术 — Javascript

What is Javascript?JavaScript (简称 JS)是一种 直译式(Interpreter) 程序语言,程序码会由上到下立即执行,它与HTML、CSS 并列网页三大核心技术,HTML 代表网页的架构、CSS 负责网页的视觉外观,而 JavaScript 则是用来控制网页的各种互动与操作,并且 JS 不只可以用於网页,也可以用来开发後端服务器上的应用程序。

引入 Javascript 的方法

跟 CSS 一样,要使用 Javascript 就需要将程序码连结套用到 HTML 上,总共会有三种方法:Internal JavaScript、External JavaScript 和 Inline JavaScript,其中 External JavaScript 是最常见而且最适合的JS引入方法。

External JavaScript

使用 <script> 连结 JS 档案,比起其他两种方法较不会破坏 HTML 结构。

<script type="text/javascript" src="档名.js"></script>

< script > 放哪里?

Javascript 可以被放在 <head></head><body></body> 区块中:

  • 放在 <body></body> 的最底下:浏览器先载完网页内容元件,才会执行 Javascript,如果程序码中有需要取得网页元素,就需要等待网页内容元件加载完才读取得到。

    <body>
        <!-- 放在 body 的最後 -->
        <script type="text/javascript" src="档名.js"></script>
    </body>
    
  • 放在 <head></head>:浏览器先执行 Javascript 再往下读取 <body> 的内容,通常会用在不需要等待网页内容载完才运行的时候。

    <head>
        <script type="text/javascript" src="档名.js"></script>
    </head>
    

Javascript 基本语法

接着就让我们开始来了解 Javascript 的语法和基本功能,除了简单介绍观念与用法之外,会搭配一些实作小范例,让读者更清楚如何撰写 JS。

宣告变数

你可以把变数当作是一个容器,可随意储存指定的值(资料)。指定值之前要先进行变数宣告来创立变数,会透过 var 或是 let 来进行宣告。另外还可以用 const 宣告一个只可读取不能修改的常数。

let name = "May";      //let 用来宣告只作用在当前区块的变数
var score = 80;        //var 宣告的变数会是全域变数,或是作用在整个function
const isPass = true;   //const 宣告的常数不能修改值

资料型别 (Data types)

如果尚未指定数值给该变数,该变数的值会是 undefined,你可以指定各种资料值给变数或常数,比如字串(String)、数字(Number)、布林值(Boolean) ...。

let value;            // undefined
let name = "May";
let score = 80;
let isPass = true;

流程控制 — 条件陈述式

条件陈述式让我们指定要在哪些情况下分别执行不同的程序码,在 JavaScript 中可以使用 if...elseswitch 来进行条件执行。

if...else 来说明,指定一个不是 true 就是 false 的条件给 if,当逻辑判断为真时执行 if 内的区块,逻辑判断为否则执行 else 内的区块。

if(指定条件){
  //当指定条件为true时执行
}
else{
  //当指定条件为false时执行
}

而指定的逻辑条件,通常会透过运算子来辅助。运算子有算术运算子、比较运算子...等等,算数运算子包含加+、减-、乘*、除/,比较运算包含小於<、大於>、不等於!==、严格等於===,可以让我们进行数值比较、运算、连接字符串等。

'Bingo'+' says hello!'    //'Bingo says hello!'
5 * 3                     //15
10 < 6                    //false
'Chris' === 'Ch' + 'ris'  //true

小结

直接利用一个小范例来当作结尾,复习今天提到的一些观念。现在我们想要判断一个学生的成绩是否及格,总共会需要姓名、成绩、判断结果三个资料,指定学生叫做 May、成绩为90分:

let name;
let score;
let result;

name = "May";
score = 90;

利用 if...else 进行成绩及格判断,成绩大於60分就是及格,反之则不及格,将结果储存在 result 内:

if(score >= 60){
  result = "PASS"
}
else{
  result = "FAIL"
}

印出判断的结果,这样就完成了今天的内容罗!

console.log(`${name}的成绩结果是${result}`)
//"May的成绩结果是PASS"

如果文章中有错误的地方,要麻烦各位大大不吝赐教;喜欢的话,也要记得帮我按赞订阅喔❤️

参考资料


<<:  Day7 - 条件,重复,回圈与互动- 回圈的设定

>>:  Day 22 实作 main_bp

D9. 学习基础C、C++语言

D9: while跟 do-while的差别 我原本一直以为do-while是要判断式成立时才会执行...

[ 卡卡 DAY 24 ] - React Native 表单套件用 Formik 搭配 Yup 验证 (下)

经过 Day23 的讲解,大家应该都有初步的了解及安装完毕吧 XD 今天我们来运用 Formik ...

Day 29 (Jq)

1.empty、remove、detach比较 (1)empty vs remove empty()...

[Day27] 基础的 Directive

在实际工作中,我们常常会需要某一块的网页内容重复出现,像是动态的抓资料然後塞到 table 的 ro...

从中国恒大事件看停损的重要性

最近中国恒大负债事件愈滚愈大,许多媒体甚至以耸动的标题形容2008年的「雷曼兄弟金融海啸」重演。 个...