JavaScript part 1

JavaScript(一)

现在基本上每一个网页都含有js的代码,所以我觉得应该去了解一下。
最简单的js代码

<script>
alert("this is JavaScript");
</script>

浏览器会解释并执行位于<script>标签之间的js代码

语法

输出

js可以通过四种方式来输出数据:

  • window.alert():弹出警告框
  • document.write():将内容写到html文档
  • innerHTML:写入到HTML元素
  • console.log():写入到浏览器控制台

window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>test</h1>
<p>test</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

这段代码会运行之后会进行弹窗,弹窗内容为11

操作HTML元素,innerHTML

如果需要从js访问某个HTML元素,可以用document.getElementById(id)方法,用id属性来标识html元素,并用innerHTML来获取或插入元素
eg

<!DOCTYPE html>
<html>
<body>

<h1>test</h1>
<p id="demo">我的第一个js。</p>
<script>
document.getElementById("demo").innerHTML="welcome";
</script>

</body>
</html>
----------------------------
结果
test
welcome

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的js代码 。

innerHTML = "welcome"是用于修改元素的 HTML 内容(innerHTML)的js代码。

写入HTML-document.write()

可以用documenti.write()将想写入HTML中的js代码写进去

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
----------------
页面会显示当前时间

而如果是在文档加载完后执行documenti.write,那么整个页面会被覆盖掉
eg

<!DOCTYPE html>
<html>

<body>

<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
    document.write(Date());
}
</script>

</body>
</html>

写进控制台 console.log()

<!DOCTYPE html>
<html>
<body>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

在浏览器F12进入控制台,到console页面,会看到11被写了进去

一些基础的定义

数组

[1,2,3,4]

对象

{first:"G",last:"suhy",age:20}
这里有两种方法去寻址,首先先定义一个js对象

var person={
firstname : "Gsuhy",
lastname  : "vip",
id        :  666
};

