JavaScript简介

学习tips：每天一个JavaScript项目

JavaScript能干啥

改变HTML内容：使用getElementById()查找对应id的HTML元素，并将元素内容innerHTML进行更改
改变HTML属性：改变img标签的src属性来变化一张HTML图像
改变HTML样式(CSS)
隐藏/显示HTML元素

JavaScript的使用

在HTML中，JavaScript代码必须位于<script>与</script>之间
在HTML文档中的任意位置均能放置任意数量的脚本，或者外接外部js脚本文件。其中，外部JavaScript的优势有：
- 分离HTML和脚本代码
- 使HTML与JavaScript更易于阅读和维护
- 已缓存的JavaScript文件可加速页面加载
JavaScript不提供任何内建的打印或显示函数，要“显示”数据，能通过以下几种方式：
- windows.alert()警告框
- document.write()HTML输出
- innerHTML写入HTML
- console.log()写入浏览器控制台

JavaScript语句

构成

JavaScript语句由值、运算符、表达式、关键词、（注释）所构成，尽量使用分号来分隔JavaScript语句
e.g.document.getElementById("demo").innerHTML = 'Hi';

关键词

关键词	描述
break	终止switch或循环
continue	跳出循环并从顶端开始
debugger	停止执行JavaScript，并调用调试函数（如果可用）
do...while	执行语句块，并在条件为真时重复执行
for	标记需被执行的语句块，只要条件为真
function	声明这是一个函数
if...else	标记需被执行的语句块，根据某个条件
return	退出函数
switch	标记需被执行的语句块，根据不同的情况
try...catch	对语句块实现错误处理
var	声明变量

语法

基本语法与其他语言基本相同
注释方法：使用双斜杠
JavaScript对大小写敏感
JavaScript程序员倾向于使用以小写字母开头的驼峰大小写，如：firstName, lastName, masterCard, interCity
JavaScript使用Unicode字符集

变量声明

在ES2015之前，JavaScript只有两种类型的作用域：全局作用域与函数作用域，但ES2015引入了let和const两个关键词，提供了块作用域

在块之外声明的变量拥有全局作用域，但在函数（注意：仅是在函数块内）块内申明的仅有块作用域，例如：

var carName = 'A';
// 这里的代码可以使用carName
// 当然，不能使用carNum
function myFunction1(){
    var carNum = a;
    // 这里的代码仍然可以使用carName
    // 当然，也可以使用carNum
}
// 这里的代码也可以使用carName
// 同理，不能使用carNum

除此之外，使用var申明的变量没有块作用域，而使用let的则有，例如：

{
    var x = 10;
}
// 这里也可以使用 x
{
    let y = 7;
    // 这里可以使用 x, y
}
// 这里仅可以使用 x，不能用y

不过，在块外使用let申明的变量同样具有全局作用域：

var x = 10; // 全局作用域
let y = 6; // 全局作用域

在变量重复被申明的情况下，变量值以最新的为准：

var x = 10;
// 显然，这里x为10
{
    let x = 7;
    // 在这里，x变为7
}
var x = 10;
// 此处，x为10

但是，重复申明变量有着许多限制：

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的
在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的
在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

通过const申明的变量，相当于一个常量（不变的量），功能上与使用let申明的变量相似，性质上不能重新赋值，只能更改/添加属性：

const PI;
PI = 3.14159; // 错误！
PI = PI + 10; // 也是错误！

const car = {type:'porsche', model:'111', color:'black'}; // OK!
car.color = 'white'; // OK!
car.owner = 'Bill'; // OK!

总结

总而言之，JavaScript除了在变量声明上与其他语言有较大区别，其他基本语法、函数声明与调用、运算符等基本与其他语言相似，直接依葫芦画瓢即可。

JS | JS简介

JavaScript简介

JavaScript能干啥

JavaScript的使用

JavaScript语句

构成

关键词

语法

变量声明

总结