简介
-
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
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) 。
js异步编程
JavaScript 异步编程 | 菜鸟教程 (runoob.com)