如果要寻址的话

  • name=person.firstname
  • name=person["firstname]

而且,在定义对象的时候还可以在对象中在内嵌一个函数,比如:

<!DOCTYPE html>
<html>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function()
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:"  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:"  +  person.fullName();
</script>

</body>
</html>
--------------------
结果
创建和使用对象方法。

对象方法是一个函数定义,并作为一个属性值存储。

不加括号输出函数表达式:function() { return this.firstName + " " + this.lastName; }

加括号输出函数执行结果:John Doe

这么一看来,感觉挺方便的

函数

关于Js中的函数,可以定义不带参数的函数function myFunction(){alert("Hello World!");},也可以设置带参数的function myfunction(a,b){return a+b;}
eg

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

不过在ES6中新增了一种函数,叫做箭头函数(Arrow Function)
x=>x*x
这个语句就相当于

function (x) {
    return x * x;
}

这么一看那可不太方便了

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

变量

在js中使用关键字var来定义变量

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>

</body>
</html>

Map和Set

Map是一组键值对的结构,具有极快的查找速度。
举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

而使用Map的话,js的语句就很简洁

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串’3’是不同的元素。

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

注意点

  • 注释://或者/**/
  • js对字母大小写敏感
  • 每条语句以;结尾
  • 可以在文本字符串中使用 \ 对代码进行换行
    document.write("你好 \ 世界!");
    这样是可以的,但是
    document.write \ ("你好世界!");
    这样是不行的
  • 一条语句可以声明很多变量,而且可以跨行,以逗号分隔
    但是像这样var x,y,z=1这里面的x和y都是undefined的变量,只有z赋了值
  • 还可以通过用new关键字来声明类型
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

js正则表达式

其实正则都学了很久了,php的,python的,但是总感觉自己没有理解,争取在这里把他理解了,一通百通。
语法:/正则表达式主体/修饰符(可选)
eg:var pat = /runoob/i

  • runoob 是一个正则表达式主体 (用于检索)。
  • i 是一个修饰符 (搜索不区分大小写)。

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search()replace()

  • search() 方法: 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
  • replace() 方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

例子

<!DOCTYPE html>
<html>
<body>

<p>搜索字符串 "Runoob", 并显示匹配的起始位置:</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!";
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>
---------------------
这是使用正则去搜索Runoob字符串,不区分大小写,然后搜索结果为6

search()f方法可以使用字符串作为参数,会自动转换为正则表达式

var str = "Visit Runoob!";
var n = str.search("Runoob");

replace()就是替换
例子:

<!DOCTYPE html>
<html>
<body>

<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML;
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

正则表达式修饰符

关于前面提到的i,也就是正则表达式修饰符,有三个

  • i:对大小写不敏感匹配
  • g:全局匹配
  • m:多行匹配

正则表达式模式

方括号用于查找某个范围内的字符

  • [abc]:查找方括号之间的任何字符
  • [0-9]:查找从0-9的数字
  • (x|y):查找任何以|分割的选项

元字符是拥有特殊含义的字符

  • \d:查找数字
  • \s:查找空白字符
  • \b:匹配单词边界
  • \uxxxx:查找以16进制数xxx规定的unicode字符

量词

  • n+:匹配任何包含至少一个n的字符串
  • n*:匹配任何包含0或者多个n的字符串
  • n?:匹配任何包含0或者1个n的字符串

使用RegExp对象

RegExp对象是一个预定义了属性和方法的正则表达式

test()

test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

以下实例用于搜索字符串中的字符 “e”:

<!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
</script>

</body>
</html>
-----------------------------
结果:
true
exec()

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

以下实例用于搜索字符串中的字母 “e b”:

<!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e b");
document.write(patt1.exec("The best things in life are free"));
</script>

</body>
</html>
-------------------
结果:
e b
因为The best

表单验证

直接上代码分析

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

这里如果输入名字为空那么会弹窗提示输入名字,var x = document.forms["myForm"]["fname"].value是关键,对应着下面表单中的Myformfname,也就是说,网页的表单验证可以通过js来执行

当然还有自动表单验证,就是用required

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

<p>点击提交按钮,如果输入框是空的,浏览器会提示错误信息。</p>

</body>
</html>

这个时候如果提交空表单,不会弹窗,但是会有提示

约束验证HTML输入属性

属性 描述
disabled 规定输入的元素不可用
max 规定输入元素的最大值
min ….最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必须的
type 规定输入元素的类型

JS中的this

看到this这里,我觉得js的this和其他语言的this还有点不大一样,
JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

在方法中,this 表示该方法所属的对象

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 <b>person</b> 对象。</p>
<p>因为 person 对象是 fullName 方法的所有者。</p>

<p id="demo"></p>

<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>
-------------------------
结果:
JavaScript this 关键字
实例中,this 指向了 person 对象。

因为 person 对象是 fullName 方法的所有者。

John Doe

如果单独使用,this 表示全局对象

单独使用就有点区别了,指向的是全局对象,而浏览器中的全局对象是object window

<p id="demo"></p>

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
---------------------------
[object Window]

在函数中,this 表示全局对象

在函数中,this表示全局对象,但是在严格模式下,this 是未定义的(undefined)
在函数中,函数所属者默认绑定到this上,这句话是菜鸟上的解释,不过,有点没看懂
但是看代码是这么写的

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>

返回的仍然是[object Window],这里this表示的就是myFunction函数的所有者
如果在严格模式下 也就是use strict,那么返回的结果就是undefined

在事件中,this 表示接收事件的元素

<button onclick="this.style.display='none'">点我后我就消失了</button>
点击一下button,就消失

类似 call() 和 apply() 方法可以将 this 引用到任何对象

<p id="demo"></p>

<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
--------------------------
John Doe

实例中 this 指向了 person2,即便它是 person1 的方法

JSON

JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。其实json挺常见的,像博客中的配置文件

json几种数据类型:

  • number:和JavaScript的number完全一致;
  • boolean:就是JavaScript的true或false;
  • string:就是JavaScript的string;
  • null:就是JavaScript的null;
  • array:就是JavaScript的Array表示方式——[];
  • object:就是JavaScript的{ … }表示方式。

为了统一解析,JSON的字符串规定必须用双引号””,Object的键也必须用双引号””
如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。


   转载规则


《JavaScript part 1》 Gsuhy 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录