前言
之前一直做Java后台开发，这个阶段准备学习JavaScript，这个系列我也会边学边更新。因为没有什么艺术天赋，最近又在学习摄影，所有每篇文章最后都会附上我拍摄的一张图片，供大家一起欣赏。ps：本系列学习需要HTML、CSS基础
简介
JavaScript是一种轻量级的脚本语言，适应现代所有的浏览器，现在广泛的用于前端开发。我自己对JavaScript的理解是，它让网页“动”起来了，在静态的HTML、CSS的基础上，插入JavaScript让网页由静至动。重点来了，JavaScript和Java不是兄弟！（Java是Sun公司推出的，JavaScript由Netscape公司推出）但是我认为在语法上还是有一些相似度，详情在下文介绍。
在HTML页面内编写JavaScript脚本时，JavaScript语句要在标签<script></script>内编写，脚本应放在<head>或<body>内，也可以把脚本写在外部js文件中，然后在HTML页面调用该文件。
<!DOCTYPE html>
<html>
<head>
<script >···</script>
</head>
</html>
<!DOCTYPE html>
<html>
<body>
<script >···</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script src="hello.js"></script>
</body>
</html>
语法
刚刚在简介里面说了，JavaScript和Java语法有些相似的地方。例如都有数字、字符串、对象、函数等字面量。JavaScript中变量用var来定义，用 = 来赋值。
语句之间用 ; 分隔
var a,b;
a = 1;
b = a + 1;
同样的，JavaScript也有算数运算符、赋值运算符、逻辑判断运算符
| 类型 | 示例 |
|---|---|
| 赋值，算术和位运算符 | = + - * / |
| 条件，比较及逻辑运算符 | == != < > |
JavaScript也有一些关键字，不用全部背下来，有需要的时候都能在网上搜到。注意取对象名或其他名的时候不要和关键字重复，不然会产生错误。
JavaScript的注释方法和Java一样，采用 // 进行注释
//这是注释
var a = 1;
JavaScript 有多种数据类型：数字，字符串，数组，对象等等,也可以定义函数：
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
//定义函数myFunction，参数为a，b
function myFunction(a, b) {
return a * b; //函数内逻辑代码
}
JavaScript对大小写是有要求的，MyFunction 和 myFunction 是不一样的，一般建议采用驼峰法命名（myFunction）
输出
输出这部分代码较简单还能看到效果，大家可以一边学习一边练习。JavaScript没有自带的输出函数，现在比较常用的有四种输出方法:
1.使用 window.alert() 弹出提示框
2.使用 document.write() 方法将内容写进 HTML
3.使用 innerHTML 写入到 HTML 元素
4.使用 console.log() 写入到浏览器的控制台
window.alert()
在网页上弹出提示框来输出，示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert("hello world!");
</script>
</body>
</html>
document.write()
注意这个方法如果在HTML已经加载后调用，会覆盖HTML页面，示例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write("标签内容被覆盖了！");
}
</script>
</body>
</html>
innerHTML
在操作HTML元素之前，要先通过document.getElementById(id) 方法来得到这个元素，再对这个元素进行操作，示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
//getElementById("demo")根据id得到了p标签元素
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
console.log()
这个方法是在浏览器的控制台中输出信息，在浏览器页面按F12即可打开控制台，示例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
console.log("hello!");
</script>
</body>
</html>
效果展示：
摄影分享
摄于 丽江.玉龙雪山.云杉坪
