说明
Web 前端教程 正在筹划中,欢迎大家加微信 gairuo123 提供意见、建议、纠错、催更。
JavaScript(缩写:JS)是一门完备的 动态编程语言,可为网站添加交互功能,比例如游戏、动态样式,动画,以及在按下按钮或收到表单数据时做出的响应等。
注:本文不包含知名的「jQuery」三方库功能,将另行整理。
JS 由于是浏览器内置支持的(当然,不然怎么能解析运行动态网页呢?),不需要安装相应的编译环境即可在浏览器上打开查看效果。编写 JS 的 IDE 非常多,作为初学者,我们可以利用浏览器自带的功能进行操作:
浏览器 | 菜单 |
---|---|
Chrome | 查看 => 开发 => 开发者工具 |
火狐 | 工具 => Web开发者 => Web控制台 |
或者在任意页面右键=>检查元素=>控制台,可查看和操作当前页面的相关元素。
- JavaScript 是区分大小写的,使用 Unicode 字符集
- 语句用分号(;)进行分隔
- js 是动态类型语言,声明、重新赋值时不用指定变量
- // 单行注释
- /* 多行注释 */
- 一般用 console.log(x) 将变量打印进行查看
- 可以用 window.alert(x) 弹出变量值进行调试
- 在网页内 <script>alert("我的第一个 JavaScript");</script>
- 引用外部 <script src="my.js"></script>
- 函数一般无结果时,返回值为 -1
- debugger; 可以此行暂停执行
变量规则:
- 变量(标识符) 必须以字母、下划线(_)或者美元符号($)开头
- 在函数之外声明叫全局变量,任何其他代码所访问
- 函数内部声明的叫做局部变量,只能在当前函数的内部访问
- var 声明一个变量,可选初始化一个值
- let 声明一个块作用域的局部变量,可选初始化一个值
- const 声明一个块作用域的只读常量
声明变量:
/* 不建议直接不使用关键字声明变量
可能会报错
*/
var x; // 定义一个变量, 此时值是 undefined
var a = 33 // 局部变量和全局变量,直接定义并赋值
let b = 34 // 声明块作用域的局部变量
const PI = 3.14 // 常量, 不能补修改
// 判断变量是否被赋值
var x;
if(x === undefined){doThis();}
// 条件表达式
p = (age<18)?"未成年":"成年";
类型 | 说明 | 举例 |
---|---|---|
布尔值 Boolean | 真假,只有两个值 | true 和 false |
null | 空值 | null |
undefined | 变量未定义时的属性 | undefined |
数字 Number | 整数或浮点数 | 44, 9.884, -5 |
整数 BigInt | 存储和操作大整数 | 4535242423411144 |
字符串 String | 表示文本值的字符序列 | "gairuo" |
代表 Symbol | 实例唯一且不可改变 | ECMAScript 6 新添加 |
对象 Object | js 中几乎所有的事物都是对象。 | - |
对象又包含:
Function(函数)
Array(数组)
Date(日期)
RegExp(正则表达式)
typeof "tome" // typeof 操作符检测变量数据类型
(3.14).constructor // 返回所有 JavaScript 变量构造函数
// 数字
"37" - 7 // 30
"37" + 7 // "377"
parseInt("123", 10) // 字符串转换为数字, 10 进制
parseFloat() // 尝试逐个解析并返回无法解析前的数字
+ "42"; // 42 单元运算符 + 数字字符串转换成数值, 与 + 不同
isNaN(NaN) // 判断是否为 NaN(Not a Number 的缩写)
1 / 0; // Infinity 正无穷
-1 / 0; // -Infinity 负无穷
isFinite(2e64); // true 是否有穷数
// 字符
"我身高" + 180 // 数字会转换成字符串
"hello".length; // 5
'hello'[0] // 字符串访问, 索引从 0 开始
"hello".charAt(0); // "h"
"hello, world".replace("world", "mars"); // "hello, mars"
"hello".toUpperCase(); // "HELLO"
"hello".charCodeAt(0) // 104 索引位字符的 Unicode 值
'a'.concat('b', 'c') // 'abc' 连接字符串
'hello'.indexOf('l') // 2 返回 l 第一次出现的索引位
'hello'.lastIndexOf('l') // 3 返回 l 最后一次出现的索引位
'hello'.match('o').index // 4 找到一个或多个正则表达式的匹配
'hello'.search('\o') // 4 检索与正则表达式相匹配的值
'hello'.slice(1,3) // "el" 提取字符串的片断
'hello'.split('e') // ["h", "llo"] 分割为数组
'hello'.substr(2) // "llo" 从左开始取剩余部门
'hello'.substring(2,4) // "ll" 两个指定索引间的字符
'HEllo'.toLocaleLowerCase() // 根据本地环境换为小写
'HEllo'.toLocaleUpperCase() // 根据本地环境换为大写
'HEllo'.toLowerCase() // 转换为小写
'HEllo'.toUpperCase() // 转换为大写
(32424.99).toString() // "32424.99" 返回字符串对象值
str.trim() // 移除字符串首尾空白
str.valueOf() // 返回某个字符串对象的原始值
字面量是由语法表达式定义的常量,有以下几类:
相关操作:
var coffees = ["French Roast", "Colombian", "Kona"];
a.length); // 1
a[0]; // "French Roast"
var foo = {a: "alpha", 2: "two"};
foo.a; // alpha
foo[2]); // two
todo
IF:
if (time>=18)
{
x="成年人";
}
else
{
x="未成年";
}
switch:
switch(n)
{
case 1:
x = 1;
break;
case 2:
x = 2;
break;
default:
x = 0; // 与 case 1 和 case 2 不同时执行的代码
}
for 循环:
- 语句 1 (代码块)开始前执行
- 语句 2 定义运行循环(代码块)的条件
- 语句 3 在循环(代码块)已被执行之后执行(不是全执行完)
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
var person={name:"tom",gender:"male",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
其他:
- while
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
延迟执行:
setTimeout(funcName,2000); // 2秒后执行
function funcName() {
console.log(x)
}
事件调用:
<button onclick="myFunction(1,'Hello!')">点击这里</button>
常用事件(HTML DOM 事件):
# | 事件 | 描述 |
---|---|---|
0 | onchange | HTML 元素改变 |
1 | onclick | 用户点击 HTML 元素 |
2 | onmouseover | 用户在一个HTML元素上移动鼠标 |
3 | onmouseout | 用户从一个HTML元素上移开鼠标 |
4 | onkeydown | 用户按下键盘按键 |
5 | onload | 浏览器已完成页面的加载 |
查找元素:
// 通过 id 查找 HTML 元素 id = demo
var x=document.getElementById("demo");
// 通过标签名查找 HTML 元素, 找出 x 中的 <p> 元素
var y=x.getElementsByTagName("p");
// 通过类名找到 HTML 元素, 查找 class="cover" 的元素
var x=document.getElementsByClassName("cover");
修改内容:
document.getElementById("p1").innerHTML="新文本";
x.innerHTML="新文本";
// 改变了 <img> 元素的 src 属性
document.getElementById("image").src="landscape.jpg";
// 修改样式
document.getElementById("p2").style.color="blue";
创建新的 HTML 元素:
var para = document.createElement("p"); // 创建 P 标签元素对象
// 创建 P 标签及内容
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node); // 创建
// 在 div1 前加 p1
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
TODO
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
e.message
} finally {
... //结束处理
}
TODO
JS 没有专门的官网,可以近似地将 MDN 作为官网指南:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
其他参考的链接有:
https://www.runoob.com/js/js-tutorial.html
https://www.w3school.com.cn/js/index.asp
https://www.liaoxuefeng.com/wiki/1022910821149312/1023020745357888
更新时间:2021-03-11 14:15:25 标签:js javascript 前端