1.JavaScript输出
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容无格式写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台
write()和innerHTML中都可以添加标签来改变输出的样式。
1.write()和页面一起加载
在加载页面时候执行write()会直接写在html中
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
页面显示
我的第一个 Web 页面
我的第一个段落。
Wed Apr 22 2020 13:16:52 GMT+0800 (中国标准时间)
2.write()在页面加载完成后
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
页面显示
我的第一个 Web 页面
我的第一个段落。
点我
点击点我按钮之后整个html页面变为下面的：
Wed Apr 22 2020 13:19:31 GMT+0800 (中国标准时间)
2.对象
1.对象也是一个变量，但对象可以包含多个值（多个变量）。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
2.对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
3.对象方法与调用
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
//调用方法
document.getElementById("demo").innerHTML = person.fullName();
</script>
3.Undefined 和 Null
-
Undefined 这个值表示变量不含有值。
-
可以通过将变量的值设置为 null 来清空变量。
-
null和undefined值相等但类型不相等
var person;//undefined
var car="Volvo";//volvo
var car=null;//null
4.HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML元素改变 |
| onclick | 用户点击HTML元素 |
| onmouseover | 用户移动鼠标至HTML元素 |
| onmouseout | 用户从HTML元素移开鼠标 |
| onkeydown | 用户按下键盘 |
| onload | 浏览器完成页面加载 |
其他事件https://www.runoob.com/jsref/dom-obj-event.html
5.字符串string对象
1.字符串及长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
2.特殊字符转义
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 \ 可以用于转义撇号，换行，引号，等其他特殊字符。
3.字符串可以时对象
var x = "John";
var y = new String("John");
4.字符串属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
5.字符串方法
解析：https://www.runoob.com/jsref/jsref-obj-string.html
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
1.concat()方法：连接两个或更多字符串，并返回新的字符串。
var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2); //Hello world!
2.fromCharCode() 方法：可接受一个指定的 Unicode 值，然后返回一个字符串
var n = String.fromCharCode(65);//n为A
3.match() 方法：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g);//ain,ain,ain
match() 方法将检索字符串 String Object，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
4.repeat() 方法：字符串复制指定次数。
var str = "Runoob";
str.repeat(2);//RunoobRunoob
5.replace(a,b) 方法:用于在字符串中第一个a替换为b；
6.search(a) 方法：用于检索字符串中a出现的位置
var str="Visit Runoob!";
var n=str.search("Runoob");//6
7.slice(start, end) 方法：可提取字符串的某个部分，并以新的字符串返回被提取的部分。
var str="Hello world!";
var n=str.slice(1,5);//ello
字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推。
如果时负数：-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
8.split(a) 方法用于把一个字符串在a处分割成字符串数组。
var str="How are you doing today?";
var n=str.split(" ");//How,are,you,doing,today?
如果把空字符串 ("") 用作 separator截取标记，那么 stringObject 中的每个字符之间都会被分割。
9.截取
-
substring(a,b) 方法：用于提取字符串中介于两个指定下标之间的字符。下标a到b的字符串。
-
slice(start, end) 方法：用于提取字符串中介于两个指定下标之间的字符
-
substr(a,b) 方法可在字符串中抽取从开始下标开始的指定数目的字符。下标a开始的b个字符。
10.trim() 方法：用于删除字符串的头尾空格。
var str = " Runoob ";
alert(str.trim());//Runoob
6.运算符
| 运算符 | 描述 |
|---|---|
| = | 赋值 |
| == | 等于 |
| === | 绝对等于（值和类型都相等） |
| != | 不等于 |
| !== | 绝对不等于(值和类型有一个不等，或者都不等) |
7.typeof：返回变量或表达式类型
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34};
</script>
//string number boolean object object
8.正则表达式
1.语法;
/正则表达式主体/修饰符(可选)
例如：
var patt = /runoob/i
/*
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
*/
2.修饰符
| 修饰符 | 描述 |
|---|---|
| i | 对大小写不敏感的匹配 |
| g | 执行全局匹配，而非找到第一个后就停止 |
| m | 执行多行匹配 |
3.正则表达式模式
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
4.特殊含义的字符
| 元字符 | 描述 |
|---|---|
| \d | 查找数字。 |
| \s | 查找空白字符。 |
| \b | 匹配单词边界。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
5.量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
6.test()
-
test() 方法是一个正则表达式方法。
-
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");/true
//或
/e/.test("The best things in life are free!")
7.exec()
- exec() 方法是一个正则表达式方法。
- exec() 方法用于检索字符串中的正则表达式的匹配。
- 该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
/e/.exec("The best things in life are free!"); //e
9.try，catch
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
10.表单验证
判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
1.HTML约束验证
| 属性 | 描述 |
|---|---|
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
2.约束验证 CSS 伪类选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选取属性为 “disabled” 属性的 input 元素 |
| :invalid | 选取无效的 input 元素 |
| :optional | 选择没有"required"属性的 input 元素 |
| :required | 选择有"required"属性的 input 元素 |
| :valid | 选取有效值的 input 元素 |
11.E-mail验证：
输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
<script>
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
</script>
12.this关键字
在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。在浏览器中，window 就是该全局对象为 [object Window]:
- 在函数中，this 表示全局对象。在浏览器中，window 就是该全局对象为 [object Window]:
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
13.es6
- (ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
- let 声明的变量只在 let 命令所在的代码块内有效。
- const 声明一个只读的常量，一旦声明，常量的值就不能改变。
14.JavaScript JSON
-
英文全称 JavaScript Object Notation
-
JSON 是用于存储和传输数据的格式。
-
JSON 通常用于服务端向网页传递数据 。
{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}
1.JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
2.函数
| 函数 | 描述 |
|---|---|
| JSON.parse() | 用于将一个 JSON 字符串转换为 JavaScript 对象。 |
| JSON.stringify() | 用于将 JavaScript 值转换为 JSON 字符串。 |
1.parse()
将一个 JSON 字符串转换为 JavaScript 对象。
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
'{"name":"Google","site":"http://www.Google.com" },' +
'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].name + " " + obj.employees[1].site;
</script>
//Google http://www.Google.com
2…stringify()
用于将 JavaScript 值转换为 JSON 字符串。
<p id="demo"></p>
<script>
var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
document.write( "使用参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
</script>
/*
只有一个参数情况：
{"name":"菜鸟教程","site":"http://www.runoob.com"}
使用参数情况：
{
"name": "菜鸟教程",
"site": "http://www.runoob.com"
}
*/
15.javascript:void(0) 含义
- javascript:void(0) 中最关键的是 void 关键字，
- void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
16.js对象
1.number对象
- 无穷大（Infinity）
myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}
-
NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
-
Number 属性
属性 描述 Number.MAX_VALUE 最大值 Number.MIN_VALUE 最小值 Number.NaN 非数字 Number.NEGATIVE_INFINITY 负无穷，在溢出时返回 Number.POSITIVE_INFINITY 正无穷，在溢出时返回 Number.EPSILON 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 Number.MIN_SAFE_INTEGER 最小安全整数。 Number.MAX_SAFE_INTEGER 最大安全整数。 -
数字方法
方法 描述 Number.parseFloat() 将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。 Number.parseInt() 将字符串转换成整型数字，和全局方法 parseInt() 作用一致。 Number.isFinite() 判断传递的参数是否为有限数字。 Number.isInteger() 判断传递的参数是否为整数。 Number.isNaN() 判断传递的参数是否为 isNaN()。 Number.isSafeInteger() 判断传递的参数是否为安全整数。
2.date对象
- 如何使用 Date() 方法获得当日的日期。
- getFullYear()
使用 getFullYear() 获取年份。 - getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。 - setFullYear()
如何使用 setFullYear() 设置具体的日期。 - toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。 - getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。 - Display a clock
如何在网页上显示一个钟表。
3.Array（数组） 对象
1.创建一个数组，有三种方法。
- 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
- 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
- 字面:
var myCars=["Saab","Volvo","BMW"];
2.数组方法和属性
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
3.其他方法
- 合并两个数组 - concat()
- 合并三个数组 - concat()
- 用数组的元素组成字符串 - join()
- 删除数组的最后一个元素 - pop()
- 数组的末尾添加新的元素 - push()
- 将一个数组中的元素的顺序反转排序 - reverse()
- 删除数组的第一个元素 - shift()
- 从一个数组中选择元素 - slice()
- 数组排序（按字母顺序升序）- sort()
- 数字排序（按数字顺序升序）- sort()
- 数字排序（按数字顺序降序）- sort()
- 在数组的第2位置添加一个元素 - splice()
- 转换数组到字符串 -toString()
- 在数组的开头添加新元素 - unshift()
4.Math对象
- round()
如何使用 round()。 - random()
如何使用 random() 来返回 0 到 1 之间的随机数。 - max()
如何使用 max() 来返回两个给定的数中的较大的数。 - min()
如何使用 min() 来返回两个给定的数中的较小的数。
17.js浏览器window
1.Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
document.documentElement.clientHeight
document.documentElement.clientWidth
document.body.clientHeight
document.body.clientWidth
window的其他方法：
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
2.Screen
window.screen对象在编写时可以不使用 window 这个前缀。
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
3.Location
window.location 对象在编写时可不使用 window 这个前缀
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href 属性返回当前页面的 URL。
4.history
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
5.Navigator
window.navigator 对象包含有关访问者浏览器的信息。
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
6.window的弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
-
警告框：window.alert(“sometext”);
-
确认框：window.confirm(“sometext”);
<button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction(){ var x; var r=confirm("按下按钮!"); if (r==true){ x="你按下了\"确定\"按钮!"; } else{ x="你按下了\"取消\"按钮!"; } document.getElementById("demo").innerHTML=x; } </script> -
提示框：window.prompt(“sometext”,“defaultvalue”);
<button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction(){ var x; var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!=""){ x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } } </script>
7.计时事件
在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 在指定的毫秒数后执行指定代码。
18.Cookie
1.Cookie 用于存储 web 页面的用户信息。
2.Cookie 是一些数据, 存储于你电脑上的文本文件中。
3.Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
- 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
4.Cookie 以名/值对形式存储
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。
服务端通过这种方式来获取用户的信息。
5.JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
- JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
- 还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
- 您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
6.JavaScript 读取 Cookie
var x = document.cookie;
7.JavaScript 修改 Cookie,修改 cookie 类似于创建 cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
8.JavaScript 删除 Cookie,只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
扫一扫
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
