一、什么是javaScript
- JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使我网页可交互
- 脚本语言：就是说JavaScript不需要经过编译，直接解释运行就可以了
一、1、JavaScript引入方式
- 内部脚本：将js代码定义在html标签页面中
在html中，JavaScript代码必须位于<script>与<script>标签之间
<script>
alert("hello js"); <!--原型==》window.alert("hello js")-->
<script>
提示：在html文档中可以在任意位置，放置任意数量的《script》标签，一般把脚本放在body标签的底部，可以改善显示速度，因为脚本执行会拖慢显示
- 外部脚本：将js代码定义在外部js文件中，然后引入到html页面中
- 外部文件：demo.js
- 引入js===》 <script src="这里面填js文件的路径"> <script>
注意：script标签不能自闭合
一、2、JavaScript书写语法
- 区分大小写
- 每行结尾的分号可有可无
- 注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
- 大括号表示代码块
一、2.1、输出语句
- 使用window.alert(“输出内容”);写入警告框（这里的window.可以省略）
- 使用document.write(“输出内容”); 写入html输出（即浏览器）
- 使用console.log(“输出内容”) 写入浏览器控制台
一、2.2、变量
- 使用var关键字来声明变量，作用域是全局变量
var test = 200;
test = "张三";
- JavaScript是弱类型语言，变量可以存放不同类型的值
- let关键字定义变量，作用域仅限于let所在代码块内
- 使用const关键字来声明常量
const test=1000; //test属于常量，不可修改
一、2.3、javaScript数据类型
- 数据类型分为：原始类型 和 引用类型
- 5种原始类型：
- number：数字、NaN(Not a Number，即不是数字的数字类型)
- string：字符，字符串，单双引皆可
- boolean
- null
- undefined：当声明的变量为初始化时，该变量的默认值是undefined
- 使用typeof运算符可以获取数据类型
alert(typeof age); //age是变量名
var obj=null;
alert(typeof obj);//返回值是Object
一、2.4、JavaScript运算符
- ==号
- ==判断类型是否一样，如果不一样则进行类型转换
- 转换成类型一样的，再去比较其值
- ===全等号
- 判断类型是否一样，不一样则直接返回false
- 类型一样，才去比较其值
var x=20;
var y='20';
alert(x==y);//true
alert(x===y);//false
一、2.5、类型转换
- 其他类型转换为number
- string 转换为number：按照字符串中的字面值，转换为对应的数字，如果字符串不是数字则转换为NaN，一般使用parseInt()方法把字符串转换为数字
- Boolean：true转换为1，false转换为0
var str= +"20"; //+就是把字符串转换为数字
alert(str + 1); //如果str是字符串，则这里会进行字符串的拼接，如果str是数字，则这里进行加法运算
alert(parseInt(str) + 1); // 使用parseInt把字符串转换为数字
-
其他类型转换为Boolean
- number 转换为Boolean：0和NaN转换为false，其他数字转换为true
- string 转换为Boolean：空字符串转换为false，其他字符串转换为true
- null 转换为Boolean：转换为false
- undefined 转换为boolen：转换为false
一、3、JavaScript函数
- 函数的定义：JavaScript函数通过function关键词进行定义，语法为
functon functionName(参数1，2，3，.......){
要执行的代码
}
- 注意：形式参数不需要类型（因为js是弱类型语言）
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 函数可以传递任意个参数。
一、3.1、第一种函数（方法）：
例子：
<script>
//函数的定义
function add(a,b){
return a+b;
}
//函数的调用
var res= add(1,2);
<script>
一、3.2、方法二
var functionName = function(参数列表){
要执行的代码
}
var add=function(a,b){
return (a,b);
}
let result = add(1,2)l;
一、4、 对象
一、4.1、Array对象
<script>
<!-- 第一种-->
let arr1 = new Array(1,2,3);
// alert(arr1);
let arr2= [1,2,3];
// alert(arr2);
// 数组的访问和java一样
// JavaScript的数组相当于Java中的集合，变长变类型
// 变长：
var arr3 =[1,2,3];
arr3[10]= 10;
// alert(arr3[10]);
// alert(arr3[9]);//undefined
// 变类型
arr3[5]="hello";
// alert(arr3[5]);
// 属性：length：数组中的元素个数
var arr4=[1,2,3];
// for (let i=0;i<arr4.length;i++){
// alert(arr4[i]);
// }
// 方法：
// push
var arr5=[1,2,3];
arr5.push(100);
// for (let i=0;i<arr5.length;i++){
// alert(arr5[i]);
// }
// splice:删除元素
arr5.splice(0,1);//从0的位置开始删除，删除1个元素
for (let i=0;i<arr5.length;i++){
alert(arr5[i]);
}
</script>
一、4.2、String对象
<script>
<!-- 定义方式一-->
var str1=new String("hello");
// 方式二：
var str2="abc";
// length:属性
alert(str2.length);
// 方法：trim():去除字符串前面两端的空白字符
var str4=' abc ';
alert(1+ str4 + 1);
alert(1+ str4.trim() + 1)
</script>
一、4.3、自定义对象
<script>
<!--自定义对象-->
var person = {
name:"ZS",
age:23,
eat:function (){
alert("干饭");
}
}
alert(person.name);
alert(person.age);
person.eat();
</script>
一、4.4、BOM对象
Browser Object Model ： 浏览器对象模型
- 组成：
- window对象：浏览器窗口对象
- location对象：地址栏对象
- History对象：历史记录对象
- Screen对象：屏幕对象
- Navigator对象：浏览器对象
一、4.4.1、window对象
<script>
// alert
window.alert("nihAo");
// confirm:有确定和取消两个按钮的弹框，点击确定则返回true，取消则返回false
// window.confirm("确定删除吗");
var a=window.confirm("真的删除吗")
if(a){
alert("删除成功");
}else {
alert("删除失败");
}
// 定时器
/*
setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
*/
setTimeout(function (){
alert("hello");
},2000);//2秒后执行
setInterval(function (){
alert("hello1234");
},2000);//2秒后执行
</script>
一、4.4.2、History对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
a{
display: block;
float: left;
margin-right: 20px;
padding: 5px;
border: 2px solid #D12147;
}
.btn{
cursor: pointer;
background:cornflowerblue;
color:#D0011B;
}
</style>
</head>
<body>
<a class="page" href="#page1">第一页</a>
<a class="page" href="#page2">第二页</a>
<a class="page" href="#page3">第三页</a>
<a class="btn" onclick="history.forward()">历史前进</a>
<a class="btn" onclick="history.back()">历史后退</a>
<input type="text" name="" id="goHistory" value="" />
<input type="button" id="goHistoryBtn" value="前往历史" onclick="history.go(goHistory.value)"/>
</body>
</html>
一、4.4.3、Location对象
<script>
// alert("准备跳转到百度");
// location.href="https://www.baidu.com";
document.write("3秒后跳转到百度");
setTimeout(function (){
location.href="https://www.baidu.com";
},3000);
</script>
一、4.5、DOM
- Document Object Model： 文档对象模型
- 组成：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
一、4.5.1、获取Element对象
- getElementById() 通过id属性来获取元素，它所获得的是一个DOM对象，习惯以o开头命名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//一 getElementById() 通过id属性来获取元素，它所获得的是一个DOM对象，习惯以o开头命名
window.onload=function()
{
var oDiv=document.getElementById("div1");
oDiv.style.color="red";
oDiv.style.fontSize="50px";
}
</script>
</head>
<body>
<div id="div1">javascript</div>
</body>
</html>
- getElementsByTagName() 通过标签名来获取元素,获得的是一个类数组（只能用到length属性和下标形式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//二 getElementsByTagName() 通过标签名来获取元素
window.onload=function()
{
// 首先用getElementById获取ul元素，然后通过getElementsByTagNmae 获取ul下的li元素
var oUl=document.getElementById("list");
var oLi=oUl.getElementsByTagName("li");
//getElementsByTagName("标签名") 获得的是一个类数组（只能用到length属性和下标形式）
for(var i=0;i<oLi.length;i++)
{
oLi[i].style.color="green";
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
- getElementsByClassName(“class的属性值”) 获得的是一个类数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function()
{
//三 getElementsByClassName("class的属性值") 获得的是一个类数组
var oLi=document.getElementsByClassName("select");
oLi[0].style.color="red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">Javascript</li>
<li class="select">JQuert</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
- querySelectorAll(“css选择器一样的格式”) 它获得的是多个元素，也是一个类数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function()
{
//querySelectorAll("css选择器一样的格式") 它获得的是多个元素，也是一个类数组。
var oDiv=document.querySelectorAll(".text");
oDiv[1].style.color="red";
// querySelector("css选择器一样的格式") 选取满足条件的第一个元素
var oDiv=document.querySelector("div");
oDiv.style.color="blue";
}
</script>
</head>
<body>
<div>javascript</div>
<div class="text">javascript</div>
<div class="text">javascript</div>
<div>javascript</div>
<div class="text">javascript</div>
</body>
</html>
- getElementsByName(“name属性值”) 获取的也是一个类数组，一般只用于表单元素的单选框，复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//getElementsByName("name属性值") 获取的也是一个类数组，一般只用于表单元素的单选框，复选框
window.onload=function()
{
var oInput=document.getElementsByName("status");
// 将第三个元素选中
oInput[2].checked=true;
}
//document.title document.body 是对这两个元素的获取
</script>
</head>
<body>
你最高的学历是：
<label for="">
<input type="checkbox" name="status" value="本科">本科
</label>
<label for="">
<input type="checkbox" name="status" value="硕士">硕士
</label>
<label for="">
<input type="checkbox" name="status" value="博士">博士
</label>
</body>
</html>
一、5、事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 事件绑定方式一-->
<input type="button" value="按钮1" onclick="on()">
<input id="btn" type="button" value="按钮2">
<script>
<!-- 事件绑定 -->
function on(){
alert("我被点击率");
}
<!-- 事件绑定方式二 -->
document.getElementById("btn").onclick = function (){
alert("我再次被点击了");
}
</script>
</body>
</html>
一、6、常用事件
| 事件名 | 说明 |
|---|---|
| onclic | 鼠标点击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘按键被按下被触发 |
| onmouseover | 鼠标被移动到某个元素之上 |
| onmouseout | 鼠标从某个元素移开 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="register" action="#">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<script>
<!-- onsubmit事件，如果返回true，则表单可以被提交，false，则表单不能被提交-->
document.getElementById("register").onsubmit=function (){
return false;//
}
</script>
</body>
</html>
一、7、表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
一、8、正则表达式
- 正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
- 正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
- 正则表达式常用的规则如下：
- ^：表示开始
- $：表示结束
- [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
- .：代表任意单个字符，除了换行和行结束符
- \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
- \d：代表数字字符： 相当于 [0-9]
- 量词：
+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag
3729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
