【後转前要多久】# Day22 JS - JavaScript 介绍、Debug方法
JS背景
Javascript是由网景(Netscape)公司所开发的，当时网景公司的头号对手是微软IE浏览器，
微软使用的语言是复刻版JS，两位浏览器大佬都加入一些对手没有的功能。
然而此时JS还没有一个统一标准，所以很混乱、可以想像工程师很头大。
後来在浏览器大战之中，网景浏览器败了，败因是对手微软将作业系统与浏览器綑绑销售，最终公司也没落了。不带走一片云彩，留下了遗臭万年的Javascript荼毒後世
ECMA(欧洲电脑协会)以参考Javascript制作了一套标准，叫作ECMAScript。
从1997年的ES1开始，时至今日已经来到了第11版的ES2020。
其中常看到也较为重要的版本有 ES5(2009年) 以及 ES6(ES2015)。
因为2009年时大家几乎都用IE浏览器，但之後IE市占率急速下降，最终没落、被Chrome取代。
而IE最後一个版本是2013年的IE11 (不再推出新版了，微软後来直接推新的Edge浏览器)
直到了2015年ECMA推了ES6版本以後，IE11这位老叩叩已经无法支援全数的新标准，
所以ES5、ES6这两种版本，可以视为支不支援IE11旧浏览器的分水岭。
现今数浏览器大多都能支援ES5以上的版本。
ES5及ES6两者主要差异在於：ES6新增了变数宣告方式let与const、Set物件、箭头用法=>等等。
OMG，明明都是同一种语言，每一个版本用法的变化却如此的大
难道这就是时代的洪流、时代的力量?!百年以後，当我的孙子、曾孙回过头来看他爷爷的事蹟，
看到我当初在蓝星上用二进制电脑写JS... 会不会把我当原始人看？
直译式、弱型别
JS是直译式语言，程序由上到下依序执行。
当执行到JS时，网页会卡住不继续往下渲染，直到JS执行完毕才继续往下。
弱型别语言，文字可当数字、数字可当文字。
JS出现的位置
好像看到JS在很多地方都有出现过，
JS可以出现在哪些位置呢?
浏览器只要看到<script>标签，就会将整段程序码以JS方式执行。
程序码由上而下执行，以下两段程序码都是先跳出JS 1再跳JS 2。
1. 写在HTML中
可写在HTML中，直接以<script>标签包住脚本范围。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>alert("js 1");</script>
</head>
<body>
<script>alert("js 2");</script>
</body>
</html>
2. 写在JS档案中
也可以将Javascript独立写在.js档案中，但档案中的JS就不需要<script>标签了。
在HTML中透过<script src="...">的方式汇入进来。
通常开发程序会以此种方式撰写，比较好统一管理JS档案。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js1.js"></script>
</head>
<body>
<script src="js2.js"></script>
</body>
</html>
js1.js
alert("JS 1");
js2.js
alert("JS 2");
JS没有一定要写在哪里，到处都可以出现。
常见位置是写在HTML紧邻</body>标签的前面，
让整份网页载入完毕、该出现的都呈现出来後才来执行JS脚本。
在同一份HTML中，变数可以共用。
HTML
<script>
let a = 100;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
a = 50;
</script>
</body>
</html>
<script>
alert(a);
</script>
几种Debug方法
以下是开发时，几种常见的Debug方法
alert
弹跳一个警告视窗，藉此印出变数值
x = 100;
alert(x);
console.log
JS中的print印值，开启浏览器的console视窗，
查看印出的变数值
x = 100;
console.log(x);
typeof
查看变数、物件的型别
typeof(3)
typeof('3')
typeof(function(){alert('a');})
typeof({tom:'jhon'})
可以透过console.log方式印出来，也可以直接到浏览器console底下查询
window
window会显示出所有可用的变数、函式、物件等等
a = 100;
console.log(window);
或直接在console下window
<<: [day-22] Python-基本认识回圈！(Part .1)
>>: Day 22 - 物理模拟篇 - 二维布料模拟 - 成为Canvas Ninja ～ 理解2D渲染的精髓
[Day 17] 定义资料 — 讲清楚很难吗?
Everybody has a different definition of the good ...
Day3 理解 golang slice 用法及原理 III
前两篇写了 slice 是什麽，以及创建 slice 的基本语法。 这篇就来写 slice 的参数传...
Day 28：开始来学资料系结：使用目前所学，来个简单实作吧！（二）
前一篇，我们完成了需求一： 当使用者在关键字搜寻这个 input 输入文字时，要在输入框的正下方显示...
Day 21 : 笔记篇 08 — 数位笔记太多很凌乱怎麽办？使用 MOC 架构有系统地管理数百则的数位笔记
一、当笔记愈来愈多时，会发生什麽问题？ 多数人使用笔记软件或是文件愈来愈多时一定都会遭遇相同问题：想...
DAY22 这边先帮你上一个按钮喔~(四)
「欸！？阿按了这个按钮怎麽没反应阿？」 这是我妈最常问我的问题，大部分情况都是她遥控器忘记装电池。 ...