JS basic
JavaScript is a Scripting Language
是一种轻量级的编程语言，输入web开发三大基本语言之一（除HTML和CSS外）
JavaScript code can be inserted into any HTML page, and it can be executed by all types of web browsers.
JS可以被插入到任何形式的HTML页面，被所有类型的浏览器支持。
It makes HTML pages more dynamic and interactive. 它使得网页更加动态化和交互的。
The HTML DOM (Document Object Model文本对象模型) is the official W3C standard for accessing HTML elements.
使用JS的情况：
1. manipulate the DOM (to change the content of HTML elements) 改变HTML元素的内容
<button type="button"
οnclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>2. change the value of HTML attributes. 改变HTML元素属性的值，如下例，通过替换灯泡图片，实现开关灯效果。
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>3. changing the style of an HTML element, is a variant of changing an HTML attribute. 改变HTML元素的样式，也是改变元素属性一种
x = document.getElementById("demo"); //Find the HTML element with id="demo"
x.style.fontSize = "25px"; //Change the font size
x.style.color = "#ff0000"; //Change the color4. validate input 验证输入
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="number">
<button type="button" οnclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>Where To
To insert a JavaScript into an HTML page, use the <script> tag.
注意：
Old examples may have type="text/javascript" in the <script> tag. This is no longer required. JavaScript is the default scripting language in all modern browsers and in HTML5.
现在已不需要在script标签里注明type属性了。
JavaScript in <head> or <body>
Scripts can be in the <body> or in the <head> section of HTML, and/or in both.
注意放置在内容前的JS越多，用户等待内容的时间就越长，如果有无法加载的JS文件，浏览器会在N秒后才放弃，如果文件是在内容中间，这个会让流畅加载的页面突然中断N秒。
It is a good idea to place scripts at the bottom of the body element. 可以把JS代码或引用放在页面底部,This can improve page load, because HTML display is not blocked by scripts loading.
Separating HTML and JavaScript, by putting all the code in one place, is always a good habit.
同时把HTML和JS分开写是一个好习惯。
External JavaScripts
External files often contain codes to be used by several different web pages. 外部JS文件可被多个网页调用，通常以.js为后缀名。
You can place an external script reference in <head> or <body>
可以把外部JS参考放在head或者body部分，引用方法是：把外部js文件名写在<script>标签的src属性里。
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>使用外部js的好处是：
- It separates HTML and code
- It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads