lucky 的学习笔记（JavaScript）

学习笔记
#1

做完了 freeCodeCamp 官网的 JavaScript 基础和 ES6 两部分题目，感觉不知道自己到底掌握多少，所以想先跟着网上一些资料整理一下 JavaScript 的知识点。同时也会接着做官网的其他题目。也就是说，一边做题，一边整理知识点。

一、用 JavaScript 操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById( id ) 方法。

使用 “id” 属性来标识 HTML 元素，并用 innerHTML 来获取或插入元素内容。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 id="demo">一个页面</h1>
    <button type="button" onclick="changeThisLine()">试一试</button>
    <script>
      function changeThisLine(){
       document.getElementById("demo").innerHTML="这是一个新的页面";
      }
    </script>
  </body>
</html>

innerHTML 的值可以是字符串，也可以是变量，比如：

<script>
function anotherFunction() {
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

还可以是一个计算式，比如：

<script>
function thirdFunction() {
var x = 2;
var y = x + 3;
document.getElementById("test").innerHTML = "y = " + y;
}
</script>

还可以是函数，比如：

<script>
function add(a, b) {
	return a + b;
}
	document.getElementById("demo").innerHTML = add(2, 3);
</script>

二、作用域

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

以下例子中，需要调用函数，这一点容易被忽略：

<!DOCTYPE html>
<html>
<head> 
</head>
<body>

<p>
如果你的变量没有声明，它将自动成为全局变量：
</p>
<p id="demo"></p>
<script>
myFunction(); // 需要调用这个函数，可以在 document... 前面或后面，总之需要调用它
document.getElementById("demo").innerHTML =
	"我可以显示 " + carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>

</body>
</html>