day28_js基础
回顾
1. css概述
作用：美化网页
2. css基础语法（看懂）
html引入css
1）行内样式
2）内部样式
3）外部样式：<link/>
书写规范
选择器{样式名:样式值;}
基本选择器
标签{css样式}
.class{css样式}
#id{css样式}
扩展选择器
并集
后代
父子
属性
3. css常用样式
文字和字体
背景
显示
浮动
盒子模型
4. 案例：黑马旅游网注册页面
手动搭建html表格和form表单，通过class选择引入css样式
5. js概述
作用：页面交互
这哥们是浏览器可以直接解释运行的弱类型脚本语言
6. js基础语法
html引入js
1）内部脚本
2）外部脚本
js变量声明
let 声明变量
const 声明常量
js数据类型
基本：
1）number
2）string
3）boolean
4）undefined
引用：
new
JS基础语法
JS运算符
JS运算符
js运算符和Java运算符基本相同
只有一个特殊的比较运算符
=== 判断js变量的值和类型都相等才为true
!== 判断js变量的值和类型有一个不等就为true
JS流程控制语句
条件语句
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别
JS中对各种数据类型作为布尔值的特点:(重点掌握)
-
string 空字符串""为false,其余都为true
-
number 数字 只有0为false,其余数字都为true
-
boolean 布尔类型 值只有 true和false 两个
-
object 对象类型 空对象null表示false,其它对象都是true
-
undefined 变量未赋值 为false
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>条件语句</title>
</head>
<body>
<!--
条件语句
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别
JS中对各种数据类型作为布尔值的特点:(重点掌握)
1. string 空字符串""为false,其余都为true
2. number 数字 只有0为false,其余数字都为true
3. boolean 布尔类型 值只有 true和false 两个
4. object 对象类型 空对象null表示false,其它对象都是true
5. undefined 变量未赋值 为false
常用语法格式
if ... else if ... else
switch case break default
-->
<script >
//if ... else if ... else
// if(true){
// if(""){//string 只有空字符为假
// if(0){number 只有0为假
// if(false){//boolean false为假 true为真
// if(null){//object null为假
// if(undefined){//undefined永为假
if("undefined"){//undefined永为假
console.log("满足条件");
}else{
console.log("不满足条件");
}
//switch case break default
let k =1;
switch (k) {
case 1:
console.log("111");break;
case 2:
console.log("222");break;
default:
console.log("其它情况");
}
</script>
</body>
</html>
循环语句
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
</head>
<body>
<!--
循环语句
while 和Java一样
do while 和Java一样
(重点掌握:)
fori 和Java一样
forin 1.遍历出数组中的索引 2.遍历出对象中的属性名key
forof 1.遍历出数组中的元素
重点记忆点:
forin 与 forof 区别:
1.forin可以遍历对象,forof不能遍历对象
2.forin遍历出数组中的索引,forof遍历出数组中的元素
-->
<script >
//while 和Java一样
let k=1;
while (k<3){
console.log(k++);
}
//do while 和Java一样
k =1;
do{
console.log(k++);
}while (k<3)
//fori 和Java一样
for(let i=0;i<3;i++){
console.log(i);
}
// forin 可以遍历数组和对象
let arr = ["刘一","陈二","张三"];//JS数组使用中括号[]定义
let stu = {id:5,name:"李四",age:18};//JS对象使用大括号定义
//forin 1.遍历出数组中的索引 索引for
for(let index in arr){
console.log(index);//数组的索引 0,1,2
console.log(arr[index]);//数组中的元素
}
//forin 2.遍历出对象中的属性名key 索引for
for(let k in stu){
console.log(k);//字符串属性 id,name,age
console.log(stu[k]);//对象中的属性值
}
//forof 1.遍历出数组中的元素 增强for
for(let e of arr){
console.log(e);//数组中的元素
}
</script>
</body>
</html>
JS函数[java中的方法]
js函数是执行特定功能的代码块.也可以称为js方法
普通函数
语法(js中不用管返回值类型)
function 函数名(参数列表){
函数体;
[return 返回值;]
}
函数调用 js函数没有重载的概念. js方法的调用只以方法名区分. 从上到下执行, 下边儿的函数会覆盖上边儿相同函数名的函数
js中每一个方法都有一个arguments参数数组, 这个数组存有调用方法的参数
如果说方法的参数为3个, 然后调用时传入2个参数, 则会出现NaN的结果
如果调用传入5个参数, 则只把前3个当作用来计算的参数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS函数</title>
</head>
<body>
<!--
JS函数 使用关键字 function 来声明
1. 普通函数 格式 function 函数名(参数){return}
2. 匿名函数 格式 function(参数){return}
注意
a.普通函数和匿名函数中都有一个参数数组对象 arguments
b. JS函数的调用只以函数名区分,与参数无关
c. JS函数也是一种类型,一个具体函数可以看做是一个函数类型变量的一个值
-->
<script >
//------------- 普通函数 ------------------
// function myf( name,age){
// return "我是函数";
// }
//无参无返回值
function f1(){
console.log("无参无返回值");
}
f1();
//无参有返回值
function f2(){
return "无参有返回值";
}
let s2 = f2();//方法调用,并接收返回值
console.log(s2);
//有参有返回值
function f3(name){
return name+",您好";
}
let s3 = f3("同学啊");////方法调用,并接收返回值
console.log(s3);
//函数调用 js函数没有重载的概念. js方法的调用只以方法名区分
s2 = f2(1,2,3);//方法调用,并接收返回值
console.log(s2);
//js中每一个方法都有一个arguments参数数组(了解)
function f22(){
console.log(arguments);
return "无参有返回值";
}
f22("哈哈",123,true,null);//调用f22方法执行,并传入四个参数
//接受不定参数 ES6(了解)
function f4(... strs){
console.log(arguments);//参数数组
console.log(strs);//接收不定参数,同上
}
f4(1,3,"哈哈");//调用f4方法,并传入参数
//------------- 匿名函数 ------------------
//匿名函数
let f5 = function (){
return "匿名函数";
};
console.log(typeof f5);//function
console.log(typeof f1);//function
console.log(f5());//调用f5
</script>
</body>
</html>
匿名函数
通常与事件结合使用
function(参数列表){
函数体;
[return 返回值;]
}
轮播图
setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
document.getElementById(id属性值) 获得指定id的标签对象
document.querySelector(css选择器) 根据css选择器获取匹配到的一个标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-轮播图</title>
</head>
<body>
<!--
轮播图
预习:
setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
document.querySelector(css选择器) 根据css选择器获取匹配到的一个标签
-->
<img src="../img/0.jpg" width="100%">
<script >
let img = document.querySelector("img");//获取页面中的第一个img标签对象
console.log(img);//<img src="../img/0.jpg" width="100%">
console.log(img.src);//取出src属性的值 ../img/0.jpg
let k =0;
function myf(){
img.src = "../img/"+k+".jpg";//给img标签对象的src属性赋值
console.log(k++);
if(k==5)k=0;
}
setInterval(myf,1000);//创建一个定时器对象,每隔1秒调用一次myf,直到永远
</script>
</body>
</html>
JS事件
JS可以监听用户的行为,并调用函数来完成用户交互功能.
JS常用事件
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：页面加载完成后立即发生。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 改变事件
1. onchange 域的内容被改变。
7. 表单事件：
1. onsubmit 提交按钮被点击。
事件绑定
- 命名函数 普通函数绑定耦合性比较高
- 匿名函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件的绑定方式</title>
</head>
<body>
<!--
事件的绑定方式
1. 命名函数 格式 onEvent=函数
2. 匿名函数 格式 onEvent=函数
-->
<p id="p1" onclick="myf1()" title="我是p1">1. 命名函数</p>
<p id="p2" title="我是p2">2. 匿名函数</p>
<script >
//1. 命名函数 格式 onEvent="函数()"
function myf1(){//命名函数绑定把方法调用给事件属性
console.log("命名函数执行");
}
//2. 匿名函数 格式 onEvent=函数
let p2 = document.querySelector("#p2");//获取p2
p2.onclick = function(){//当p2被点击的时候调用方法执行
console.log("匿名函数执行");
};
</script>
</body>
</html>
案例: 页面交互
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-案例：页面交互</title>
</head>
<body>
<!--
常用事件
1. onload 页面加载完成
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 表单控件的值改变时
5. onclick 鼠标单击
-->
姓名 <input type="text" id="userName"><br/>
学历
<select name="edu" id="edu">
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">大专</option>
</select>
<br/>
<button id="btn" >按钮</button>
<script >
//1. onload 页面加载完成
window.onload = function () {
console.log("页面加载完成")
};
//2. onfocus 获取焦点
document.getElementById("userName").onfocus = function () {
this.value = "获取焦点";
};
//3. onblur 失去焦点
document.getElementById("userName").onblur = function () {
this.value = "失去焦点";
};
//4. onchange 表单控件的值改变时
document.getElementById("edu").onchange = function () {
alert(this.value);
};
//5. onclick 鼠标单击
document.getElementById("btn").onclick = function () {
alert("提交成功");
};
</script>
</body>
</html>
JS常用内置对象
字符串String
反引号字符又叫做字符串模板 ,模板中可以使用${}来进行插值.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<!--
1. 构造字符串对象可以使用
双引号,单引号,反引号
2. 字符串方法
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符,截取字符和
slice相似
split(delimiter) 把字符串分割为子字符串数组;分割为数组,反array.join(delimiter)
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
-->
<script type="text/javascript">
// ------------ 1. 构造字符串对象可以使用 双引号,单引号,反引号,new关键字
//双引号字符串
let s1 = "双引号字符串";
//单引号
let s2 = '单引号字符串';
//反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.
let s3 = `反引号字符串`;
let n = 999;
let s4 = "999="+n;
let s5 = `999=${n}`;
console.log(s5);//"999=999"
// ------------ 2. 字符串方法
//截取字符串
let s11 = "我是中国人,我爱我的祖国";
console.log(s11.substring(6, 9));//截取字符串,从索引6截取到9(不包括9)
//字符串分割为数组
let s12 = "1,2,3,4";
console.log(s12.split(","));//字符串分割为数组
//转换大小写
let s14 = "Qu Jie";
console.log(s14.toUpperCase());//大写
console.log(s14.toLowerCase());//小写
//去除首尾空格
let s15 = " Ha Ha ";
console.log(s15.trim());//去掉首尾空格
</script>
</body>
</html>
数组Array
js中的数组当作java中的ArrayList集合
数组常用方法
concat() 连接两个或更多的数组，并返回结果。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。与 字符串.split()切割为数组 方法相反
ort() 对数组的元素进行排序
<script >
//1. 创建数组
let arr1 = ["中国",666,"很好"];
let arr2 = [3,1,7,5];
//2. 数组合并
console.log(arr1.concat(arr2));//数组合并
//3. 添加元素
arr1.unshift("头头");//头添加
console.log(arr1);
arr1.push("尾巴");//尾添加
console.log(arr1);
//4. 删除元素
arr1.shift();//头删除
console.log(arr1);
arr1.pop();//尾删除
console.log(arr1);
//5. 数组元素拼接为字符串
console.log(arr2.join("-"));//拼接 "3-1-7-5"
//6. 排序数组元素
console.log(arr2.sort());//排序 默认是升序
console.log(arr2.sort(function(a,b){return a-b;}));//升序
console.log(arr2.sort(function(a,b){return b-a;}));//降序
</script>
日期
<script >
function getDateStr(){
//1. 创建日期对象
let d = new Date();//获取当前时间对象
//2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS
let fullYear = d.getFullYear();//获取年
let month = new String(d.getMonth()+1).padStart(2,"0");//获取月 09
let date = new String(d.getDate()).padStart(2,"0");//日
let hours = new String(d.getHours()).padStart(2,"0");//时
let minutes = new String(d.getMinutes()).padStart(2,"0");//分
let seconds = new String(d.getSeconds()).padStart(2,"0");//秒
let milliseconds = new String(d.getMilliseconds()).padStart(3,"0");//毫秒
let dateStr = `${fullYear}-${month}-${date}
${hours}:${minutes}:${seconds}.${milliseconds}`;
console.log(dateStr);//yyyy-MM-dd HH:mm:ss.SSS
return dateStr;
}
getDateStr();//调用方法
</script>
数学运算
数学运算
查询手册完成
1. 四舍五入 round(x) 把数四舍五入为最接近的整数
2. 向下取整 floor(x) 对数进行下舍入。 地板
3. 向上取整 ceil(x) 对数进行上舍入。
4. 产生随机数 random() 返回 0 ~ 1 之间的随机数。
5. 产生 [1,10]的随机整数
小扩展:
parseInt(x) 对x转为整数,有小数部分直接舍去. 功能类似 floor(x)
random() 返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1
在任何语言的随机数中都是左闭右开.
<script >
let n = 1234.567;
//1. 四舍五入取整
console.log(Math.round(n));//1235
//2. 向下取整
console.log(Math.floor(n));//1234
//3. 向上取整
console.log(Math.ceil(n));//1235
//4. 产生随机数
console.log(Math.random());//随机产生 [0,1) 小数
//5. 产生 [1,10]的随机整数
//[0,1) *10 --> [0,10) +1 --> [1,11) floor -- [1,10]
console.log(Math.floor(Math.random() * 10 + 1));//产生 [1,10]的随机整数
</script>
全局函数
不需要通过对象.调用, 在js内可以不用对象名, 直接使用方法去调用就行
全局函数
-
字符串转为数字
parseInt();//字符转为整数数字,从左到右遇到非数字停止parseFloat();//字符转为小数数字,从左到右遇到非数字停止
isNaN();//判断非数字 如果不是数值返回true, 否则返回false
-
对数据进行加密
encodeURI() 把字符串编码为 URI。 -
对加密数据进行解密
decodeURI() 解码某个编码的 URI。 -
把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
<script >
//1. 字符串转为数字
console.log(parseInt("123.456"));//123
console.log(parseInt("12abc3.456"));//12
console.log(parseFloat("123.456"));//123.456
console.log(parseFloat("123.45abc6"));//123.45
console.log(parseInt("abc123"));//NaN : not a number 不是一个数字
console.log(isNaN("abc123"));//true
//2. 对数据进行编码
let name = "明下午两点偷袭珍珠";
let encodeName = encodeURI(name);//编码
console.log(encodeName);//%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B
7%E8%A2%AD%E7%8F%8D%E7%8F%A0
//3. 对数据进行解码
let resultStr = decodeURI(encodeName);//解码
console.log(resultStr);//明下午两点偷袭珍珠
//4. 把字符串当做js表达式来执行
let str = "1+2*3-4/2";
let res = eval(str);//把字符串当做js表达式来执行
console.log(res);//5
</script>
</body>
</html>
老师下午总结
1. js语法
运算符
(1).算术运算符： + - * / % ++ --
注意：
字符串内容是数字：+是拼接， 其他运算时字符串隐式转换为数字进行运算。
字符串内容不是数字：+是拼接， 其他运算结果是NaN。
举例：
let a = 10;
let b = '4';
console.log(a+b); //104
console.log(a-b); //6
console.log(a/b); //2.5
console.log('20'-10); //10
console.log('aa'-10); //NaN
(2).赋值运算符： = += -= *= /= %=
(3).比较运算符：== === != !== > >= < <=
== : 比较值是否相等
=== : 同时比较值和类型是否相等
!= : 判断值是否不等
!== : 判断值和类型是否都不等
注意：数字可以与字符串进行比较，字符串可以与字符串进行比较。
字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较
"10"==10 //true
"10"===10 //false
(4).逻辑运算符：&& || !
注意：js的逻辑运算符不存在& |
(5).三元运算符：判断条件?表达式1:表达式2
条件为true时执行表达式1，false时执行表达式2
选择结构
(1).if结构
结构1：
if(条件表达式) {
//代码块;
}
结构2：
if(条件表达式) {
//代码块;
}else {
//代码块;
}
结构3：
if (条件表达式) {
//代码块;
}else if(条件表达式) {
//代码块;
}else {
//代码块;
}
注意：js中各数据类型都可以充当布尔类型在条件判断中使用。
数据类型 true false
number 1 0
string 非空串 ""(空串)
object 非空 null(空)
undefined 为假
NaN 为假
(2).switch结构
swtich结构1：
switch(变量名) {
case 常量值:
break;
case 常量值：
break;
default:
break;
}
注意：switch的()中的值和case的值执行全等(===)判断，必须类型和值都相等才会匹配。
swtich结构2：
switch(布尔值) {
case 表达式:
break;
case 表达式:
break;
default:
break;
}
注意：这是switch的另一种格式，可以在case后面使用表达式进行判断，并匹配小括号中的布尔值。
循环结构
(1).for循环：
格式1：（普通for）
for(let i=0; i<3; i++){
//循环体代码;
}
格式2：（增强for）
for(let 变量 of 数组){
//循环体代码;
}
格式3：（索引for）
for(let 索引 in 数组){
//循环体代码;
}
(2).while循环:
初始化语句;
while (条件表达式) {
//需要执行的代码;
}
(3).do-while循环:
初始化语句;
do {
//需要执行的代码;
}
while(条件表达式)
js真假值
| 数据类型 | true | false |
|---|---|---|
| 数字（number） | 非零值 | 0 |
| 字符串（string） | 非空串（有长度） | 空串（""） |
| 对象（object） | 非null | null |
| undefined | undefined值为false | |
| NaN | NaN值为false |
2. js函数
1.函数声明方式
(1).普通函数：
function 函数名(参数){
//函数代码
}
(2).函数表达式：
let 函数名 = function(参数){
//函数代码
};
(3).匿名函数：
function(参数){
//函数代码
}
注意：匿名函数一般时触发事件时调用。
2.js函数特点
1) js函数参数无需写类型，需要参数时直接添加参数名即可。
2) js函数无需声明返回值，如果有返回值直接在函数里面return结果即可。
3) js函数没有重载的概念，方法的调用只以方法名区分。
4) 每一个函数都有一个arguments参数数组
5) 如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。
3. 定时器
设置定时器：
setInterval(code,毫秒);
该方法是window对象提供的功能，每间隔给定的毫秒值就会执行一次code函数。
注意：
参数code可以是函数名，字符串，匿名函数。
当code是函数名时，不能带上小括号，被调用的函数也不能带有任何参数。
当code为字符串时，字符串内表示可执行的代码，可以在其中写入要传递的参数。
当code为匿名函数时，直接使用 function(参数){} 的格式写入。
举例：
1.函数名调用：
function show(){
//代码
}
setInterval(show,1000); //函数名方式调用，适合无参函数的定时调用
2.字符串调用：
function show2(num){
//代码
}
setInterval("show(10)",1000); //字符串方式调用，适合无参和有参函数
3.匿名函数调用：
setInterval(function(){//匿名函数方式调用，适合无参函数
//代码
},1000);
清除定时器
clearInterval(序号);
定时器在调用后，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器。
所以定时器的清除要借助于这个返回的数字。
举例：
//设置定时器，并返回该定时器序号
let num = setInterval(show,1000);
//清除定时器，停止执行定时任务
clearInterval(num);
4. js事件（重点）
事件是可以被JavaScript侦测到的行为。
事件绑定方式
1. html标签事件绑定
//声明函数
function show(){
console.log('show');
}
//在标签中通过事件种类属性绑定（此处绑定的是按钮单击事件，一旦按钮被点击，就执行show方法）
<button onclick="show()">html标签事件绑定</button>
2. js代码事件绑定
//声明函数
function show(){
console.log('show');
}
//根据id获取标签元素，通过属性赋值绑定（一旦按钮被点击，就会执行show方法）
document.getElementById("btn").onclick = show;
<button id="btn">js事件绑定</button>
常用事件
1.点击事件
onclick 单击
ondblclick 双击
2.焦点事件
onblur 失去焦点
onfocus 获取焦点
3.加载事件
onload 页面，文档，图片加载
4.鼠标事件
onmouseout 鼠标从元素移开
onmouseover 鼠标移到元素上
5.键盘事件
onkeydown 键盘的按键按下
onkeyup 键盘的按键松开
6.改变事件
onchange 监听内容改变事件
7.表单事件
onsubmit 表单提交时触发
常用事件案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>常用事件</title>
</head>
<body>
<!--
常用事件
1. onload 页面加载完成
2. onfocus 获取焦点
3. onblur 失去焦点
4. onchange 表单控件的值改变时
5. onclick 鼠标单击
-->
姓名 <input type="text" id="userName" onfocus="myFocus(this)"><br/>
学历
<select name="edu" id="edu">
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">大专</option>
</select>
<br/>
<button id="btn" onclick="myclick()">按钮</button>
<script >
//1. onload 页面加载完成
window.onload = function(){
let userName = document.querySelector("#userName");//获取普通文本框对象
console.log(userName);//<input type="text" id="userName">
};
//2. onfocus 获取焦点
function myFocus(input){
console.log("文本框获取焦点");
console.log(input.type);//text
}
//3. onblur 失去焦点
let myinput = document.querySelector("#userName");//获取普通文本框对象
myinput.onblur = function (){//文本框失去焦点时执行
console.log("文本框失去焦点");
console.log(this.value);//文本框中输入的值
};
//4. onchange 表单控件的值改变时
let select = document.querySelector("#edu");//获取下拉列表标签对象
select.onchange=function(){//下拉列表值改变时执行
console.log("下拉列表值改变时执行");
console.log(this.value);//下拉列表的值
}
//5. onclick 鼠标单击
function myclick(){
console.log("鼠标点击");
select.value = myinput.value;//把文本框的值赋值给下拉列表的值
}
</script>
</body>
</html>
附表：事件种类
| 属性 | 事件说明 |
|---|---|
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
| onunload | 用户退出页面 |
5. js内置对象
字符串
1. 创建字符串对象
构造字符串对象可以使用双引号,单引号,反引号,new等方式。
let s1 = "hello1";
let s2 = 'hello12';
let s3 = new String("hello3");
let s4 = `hello4`;
反引号的方式可以使用${}占位符对变量取值拼接。
let a = 10;
let b = 10;
let c = a+b;
console.log(`${a} + ${b} = ${c}`); //10 + 10 = 20
2. 获取字符串的长度：length属性
let s = "hello1";
console.log(s.length);
3. 字符串常用的方法
charAt(index) //根据索引获取指定位置字符
indexOf(str) //查找子串首次出现的索引位置，没有时返回-1
substring(start,end) //根据索引截取子串，包头不包尾
split(reg) //根据reg内容，进行字符串分割，支持正则表达式
toLowerCase() //大写转小写
toUpperCase() //小写转大写
trim() //移除字符串首尾空白
4.string和String的区别
String是内置对象，new出来的变量是object类型。
string是原始类型。
举例：
let a = new String("java");
let b = "java";
console.log(a==b); //值的比较 true
console.log(a===b); //值和类型的比较,类型不同 false
console.log(typeof a); //object类型
console.log(typeof b); //原始类型string
数组
js数组的特点
1. js数组可以同时存储任意类型的数据。
2. js数组长度是可以动态扩展的。
3. 数组的默认值是undefined，如果访问不存在的索引，也会返回undefined。
js数组的定义
方式1：let 数组名 = new Array(长度);
方式2：let 数组名 = [元素1, 元素2, 元素3, ...]
js数组元素的访问
数组名[索引号]
获取数组元素的个数：数组名.length
代码：
<script>
//数组中存储的默认值为undefined
let arr = new Array(3);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
//访问数组中不存在的索引的值会返回undefined
console.log("arr[7]: " + arr[7]);
//数组中可以同时存储不同类型的数据
let arr1 = [1, "hello", true, null, undefined];
console.log(arr1);
//当数组的存储空间不够时，数组会自动扩容
let arr2 = new Array(2);
arr2[0] = 10;
arr2[1] = 20;
arr2[2] = 30;
console.log(arr2);
</script>
js数组的常用方法
concat(数组) : 数组合并，并返回新的数组
join(分隔符) ：根据分隔符将数组拼接成字符串返回。
sort() : 数组排序（字符串按首字母顺序排序，可以在参数中传入函数，指定排序规则）
添加元素
unshift(元素) : 往数组头部添加
push(元素) : 往数组尾部添加
删除元素
shift() : 删除一个头部元素，返回被删除的元素
pop() : 删除一个尾部元素，返回被删除的元素
代码：
<script >
//1. 创建数组
let arr1 = ["中国",666,"很好"];
let arr2 = [3,1,7,5];
//2. 数组合并
console.log( arr1.concat(arr2) );//数组合并
//3. 添加元素
arr1.unshift("头头");//头添加
console.log(arr1);
arr1.push("尾巴");//尾添加
console.log(arr1);
//4. 删除元素
arr1.shift();//头删除
console.log(arr1);
arr1.pop();//尾删除
console.log(arr1);
//5. 数组元素拼接为字符串
console.log(arr2.join("-"));//拼接 "3-1-7-5"
//6. 排序数组元素
console.log(arr2.sort());//排序 默认是升序
console.log(arr2.sort(function(a,b){return a-b;}));//升序
console.log(arr2.sort(function(a,b){return b-a;}));//降序
arr.sort((a,b)=>a-b);
</script>
日期
Date对象用于处理日期和时间。
1.创建Date对象
let myDate=new Date()
2.常用方法
getFullYear() 以四位数字返回年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getHours() 返回小时 (0 ~ 23)
getMinutes() 返回分钟 (0 ~ 59)
getSeconds() 返回秒数 (0 ~ 59)
以上每个get方法都有对应的set方法
toLocaleString() 根据本地时间格式，把Date对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把日期部分转换为字符串。
数学运算
Math 对象用于执行数学运算。
1. 特点：
Math无需创建对象，属性和函数调用都是通过Math名称去访问。
2. 常用方法：（自行查阅API手册）
round(x) 四舍五入 ，把数四舍五入为最接近的整数
floor(x) 向下取整。
ceil(x) 向上取整 。
random() 返回[0,1)之间的随机数，包含0不包含1
产生[1,10]之间的随机数 :
Math.floor(Math.random()*10+1);
6. 全局函数
1. 字符串转为数字
parseInt();//字符转为整数数字,从左到右遇到非数字停止
parseFloat();//字符转为小数数字,从左到右遇到非数字停止
isNaN();//判断非数字
2. 字符串编解码
encodeURI() 把字符串编码为URI。
decodeURI() 解码某个编码的URI。
3. 把字符串当做js表达式来执行
eval() 把字符串解析JavaScript脚本代码来执行。
网友评论