JavaScript基础
文章目录
JavaScript介绍
类型
js是弱类型，java是强类型
弱类型就是类型可变
强类型就是定义变量的时候。类型已经确定，而且不可变
特点
1、交互性(信息的动态交互)
2、安全性(不允许直接访问本地硬盘)
3、跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)
JavaScript的变量类型
| 类型 | 修饰符 |
|---|---|
| 数值类型 | number |
| 字符串类型 | String |
| 对象类型 | object |
| 布尔类型 | boolean |
| 函数类型 | function |
JavaScript特殊值
| 特殊值 | 含义 |
|---|---|
| undefinded | 未定义，所有js变量未赋予初始值的时候，默认值都是undefined |
| null | 空值 |
| NAN | 全程 Not a Number。非数字，非数值 |
JavaScript关系(比较)运算
| 等于 | == | 等于是简单的做字面值的比较 |
|---|---|---|
| 全等于 | === | 除了做字面值的比较,还会比较两个变量的数据类型 |
在JavaScipt语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
0，null，undefined，""(空串) 都认为是 false;
JavaScript逻辑运算
| 运算符号 | 情况一 | 情况二 |
|---|---|---|
| && | 当表达式全为真的时候。返回最后一个表达式的值。 | 当表达式中，有一个为假的时候。返回第一个为假的表达式的值 |
| || | 当表达式全为假时，返回最后一个表达式的值。 | 只要有一个表达式为真。就会把第一个为真的表达式的值返回 |
并且&& 与运算 和 || 或运算 有短路
短路就是说, 当这个&&或 ||运算有结果之后，后面的表达式不再执行
JavaScript数组
var arr = [] //定义一个空数组
JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
JavaScprit函数
函数的两种定义
第一种,可以使用function关键字来定义函数
function 函数体(形参列表) {
函数体
}
第二种 匿名函数
var 函数名 = function(形参列表) { 函数体 }
*在Java中函数允许重载。但是在Js函数的重载回直接覆盖掉上一次的定义
函数的argument隐形参数(只在function函数内)
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管他叫隐形参数。
隐形参数特别像java基础的可变长参数一样
public void fun(Object …args);
可变长参数其实是一个数组
Js隐形参数和Java可变长参数类似，操作类似数组
// 需求： 要求 编写一个函数。 用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for(var i=0;i < arguments.length;i++){
if(typeof(arguments[i])=="number"){
result += arguments[i];
}
}
}
JS中的自定义对象
Object形式的自定义对象
| 对象的定义 | |
|---|---|
| var 变量名 = new Object(); | 对象实例(空对象) |
| 变量名.属性名 = 值 | 定义一个属性 |
| 变量名.函数名 = function() {} | 定义一个函数 |
var obj = new Object();
obj.name="华仔";
obj.age=18;
obj.fun = function() {
alert("姓名" + this.name +", 年龄" + this.age);
}
//对象的访问
// 变量名.属性/ 函数名();
{}花括号形式的自定义对象
var 变量名 = {};
var 变量名 = {
属性名:值,
属性名:值,
函数名:function(){}
}
JS中的事件
概念
事件是电脑输入设备与页面进行交互的响应。我们称之未事件。
常用的事件
| 事件名 | 解释 | 应用场景 |
|---|---|---|
| onload | 加载完成事件 | 页面加载完成之后，常用于做页面js代码初始化操作 |
| onclick | 单机事件 | 常用于按钮的点击响应操作 |
| onblur | 失去焦点事件 | 常用于输入框失去焦点后验证其输入内容是否合法 |
| onchange | 内容发生改变事件 | 常用于下拉列表和输入框内容发生改变后操作 |
| onsubmit | 表单提交事件 | 常用于表单提交前，验证所有表单项是否合法 |
事件的注册
分为静态注册和动态注册两种
概念
告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定
静态注册事件
通过html标签的事件属性直接赋予事件事件响应后的代码，这种方式我们叫静态注册
<script>
//onload事件的方法
function onloadFun() {
alert("静态注册onload事件，所有代码");
}
</script>
<!--静态注册onload事件-->
<body onload="onloadFun();"></body>
动态注册事件
是指先通过js代码得到标签的dom对象，然后在通过dom对象.事件名= function() {} 这种形式赋予
事件响应后的代码，叫动态注册。
动态注册基本步骤
1、获取标签对象
2、标签对象.事件名 = function() {}
onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('静态注册onload 事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的onload 事件");
}
</script>
</head>
<!--静态注册onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>
onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick 事件");
}
// 动态注册onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是JavaScript 语言提供的一个对象（文档）<br/>
* get 获取
* Element 元素（就是标签）
* By 通过。。由。。经。。。
* Id id 属性
*
* getElementById 通过id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名= function(){}
btnObj.onclick = function () {
alert("动态注册的onclick 事件");
}
}
</script>
</head>
<body>
<!--静态注册onClick 事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
onblur 失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console 是控制台对象，是由JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名= function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br />
密码:<input id="password" type="text"><br />
</body>
</html>
onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名= function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>嘉然</option>
<option>贝拉</option>
<option>向晚</option>
<option>珈乐</option>
<option>乃琳</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>泽一</option>
<option>祥太</option>
<option>楚枫</option>
<option>慕宇</option>
</select>
</body>
</html>
onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册表单提交事务
function onsubmitFun() {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名= function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册" />
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册" />
</form>
</body>
</html>
DOM模型
概念
DOM 全称是Document Object Model 文档对象模型
就是把文档中的标签，属性，文本，转换成对象来管理
Document对象的理解
1、Document管理了所有HTML文档内容
2、Document是一种树结构的文档。有层级关系
3、Document让哦我们把所有的标签都对象化
4、可以通过Document访问所有的标签对象
Document对象中的方法介绍
1、document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
2、document.getElementByName(elementName)
通过标签的name属性查找标签dom元素，elementName标签的name属性值
3、document.getElementByTagName(tagName)
通过标签名查找标签dom对象，tagName是标签名
4、document.createElement(tagName)
通过给定的标签名，创建一个标签对象，tagName是要创建的标签名
getElementBy方法实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script>
/*
需求: 当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法
验证的规则是: 必须由字母、数字、下划线组成、并且长度是5到12位
*/
function onclickFun() {
// 1、获取标签对象
var usernameObj = document.getElementById("username")
var usernameText = usernameObj.value;
//使用正则表达式
var patt = /^\w{5,12}$/;
/**
* test() 方法用于测试某个字符串,是不是匹配我的规则,
* 匹配就返回true,不匹配就返回false
**/
var usernameSpanObj = document.getElementById("usernameSpanObj")
// innerHTML 表示起始标签和结果标签中的内容
// innerHTML 这个属性可读,可写
usernameSpanObj.innerHTML = "嘉然保佑你";
if (patt.test(usernameText)) {
// alert("用户名合法!");
usernameSpanObj.innerHTML = "用户名合法!"
} else {
// alert("用户名不合法!");
usernameSpanObj.innerHTML = "用户名不合法!"
}
}
</script>
</head>
<body>
用户名:<input id="username" type="text">
<button onclick="onclickFun();">校验</button>
<span id="usernameSpanObj" style="color: red;"></span>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 看一看是否包含字母：e
* @type {RegExp}
*/
// var pat = new RegExp("e")
// 下面的也是正则表达式
// var pat = /e/
// alert('正则是这样的：' + pat)
// var str = 'aaae'
// alert((pat.test(str)))
/**
* 表示字符串中是否包含，a,b,c,中的任意一个！
* @type {RegExp}
*/
// var pat = /[abc]/
// alert('正则是这样的：' + pat)
// // var str = 'abcde'
// var str = '123445'
// alert((pat.test(str)))
/**
* 表示是否包含小写字母a到z！
* @type {RegExp}
*/
// var pat = /[a-z]/
// //大写就变成A-Z！
// //数字就变成0-9！
// alert('正则是这样的：' + pat)
// // var str = 'abcde'
// var str = '12a3445'
// alert((pat.test(str)))
/**
* 元字符
* \w元字符用于查找单词字符
* \W表示非单词
* 单词字符：a-z.A-Z,0-9,下划线
*/
// var pat = /\w/
// alert('正则是这样的：' + pat)
// var str = '[[_]]'
// alert((pat.test(str)))
/**
* 量词
* n+:表示匹配至少包含一个n的字符串
* n*:表示匹配包含零个或者一个的字符串
* n?:表示匹配任何包含零个或者一个的n字符串
* @type {RegExp}
*/
// var pat = /a*/
// alert('正则是这样的：' + pat)
// var str = '[[aaaaaaab]]'
// alert((pat.test(str)))
/**
* ^n:表示匹配任何开头为n的字符串
*
*/
// var pat = /^n/
// alert('正则是这样的：' + pat)
// var str = '[[aaaaaanb]]'
// alert((pat.test(str)))
/**
* 必须以a结尾
*/
// var pat = /a$/
// alert('正则是这样的：' + pat)
// // var str = '123'
// // var str = '123a'
// var str = '123ab'
// alert((pat.test(str)))
/**
*^a{3,5}$:要求重头到尾都是小写字母a,数量在[3,5]
*/
var pat = /^a{3,5}$/
alert('正则是这样的：' + pat)
var str = 'aabaa'
alert((pat.test(str)))
</script>
</head>
<body>
</body>
</html>
getElementsByName方法
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script>
function checkAll() {
var hobbies = document.getElementsByName("hobby")
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true
}
}
function checkNo() {
var hobbies = document.getElementsByName("hobby")
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false
}
}
function checkReverse() {
var hobbies = document.getElementsByName("hobby")
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked) {
hobbies[i].checked = false
} else {
hobbies[i].checked = true
}
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">JavaScript
<br />
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
getElementsByTagName方法
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script>
function checkAll() {
//document.getElementsByTagName()是按照指定标签名来进行查询
//并返回集合
var hobbies = document.getElementsByTagName("input")
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">JavaScript
<br />
<button onclick="checkAll()">全选</button>
</body>
</html>
document对象三个查询方法的注意事项
document对象的三个查询方法,如果由id属性，优先使用getElementById方法来进行查询
如果没有id属性，则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有，最后在按标签名查getElementsByTagName
以上三个方法，一定要在页面加载完成之后，才能查询到标签对象
节点的常用属性和方法
方法
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode)
方法，可以添加一个子节点,oChildNode是要添加的孩子节点
属性
| 属性 | 作用 |
|---|---|
| childNodes属性 | 获取当前节点的所有子节点 |
| firstChild属性 | 获取当前节点的第一个子节点 |
| lastChild属性 | 获取当前节点的最后一个子节点 |
| parentNode属性 | 获取当前节点的父节点 |
| nextSibling属性 | 获取当前节点的下一个节点 |
| previousSibling属性 | 获取当前节点的上一个节点 |
| className属性 | 用于获取或设置标签的class属性值 |
| innerHTML属性 | 表示获取/设置起始标签和结束标签中的内容 |
| innerText属性 | 表示获取/设置其实标签和结束标签中的文本 |
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
