JavaScript语法速成笔记
JavaScript语法速成笔记
本篇文章是我通过在菜鸟教程网站上的JavaScript专区学习所记录下来的一些重点内容，
有部分文本及代码引用自菜鸟教程JS专区https://www.runoob.com/js/js-conventions.html
本篇文章适合有编程基础的人观看，可以使各位速成JS语法。
一、js简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
1、js基本用法
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中
比如说以下情况
2、js基本函数
下面举一个javascript函数例子
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<h1>我的第一个 Web 页面h1>
<p id="demo">一个段落。p>
<button type="button" onclick="myFunction()">点击这里button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
script>
body>
html>
实现效果参照菜鸟教程
https://www.runoob.com/try/try.php?filename=tryjs_whereto_body
二、js输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
<html>
<body>
<h1>我的第一个页面h1>
<p>我的第一个段落。p>
<script>
window.alert(5 + 6);
script>
body>
html>
点击进去界面弹出11
使用 document.write() 方法将内容写到 HTML 文档中。
如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<html>
<body>
<h1>我的第一个 Web 页面h1>
<p id="demo">我的第一个段落p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
script>
body>
html>
点进页面发现页面我的第一个段落变成了段落已修改
写到 HTML 文档
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
<h1>我的第一个 Web 页面h1>
<p>我的第一个段落。p>
<script>
document.write(Date());
script>
body>
html>
我的第一个段落下面显示日期。
三、js语法
1、字面量
数字：3.14 ，1223e5
字符串： “zanglili”
表达式：5+6 ，3*4
数组：[40,50,30]
对象： {firstName:“Zang”, lastName:“lily”, age:21, eyeColor:“blue”}
函数： function myFunction(a, b) { return a * b;}
2、变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
var l,m
l = 5
m = 6
注意：
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量varname 的值将是 undefined
var carname;
3、操作符
算数运算符：5+6
赋值运算符：
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 10;
4、注释
// 我是注释
/*
我是多行注释
*/
js对大小写敏感
四、js语句
1、常用关键字
js忽略空格，可以使用反斜杠进行换行
document.write("你好 \
世界!"); //可以
但是不能像这样换行
document.write \
("你好世界!");
五、JS基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
var x = true; // 现在 x 为布尔类型
x = null //x为空
六、JS引用数据类型
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
1、数组
var cars = new Array();//数组
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
遍历数组
var i;
for(i=0;i2、对象
<script>
var person=
{
firstname : "Dirty",
lastname : "Lily",
id : 66
};//定义对象
document.write(person.lastname + "
");//访问对象属性的两种方式
document.write(person["lastname"] + "
");
script>
当然也可以不换行空格，比如这样
var car = {type:"Fiat", model:500, color:"white"};
3、函数
js中，函数格式如下
function functionname()
{
// 执行代码
}
调用函数
<button onclick="myFunction()">点下button> //无参
<button onclick="myFunction('Harry Potter','Wizard')">点击这里button>//有参
七、作用域
局部变量：只能在函数内部访问
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
全局变量
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
八、事件
常见的事件
比如说这个
<button onclick="this.innerHTML=Date()">现在的时间是?button>
点击的时候按钮上的字变成当前的时间
九、js字符串
1、长度
可以使用内置属性 length 来计算字符串的长度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;//26
2、转义字符
比如说想输出这行字符
“We are the so-called “Vikings” from the north.”
但是放到代码里会进行阻断，只输出到We are the so-called
我们可以使用转义字符
"We are the so-called \"Vikings\" from the north."
这样就ok
常用的转义字符！！！
可以使用new关键字定义字符串
var y = new String("Lily");
但是字符串类型和对象使用==比较将返回false
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
3、访问
可以通过索引位置访问字符
var carname = 'Volvo XC60';
var character = carname[7];
4、属性及方法
属性
方法
十、运算符
1、数字算数运算符
加减乘除取余略
var x,y;
y = 5
x = ++y // x=6,y=6
y = 5
x = y++ //x = 5,y = 6
2、字符串
字符串之间通过加号连接
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2; //What a very nice day
也可以与数字进行连接
z="Hello"+5; //Hello5
3、比较运算符
这里与其他语言的比较运算符基本类似，不赘述
4、逻辑运算符
这里与其他语言的逻辑运算符基本类似，不赘述
5、条件运算符
条件符合执行左边，不符合执行右边
voteable=(age<18)?"年龄太小":"年龄已达到";
十一、条件语句
-
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
-
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
-
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
-
switch 语句 - 使用该语句来选择多个代码块之一来执行
比如下面例子分别使用了if else 和switch条件语句
if (time<10)
{
document.write("<b>早上好b>");
}
else if (time>=10 && time<16)
{
document.write("<b>今天好b>");
}
else
{
document.write("<b>晚上好!b>");
}
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
可以使用 default 关键词来规定匹配不存在时做的事情。
十二、js循环语句
有以下几种循环方式
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
1、for循环
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
这里与其他语言的for循环语法十分相似，不赘述。
2、for in循环
for/in 语句循环可以遍历对象的属性，比如说以下的例子
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
函数执行之后，demo标签将会变为BillGates56
3、while循环
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
这里与其他语言的while循环语法十分相似，不赘述。
4、do-while循环
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
这里循环至少会被执行一遍。
这里与其他语言的do-while循环语法十分相似，不赘述。
再js中也可以通过break跳出循环，continue结束本次循环
十三、js标记
可以在一段语句前加上标记名字和冒号，比如说
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;//可以通过break 后加list名结束这个标记下的代码
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
十四、Typeof
可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
我们可以使用 constructor 属性返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
十五、类型转换
1、数字转字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
也可以使用toString方法
2、字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
Number中也可以是其他类型比如说布尔型，日期也可以转换为数字，还可以通过一元运算符+转换为数字
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)
十六、JavaScript 错误 - throw、try 和 catch
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
- finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
下面这是一个例子
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
测试x的值，现在try中测试错误，如果满足条件则throw出去err，catch捕捉err之后进行代码块。