What is Javascript?JavaScript (简称 JS)是一种 直译式(Interpreter) 程序语言,程序码会由上到下立即执行,它与HTML、CSS 并列网页三大核心技术,HTML 代表网页的架构、CSS 负责网页的视觉外观,而 JavaScript 则是用来控制网页的各种互动与操作,并且 JS 不只可以用於网页,也可以用来开发後端服务器上的应用程序。
跟 CSS 一样,要使用 Javascript 就需要将程序码连结套用到 HTML 上,总共会有三种方法:Internal JavaScript、External JavaScript 和 Inline JavaScript,其中 External JavaScript 是最常见而且最适合的JS引入方法。
使用 <script>
连结 JS 档案,比起其他两种方法较不会破坏 HTML 结构。
<script type="text/javascript" src="档名.js"></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 的语法和基本功能,除了简单介绍观念与用法之外,会搭配一些实作小范例,让读者更清楚如何撰写 JS。
你可以把变数当作是一个容器,可随意储存指定的值(资料)。指定值之前要先进行变数宣告来创立变数,会透过 var
或是 let
来进行宣告。另外还可以用 const
宣告一个只可读取不能修改的常数。
let name = "May"; //let 用来宣告只作用在当前区块的变数
var score = 80; //var 宣告的变数会是全域变数,或是作用在整个function
const isPass = true; //const 宣告的常数不能修改值
如果尚未指定数值给该变数,该变数的值会是 undefined
,你可以指定各种资料值给变数或常数,比如字串(String)、数字(Number)、布林值(Boolean) ...。
let value; // undefined
let name = "May";
let score = 80;
let isPass = true;
条件陈述式让我们指定要在哪些情况下分别执行不同的程序码,在 JavaScript 中可以使用 if...else
和 switch
来进行条件执行。
以 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"
如果文章中有错误的地方,要麻烦各位大大不吝赐教;喜欢的话,也要记得帮我按赞订阅喔❤️
D9: while跟 do-while的差别 我原本一直以为do-while是要判断式成立时才会执行...
经过 Day23 的讲解,大家应该都有初步的了解及安装完毕吧 XD 今天我们来运用 Formik ...
1.empty、remove、detach比较 (1)empty vs remove empty()...
在实际工作中,我们常常会需要某一块的网页内容重复出现,像是动态的抓资料然後塞到 table 的 ro...
最近中国恒大负债事件愈滚愈大,许多媒体甚至以耸动的标题形容2008年的「雷曼兄弟金融海啸」重演。 个...