JavaScript 入门概览
简介
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
JavaScript 显示数据
使用window.alert()弹出警告框。
使用document.write()方法将内容写到 HTML 文档中。
使用innerHTML写入到 HTML 元素。
使用console.log()写入到浏览器的控制台。
document.getElementById(id) 方法
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
//输出 ： 段落已修改
document.getElementById("demo")是使用id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。"是用于修改元素的 HTML内容(innerHTML)的 JavaScript 代码。
document.write()
<p>我的第一个段落。</p>
<button onclick="myFunction()">按钮</button>
<script>
function myFunction()
{
document.write(1234);
}
</script>
输出：刚开始显示 我的第一个段落
点击按钮后页面显示1234，之前的内容被覆盖
分号
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。
声明变量
ES5 只有两种声明变量的方法：var命令和function命令。
ES6相比于ES5，添加了let和const命令。
对于var大家应该都很熟悉，所以这里主要介绍ES6新增的两种声明方法
let命令
用let声明的变量，只会在let命令所在的代码块内有效。
ES5 只有全局作用域和函数作用域，没有块级作用域。ES6 允许块级作用域的任意嵌套。
例一：
{
let name = 'cloud';
var age = 21;
name;//cloud
}
name;//ReferenceError: name is not defined
age;//21
例二：
for(var i = 0; i < 5; i++){
i;//0,1,2,3,4
}
i;//5
for(let i = 0; i < 5; i++){
i;//0,1,2,3,4
}
i;//ReferenceError: i is not defined
例三：
var name = 'cloud';
var name = 'new cloud';
name; //new cloud
let name = 'cloud';
let name = 'new cloud';
name; //SyntaxError: Identifier 'name' has already been declared
const命令
const是一个只读的常量。一旦声明，就不可更改。所以声明的同时必须赋值，否则会报错。
const的作用域与let一样，只在声明所在的块级作用域内有效。
块级作用域的意思是，声明的变量只在{}内有效。
const foo = {};
foo.prop = 123;
foo.prop // 123
foo = {}; // TypeError: "foo" is read-only
上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址。但对象本身是可变的，所以依然可以为其添加新属性。
声明变量类型
当您声明新变量时，可以使用关键词 new 来声明其类型，JavaScript 变量均为对象，当您声明一个变量时，就创建了一个新的对象。
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript 对象
JavaScript 对象是变量的容器，或者可以说JavaScript 对象是键值对的容器
访问对象属性有两种方法：person.lastName;和person["lastName"];
定义对象的属性和方法：
var person={
"name":"小明",
"age":"18",
"like":function(){
return "喜欢打篮球,弹吉他";
}
}
javaScript对象也可以先创建，再添加属性和属性值，比如：
var person=new Object();
person.name='小明'；
person.sex='男'；
person.method=function(){
return this.name+this.sex;
}
如果有两个重复的属性，则以最后赋值为准，如果后面的没有赋值，则以前面的为准
var name = "小明",
var name = "小胡",
var name
输出 name 值为小胡
JavaScript 函数
语法
function functionname()
{
执行代码
}
带参数
function myFunction(var1,var2)
{
代码
}
// 注意顺序
myFunction(argument1,argument2)
返回值
function myFunction()
{
var x=5;
return x;
}
// or
function myFunction(a,b)
{
return a*b;
}
// 调用方法
var myVar=myFunction();
//在您仅仅希望退出函数时 ，也可使用 return 语句。如果 a 大于 b，则下面的代码将退出函数，并不会计算 a 和 b 的总和。
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
JavaScript 作用域
局部变量
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
全局变量
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
如果变量在函数内没有声明，该变量为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
JavaScript 字符串
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
你也可以在字符串添加转义字符来使用引号：
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
可以使用内置属性 length 来计算字符串的长度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
我们可以使用new关键字将字符串定义为一个对象：
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
JavaScript == 与 === 区别
- 对于 string、number 等基础类型，== 和 === 是有区别的
1、不同类型间比较，== 只比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
2、同类型比较，直接进行 "值" 比较，两者结果一样。 - 对于 Array,Object 等高级类型，== 和 === 是没有区别的
- != 为 == 的非运算，!== 为 === 的非运算
var num=1；
var str="1"；
var test=1；
test == num //true 相同类型 相同值
test === num //true 相同类型 相同值
test !== num //false test与num类型相同，其值也相同, 非运算肯定是false
num == str //true 把str转换为数字，检查其是否相等。
num != str //false == 的 非运算
num === str //false 类型不同，直接返回false
num !== str //true num 与 str类型不同 意味着其两者不等 非运算自然是true啦
常见的不同类型运算的转换方式：
字符串和数字相加，数字转成字符串
var one="This is a test";
var two=123;
var three=one+two;
// 结果：three:This is a test123
数字和布尔值相加，布尔值 false 转成 0，true 转成 1
var one=13;
var two=true;
var three=one+two;
// 结果 three:14
字符串与布尔值相加，布尔值转化成字符串
var one="13";
var two=true;
var three=one+two;
// 结果 three:13ture
注意，运行到了那一点才开始转型
var result1=5+5+"abc"; //结果将是"10abc"
var result2= ""+5+5+"abc"; //结果将是"55abc"
条件运算符
function test(p){
var a=5,b=12;
return p>1?p<b?p>b:p=6:p=3;
}
document.write(test(9));
解法：
p>1? 整体 :p=3
随机链接
<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
x.innerHTML="<a href='https://www.runoob.com'>访问菜鸟教程</a>";
}
else{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>
random() 产生0~1之间的随机数
for...in 循环
for...in 循环中的代码块将针对每个属性执行一次
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
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;
}
</script>
输出结果： Bill Gates 56
Break 和 Continue 语句
break 跳出即不再循环
continue 跳过并继续循环
typeof 操作符
检测变量的数据类型
typeof "john" //返回 string
typeof 3.14 //返回 number
typeof false //返回 boolean
typeof [1,2,3,4] //返回 object
typeof {name:'john', age:34} //返回 object
typeof function () {} //返回 function
对象可以通过设置为 null 来清空。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = null;
typeof person; //返回 object
对象可以也设置为 undefined 来清空。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = undefined;
typeof person; //返回 undefined
undefined 和 null 的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
正则表达式
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具，正则表达式可用于所有文本搜索和文本替换的操作。
语法
var patt=new RegExp(pattern,modifiers);
或更简单的方法
/正则表达式主体/修饰符(可选：/正则表达式主体/)
var patt=/pattern/modifiers;
search() 方法和 replace() 方法
正则表达式通常用于两个字符串方法 : search() 和 replace()，正则表达式使得搜索功能更加强大(如实例中不区分大小写)。
var n = str.search(/Runoob/i);
不用正则表达式
var n = str.search("Runoob");
var txt = str.replace(/microsoft/i,"Runoob");
不用正则表达式
var txt = str.replace("Microsoft","Runoob");
修饰符
i 修饰符用于执行对大小写不敏感的匹配。
g 修饰符用于执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
多个修饰符用法： /is/gi
test() 方法和 exec() 方法
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
/e/.test("The best things in life are free!") //返回 true
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
/e/.exec("The best things in life are free!"); //返回 e
throw、try 和 catch
try 语句测试代码块的错误，定义在执行时进行检测错误的代码块。
catch 语句处理错误，定义当 try 代码块发生错误时，所执行的代码块。
try 和 catch 是成对出现的：
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
弹窗：adddlert is not defined
throw 语句创建自定义错误，即当前err爆出的不一定是错误，也可能是起到提示作用：
<p id="qqq"></p>
<script>
function myFunction() {
var qqq, x;
qqq = document.getElementById("qqq");
qqq.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) {
qqq.innerHTML = "错误: " + err;
}
}
变量提升
JavaScript有一个很有意思的性质，就是变量可以在使用后声明，也就是变量可以先使用再声明。变量提升的意思是说函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
比如说他的写法顺序可以如下：
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
初始化变量是不会提升的，比如说把上面的程序稍作修改，他就行不通了
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
y = 7; // 设置 y 为 7
y 输出了undefined，这是因为变量声明(var y)提升了，但是初始化(y = 7) 并不会提升，所以y变量还是一个未定义的变量。
严格模式"use strict"
严格模式下你不能使用未声明的变量。
严格模式的限制如下：
- 不允许使用未声明的变量
- 不允许删除变量或对象
- 不允许删除函数
delete x; - 不允许变量重名
function x(p1, p1) {}; - 不允许使用八进制
- 不允许使用转义字符
\ - 不允许对只读属性赋值
- 不允许对一个使用getter方法读取的属性进行赋值
- 不允许删除一个不允许删除的属性
- 变量名不能使用
"eval"字符串、"arguments"字符串 - 由于一些安全原因，在作用域
eval()创建的变量不能被调用 - 禁止this关键字指向全局对象
JavaScript 使用注意点
赋值运算符
if条件语句中使用赋值运算符的等号(=)将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)
if 条件语句返回 false 因为 x 不等于 10
var x = 0;
if (x == 10)
if 条件语句返回 true 因为条件语句执行为 x 赋值 10，10 为 true:
var x = 0;
if (x = 10)
if 条件语句返回 false 因为条件语句执行为 x 赋值 0，0 为 false:
var x = 0;
if (x = 0)
比较运算符
常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true
var x = 10;
var y = "10";
if (x == y)
严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false
var x = 10;
var y = "10";
if (x === y)
switch 语句会使用恒等计算符(===)进行比较
var x = 10;
switch(x) {
case 10: alert("Hello"); //true
case "10": alert("Hello"); //false
}
加法和连接都使用 + 运算符，数字之间是加法，字符串之间是连接
浮点型数据
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
因为输出z发现 z=0.30000000000000004
为了解决这种尴尬的情况，可以这样
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
return
function myFunction(a) {
var
power = 10;
return
a * power;
}
等同于
function myFunction(a) {
var
power = 10;
return; // 分号结束，返回 undefined
a * power;
}
如果是一个不完整的语句，如下所示:
var
JavaScript 将尝试读取第二行的语句：
power = 10;
但是由于这样的语句是完整的:
return
JavaScript 将自动关闭语句:
return;
在 JavaScript 中，分号是可选的 。
由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
Undefined 和 Null
在 JavaScript 中, null 用于对象,undefined用于变量，属性和方法。
对象只有被定义才有可能为null，否则为undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
JavaScript 表单
上代码
<p>请输入 1 到 10 之间的数字：</p>
// 输入框
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = x;
}
document.getElementById("demo").innerHTML = text;
}
</script>
效果图
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是 #top 也就是网页的上端。
而 javascript:void(0) , 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用javascript:void(0)。
好了，第一部分就先介绍到这里。
