简介
-
HTML 定义了网页的内容
-
CSS 描述了网页的布局
-
JavaScript 控制了网页的行为
JS是脚本语言
-
是一种轻量级的编程语言
-
是可插入HTML页面的编程代码
-
插入HTML页面后可由所有的现代浏览器执行
直接写入html输出流
==只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。==
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
等同于html里的
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
对于事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
可点击，点击后弹出窗口
alter多用于测试代码
改变html内容
x=document.getElementById("demo"); //查找元素（按钮）
x.innerHTML="Hello JavaScript"; //改变内容（将原来的字改变）
document.getElementById("*some id*")。这个方法是 HTML DOM （文档对象模型）中定义的。
改变html图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="图1";
}
else
{
element.src="图2";
}
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="图1" width="100" height="180">
改变html样式
x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式
验证输入
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
输出
-
使用 window.alert() 弹出警告框。
-
使用 document.write() 方法将内容写到 HTML 文档中。（常用）
-
使用 innerHTML 写入到 HTML 元素。（document.getElementById("demo").innerHTML = "段落已修改。";）
-
使用 console.log() 写入到浏览器的控制台。（需要调试网页控制台，在网页中查看）
语法
-
字面量
-
数字
-
字符串
-
表达式字面量
-
数组字面量
-
对象字面量
-
函数（Function）字面量
-
变量 用var定义
| 类型 | 实例 | 描述 |
|---|---|---|
| 赋值，算术和位运算符 | = + - * / | 在 JS 运算符中描述 |
| 条件，比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
语句
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do ... while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for ... in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if ... else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
// 输出标题H1：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落P：
document.getElementById("myP").innerHTML="这是我的第一个段落。";
变量
-
变量必须以字母开头
-
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
-
变量名称对大小写敏感（y 和 Y 是不同的变量）
//创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
对象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
对象键值对的写法类似于：
-
PHP 中的关联数组
-
Python 中的字典
-
C 语言中的哈希表
-
Java 中的哈希映射
-
Ruby 和 Perl 中的哈希表
访问方法
person.lastName;
person["lastName"];
创建对象方法
methodName : function() {
// 代码
}
访问对象
objectName.methodName()
函数
function functionname()
{
// 执行代码
}
可以有return 返回值
还可以带参函数（）内输入参
作用域、变量
全局、局部、和java差不多啦
事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
-
HTML 页面完成加载
-
HTML input 字段改变时
-
HTML 按钮被点击
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
-
页面加载时触发事件
-
页面关闭时触发事件
-
用户点击按钮执行动作
-
验证用户输入内容的合法性
-
等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
-
HTML 事件属性可以直接执行 JavaScript 代码
-
HTML 事件属性可以调用 JavaScript 函数
-
你可以为 HTML 元素指定自己的事件处理程序
-
你可以阻止事件的发生。
-
等等 ...
字符串
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
运算符（和c、java一样）
函数
-
if...else
-
switch
-
for循环
-
while循环
-
break、countinue
-
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 -
null //返回object
-
undrfined //一个没有值得变量返回undefined
undefined 和 null 的区别
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
-
constructor属性
"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] }字符串转换
方法 描述 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
//用正则表达式搜索 "Runoob" 字符串，且不区分大小写
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
输出 6 起始位置
//用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
严格模式（use strict）
-
不允许使用未声明的变量
-
不允许删除变量或对象
-
不允许删除函数
-
不允许变量重名
-
不允许使用8进制
-
不允许使用转义字符
-
不允许对只对书信赋值
-
不允许对一个使用getter方法读取的属性进行赋值
-
不允许删除一个不允许删除的属性
-
变量名不能使用ev、arguments字符
-
不允许使用这种语句
"use strict";
with (Math){x = cos(2)}; // 报错 -
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
-
禁止使用this关键字指向全局对象
表单
表单验证
判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
自动验证
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
this
-
在方法中，this 表示该方法所属的对象。
-
如果单独使用，this 表示全局对象。
-
在函数中，this 表示全局对象。
-
在函数中，在严格模式下，this 是未定义的(undefined)。
-
在事件中，this 表示接收事件的元素。
-
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
JSON
-
JSON 英文全称 JavaScript Object Notation
-
JSON 是一种轻量级的数据交换格式。
-
JSON是独立的语言 *
-
JSON 易于理解。
==JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。==
语法规则
-
数据为 键/值 对。
-
数据由逗号分隔。
-
大括号保存对象
-
方括号保存数组
-
"name":"Runoob"
-
{"name":"Runoob", "url":"www.baidu.com"}
-
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
] -
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
js异步编程
