简介
- 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 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
输出
- 使用 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
JavaScript this 关键字 | 菜鸟教程 (runoob.com)
- 在方法中,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) 。