简介
- JavaScript是一种轻量级的编程语言
- JavaScript是可插入HTML页面的编程代码
- JavaScript插入HTML页面后，可由所有的现代浏览器执行
- JavaScript很容易学习
主要内容
- js：直接写入html输出流
document.write("<h1>这是一个标题</h1>")；
只能在html输出中使用document.write。如果在文档加载后使用该方法，会覆盖整个文档。
- js：对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
alert()函数在JavaScript中并不常用，但它对于代码测试非常方便
onclick事件只是即将学到的众多事件之一
3.js:改变html内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
document.getElementById("some id")。
这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
- js:改变html图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。
- js:改变html样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
改变html元素的样式，属于改变html属性的变种
- js：验证输入
if isNaN(x) {
alert("不是数字");
}
注意：
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
版本
1997 ECMAScript 1 第一个版本
———————————————————————————————————————
1998 ECMAScript 2 版本变更
———————————————————————————————————————
1999 ECMAScript 3 添加正则表达式
添加 try/catch
———————————————————————————————————————
ECMAScript 4 没有发布
———————————————————————————————————————
2009 ECMAScript 5 添加 "strict mode",严格模式
添加 JSON 支持
———————————————————————————————————————
2011 ECMAScript 5.1 版本变更
———————————————————————————————————————
2015 ECMAScript 6 添加类和模块
———————————————————————————————————————
2016 ECMAScript 7 增加指数运算符 (**)
增加 Array.prototype.includes
———————————————————————————————————————
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。
JavaScript用法
<script>标签
如需在html页面中插入JavaScript，请使用<script>标签
<script>
alert("我的第一个 JavaScript");
</script>
JavaScript函数和事件
例子中的JavaScript语句，会在页面加载时执行
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时
如果我们把JavaScript代码放入函数中，就可以在事件发生时调用改函数
在 <head> 或者 <body> 的JavaScript
可以在html文档中放入不限数量的脚本
脚本可位于html的<body>或<head>部分中，或者同时存在于两个部分中
通常做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把他们安置到同一处位置，不会干扰页面的内容
1.放置到<head>部分
2.放置到<body>部分
3.外部的JavaScript
<body>
<script src="myScript.js"></script>
</body>
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码
外部JavaScript文件的文件扩展名是.js
如需使用外部文件，请在<script>标签的“src”属性中设置该.js文件
JavaScript输出
JavaScript显示数据
- 使用window.alert()弹出警告框
<script>
window.alert(5 + 6);
</script>
- 使用document.write()方法将内容写到html文档中
<script>
document.write(Date());
</script>
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());}
</script>
</body>
- 使用innerHTML写入到HTML元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
- 使用console.log()写入到浏览器的控制台
如果浏览器支持调试，可以使用console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
JavaScript语法
JavaScript字面量
在编程语言中，一般固定值称为字面量，，如3.14
- 数字（number)字面量可以是整数或者是小数，或者是科学计数（e）
3.14
1001
123e5 =>12300000
- 字符串（String）字面量可以使用单引号或双引号
"John Doe" =>John Doe
'John Doe' =>John Doe
- 表达式字面量用于计算
5 + 6 =>11
5 * 10 =>50
- 数组（Array)字面量定义一个数组
[40, 100, 1, 5, 25, 10]
- 对象（Object）字面量定义一个对象
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
- 函数（Function）字面量定义一个函数
function myFunction(a, b) { return a * b;}
变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
JavaScript变量
var x, length
x = 5
length = 6
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称，字面量是一个值。
JavaScript操作符
- JavaScript使用算术运算符来计算值
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
=>110
- JavaScript使用赋值运算符给变量赋值
<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
document.getElementById("demo").innerHTML = z;
</script>
=>110
- JavaScript语言有多种类型的运算符
赋值，算术和位运算符 = + - * / 在 JS 运算符中描述
条件，比较及逻辑运算符 == != < > 在 JS 比较运算符中描述
JavaScript 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号;分隔
JavaScript 关键字
- JavaScript 关键字用于标识要执行的操作。
- 和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用,这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
- var 关键字告诉浏览器创建一个新的变量
- JavaScript 关键字必须以字母、下划线（_）或美元符（$）开始。
- 后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开关键字和数字）。
以下是 JavaScript 中最重要的保留字（按字母顺序）：
abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with
js注释
不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略
js数据类型
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 通过对象字面量赋值
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
js函数
js语句可以卸载函数内，函数可以重复引用
引用一个函数=调用函数（执行函数内的语句）
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
js字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
网友评论