一、什么是JavaScript
JavaScript 是属于 HTML 和 Web 的编程语言。
二、JavaScript的基本语法
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。脚本可放置与外部文件中，JavaScript 文件的文件扩展名是 .js。JavaScript 使用 Unicode 字符集。Unicode 覆盖世界上几乎所有的字符、标点和符号。
三、JavaScript语言的核心
ECMAScript:核心语法DOM:Document Object Model 文档(html/xml)对象模型BOM:Browser Object Model 浏览器窗口对象模型
四、JavaScript可以做什么
1.JavaScript 能够改变 HTML 内容
<!DOCTYPE html><html><body><p id="demo">JavaScript 能够改变 HTML 内容。</p><button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button></body></html>
运行效果：
点击前
点击后
2.JavaScript 能够改变 HTML 属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>document.querySelector("h2").style.color = "red";</script> --></head><body><h2>美丽中国</h2></body><script>window.document.write("<h1>我和我的祖国</h1>");</script></html>
JavaScript 通过src改变 HTML 属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>document.querySelector("h2").style.color = "red";</script> --></head><body><h2>美丽中国</h2></body><script src="test.js">window.document.write("<h1>我和我的祖国</h1>");</script></html>
上例中用到的test.js外部文件
window.document.write("<h1>我们应该用平常心在对待生活</h1>");
运行效果：
3.JavaScript 能够改变 HTML 样式 (CSS)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><h2>美丽中国</h2>//原来是的字体是黑色的</body><script>document.querySelector("h2").style.color = "red";//通过JavaScript将h2标签的字体改变为红色</script></html>
运行效果：
4.JavaScript 能够隐藏 HTML 元素
<!DOCTYPE html><html><body><p id="demo">JavaScript 能够隐藏 HTML 元素。</p><button type="button" onclick="document.getElementById('demo').style.display='none'">点击我！</button></body></html>
运行效果：
点击前
点击后
5.JavaScript 能够显示 HTML 元素
<!DOCTYPE html><html><body><p>JavaScript 能够显示隐藏的 HTML 元素。</p><p id="demo" style="display:none">Hello JavaScript!</p><button type="button" onclick="document.getElementById('demo').style.display='block'">点击我！</button></body></html>
运行效果：
点击前
点击后
五、JavaScript 显示方式
JavaScript 不提供任何内建的打印或显示函数。但是JavaScript 能够以不同方式“显示”数据：
1.使用 window.alert() 写入警告框
<!DOCTYPE html><html><body><h2>我和我的祖国</h2><script>window.alert(51 + 96);</script></body></html>
运行效果：
2.使用 document.write() 写入 HTML 输出
<!DOCTYPE html><html><body><h2>学习时间</h2><p>我正在学习JavaScript</p><script>document.write(8 * 9);</script></body></html>
运行效果：
3.使用 innerHTML 写入 HTML 元素
<!DOCTYPE html><html><body><h2>我和我的祖国</h2><p id="demo"></p><script>document.getElementById("demo").innerHTML = 7 + 8;</script></body></html>
运行效果：
4.使用 console.log() 写入浏览器控制台
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//在JavaScript中声明变量需要以"var"开头var username = "admin";var userName = "Jack";//变量区分大小写,与php一致console.log(username);console.log(userName);function a() {console.log("Hello a");}function A() {console.log("Hello A");}//在JS中,函数区分大小写,php中不区分a();A();</script></body></html>
运行效果：
六、JavaScript 变量
JavaScript 变量是存储数据值的容器。在 JavaScript 中创建变量被称为“声明”变量。可以通过 var 关键词来声明 JavaScript 变量。声明之后，变量是没有值的。（技术上，它的值是 undefined。）JavaScript中允许重复声明变量，但是变量的值只显示一次。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//变量提升:变量未定义之前就可以使用了//声明var email;//初始化,第一次赋值email = "admin@php.cn";var email;var email;var email;//重复声明变量只显示一次结果console.log(email);</script></body></html>
运行效果：
七、JavaScript的作用域
作用域指的是我们有权访问的变量集合。在 JavaScript 中有两种作用域类型：局部作用域和全局作用域。JavaScript 拥有函数作用域：每个函数创建一个新的作用域。作用域决定了这些变量的可访问性（可见性）。
1.JavaScript局部作用域
在JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的：只能在函数内部访问它们。
2.JavaScript全局作用域
函数之外声明的变量，会成为全局变量。全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//作用域是一个对象,是用来查找变量的工具//php中作用域有两个:函数作用域,全局/外部作用域/函数外部//js与php的作用域是一样的,也有函数和全局//php与js都不存在块作用域var job = "一位老师";//这是一个全局变量function test() {//在js中函数可以直接访问全局变量var username = "王小丁";//这是一个局部变量console.log(username + "是" + job);}test();</script></body></html>
运行效果：
八、总结
1.JavaScript是web 开发者必学的三种语言之一(另外两个:html&css)。
2.JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。
3.全局变量（或函数）能够覆盖 window 变量（或函数）。
4.JavaScript 变量的有效期始于其被创建时。
5.函数参数也是函数内的局部变量。
6.局部变量会在函数完成时被删除。
7.全局变量会在关闭页面时被删除。