JavaScript分为输出语句和输入语句
1 输出语句
alert("文本") 在浏览器中弹出警告窗
document.write("文本") 在网页中输出内容
console.log("文本") 控制台输出信息
2输入语句
prompt("文本") 在网页中弹出一个输入框
confirm("文本") 在网页中弹出一个确认框
JavaScript的引入方式分为 内行式 嵌入式 外链式
1 内行式
botton 按钮
οnclick="window.alert('文本')" 点击事件弹窗
<button οnclick="window.alert('文本')">文本</button>
2嵌入式
<script>window.alert("文本")</script>
3外链式
<script src="./_____"></script>
使用外链式时须创建一个后缀为 .js 的文件,再引入!!!
JS的语法
1.变量
01.变量的声明与赋值
先声明后赋值
声明变量
var boy;
var girl;
console.log(boy); undefined(未定义的)
console.log(girl);
为变量赋值
boy = "jack";
girl = "lily";
console.log(boy); jack
console.log(girl); lily
声明的同时并赋值
var myAge = 16;
var myHeight =188;
console.log(myAge);
console.log(myHeight);
02.let声明变量
let是ES6引入的关键字,用来替代var关键字 (ES6指的是2015年推出的ECMAScrip语法)
var boyFriend = "蔡徐坤"
var boyFriend = "吴亦凡"
var boyFriend = "李易峰"
console.log(boyFriend);
let girlFriend = "罗志祥"
girlFriend = "马嘉祺" let不能相同名字,的但可以修改,也可以用花括号
console.log(girlFriend);
let girlFriend = "范丞丞"
03.const声明变量
let和var的变量可以改变
const的变量不能改变是常量,必须要在声明时候赋值
const a = 3.14
a = 3.15
console.log(a); 这里不会报错但运行是会报错
正确写法
const a = 3.14
console.log(a);
04.声明变量的区别
(1)初始化要求不同
使用var和let声明变量时可以先不初始化,
而使用const声明变量时必须初始化。
(2)重复声明不同
使用var和let声明的变量可以多次被修改,
其值只与最近一次赋值一致,而使用const声明的变量,
在整个运行过程中不能修改初值
(3)对块级作用域的支持不同
(使用一对花括号括起来的代码称为一个代码块所谓块级作用域,
就是指变量起作用的范围是当前代码块,离开当前代码块,变量就失效了。
使用var声明的变量支持全局作用域,使用let和const声明的变量支持块级作用域。)
2.数据类型
01.数据类型分析
简单数据类型储存在栈内存中
复杂数据类型的内容储存在堆内存中,地址储存在栈内存中
02.基本数据类型
1 Boolean--布尔类型
2 numbr-数字型
NaN (Not a Number) NaN也属于数字类型
isNaN判断是否是一个非数字
如果是数字类型则为false
如果是非数字类型则为true
3 string-字符串
4 undefined-未定义型
表面声明变量还未赋值
5 null-空
03.数据类型检测
isNAN 检测是否是一个非数字 typeof()
布尔类型的true,会在运算中变为1,false会变成0 加号是连接作用
04.数据类型转换
(1)将数据类型转换为布尔类型 Boolean()
字符串和数字类型都会转换为布尔类型的true
空字符串转换为布尔类型为false,空格字符串转换为true
数字0转为布尔类型false
NaN转为布尔类型false
underfind转为布尔类型false
null转为布尔类型false
(2)将数据转化为字符串类型 String() toString()
(3)将数据转换为数字类型 Nymber()
3.运算符
01.算术运算符
+(加) 、-(减)、*(乘)、/(除)、%(取模)、-(负数)、++(自增)、–(自减)。
乘除的规则: 两侧操作数不是数值型,那么就会强制转换成数值型,如果无法转换,那么就转换成NAN,
自增自减的规则:在表达式中,只有自增运算符,那么++在前在后都是自增。
在表达式中,除了自增运算符还有其他运算符,那么++在前,先自增再运算,++在后先运算
02.字符串运算&隐式转换
隐式转换:当两个数据类型不同时,JS会按照既定的规则进行转换
字符串运算符:加号遇到字符串做拼接使用
03.赋值运算符
a+=b a=a+b
a-=b a=a-b
a*=b a=a*b
a/=b a=a/b
a%=b a=a%b
a**=b a=a**b
04.比较运算符
==等于、===严格全等、!=非等、 !==严格非等、>大于、<小于、>=大于等于、<=小于等于。
=是赋值
==是等于,只比较直,不比较类型。
===是严格全等,即比较值也比较类型
05.逻辑运算符
逻辑与 && 一假即假,全真才为真。 结果都为true取&&后面的值
逻辑或 | | 一真即真,全假才为假
逻辑非 ! 真即假,假即真,取反值
其他类型转换为布尔值的规则 0→false, 非0→true
JavaScript控制语句
1.分支结构
01.单分支结构
如果条件为true执行里面所有语句,否则跳过if语句
if(条件){
语句;
语句;
}
02.双分支结构
if(条件){
语句;
语句;
}
else{
语句;
语句;
}
03.多分支结构
if(条件){
语句;
语句;
}
else if(条件){
语句;
语句;
}
else if(条件){
语句;
语句;
}
else if(条件){
语句;
语句;
}
六.数组
1.初始数组
数组是一种复杂数据类型用于讲一组数组集合在一起
通过一个变量就可以访问一组数据
数组之间用逗号隔开
数组中的"索引/下标",是从0开始计算的
//声明数组
let c =["ok","yes","no"]
//打印数组
console.log(c2);
//打印数组长度
console.log(class02.length);//3
//打印数组中下标为1的元素
console.log(c[0]);//ok
console.log(c[1]);//yes
//数组可以是任意类型的元素,字符串、 数字 、数据
let a=[1,2,3]
let b=['string',NaN,null,underfined]
2.创建数组
1.以new Array()的方式创建数组
var arr=new Array();console.log(arr);// Array(0)
var arr=new Array(5);
console.log(arr);// empty(5)
var arr=new Array("aaa","bbb","ccc");
console.log(arr);
2.使用数组字面量创建数组
var mood=['sad',,,,,,'happy']console.log(mood.length);//7
3.数组的基本操作
1.获取元素长度
数组名.length2.修改数组长度
数组名.length=numbervar arr = [0, 1, 2, 3, 4];
console.log(arr.length);
arr.length = 5;
console.log(arr);[0, 1, 2, 3, 4, empty]
arr.length = 3;
console.log(arr);//[0,1,2]
3.添加数组长度
arr[4] = 3;console.log(arr);//[0,1,2,empty.3]
4.修改数组元素
arr[0] = 1;console.log(arr);//[1,1,2,empty.3]
5.删除数组元素
//delete 数组名[index]删除数组中的某个元素值delete arr[3];
console.log(arr);//[1,empty,2,empty.3]
6.遍历数组
let arr1 = [10, 20, 30, 40, 50, 60]var sum = 0;
for (var i = 0; i < arr1.length; i++) {
sum += arr1[i]
//arr[0] 10 sum+10=0+10=10
//arr[1] 20 sum+20=10+20=30
//arr[2] 30 sum+30=30+30=60
}
console.log(sum);//210
let sorce = [97, 65, 43, 99, 60, 58, 36, 72, 85, 77]
var max = 0
var min = 100
for (var i = 0; i < score.length; i++) {
if (max < score[i]) {
max = score[i]
}
if (score[i] < min) {
min = scorel[i]
}
}
console.log(max);
console.log(min);
7.新增数组元素
//push在数组后添加元素let arr3 =[1,2,3,4]
arr3.push=(5)
console.log(arr3);//[1,2,3,4,5]
//unshift在数组前添加元素
arr3.unshift(-2,-1,0)
console.log(arr3);//[-2,-1,0,1,2,3,4,5,6]
var arr4=[0,-5,19,50,2,7,10,11,-6,8,2]
var arr5=[]
for(let i=0; i<arr4.length;n++){
console.log(arr[i]);
if(arr4[i]>10){
arr5.push(arr4[i])
}
}
console.log(arr5);
4.二维数组
// 二维数组指的是数组元素的值是一个一维数组var arr = [80, 100, 75]
var arr1 = [
[80, 100, 75],
[90, 67, 66],
[99, 87, 85]
]
//访问二维数组
console.log(arr1[0]);//[80,100,75]
console.log(arr1[0][0]);//80
//遍历二维数组arr1
for(let i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
for (let j = 0; j < arr1.length; j++) {
console.log(arr1[i][j]);
}
}
//二维数组倒置
var arr1 = [
[1, 2, 3], [4, 5, 6], [7, 8, 9],]
var arr2 = []
// 遍历原数组的行
for (var i = 0; i < arr1[0].length; i++) {
//根据原数组的行,设置新数组的列
arr2[i] = [];
// 遍历原数组的列
for (var j = 0; j < arr1.length; j++) {
//j是原数组的列 i是数组的行!
// 颠倒位置
arr2[i][j] = arr1[j][i]
}
}
console.log(arr2);
5.数组迭代方法
1.map数组遍历器
let arr=[23,32,70,101,107]let res=[]
for (let a=0; a<arr.length;a++){
res[a] =arr[a]+1
}
console.log(res);
//map:利用某种规则映射得到一个新数组
//map()中需要传入一个回调函数作为参数
//在回调函数中定义需要map数组遍历方法做什么事情
//arr.map((元素,下标)=>(return新元素)
let res1=arr.map(function (value,index){
//回调函数中一定要return
return value +1 //让每个元素+1
})
console.log(res1);
let res2=arr.map(function (value,index){
return value *2
})
console.log(res2);
2.filter数组过滤器
let arr = [-10, 0, 10, 20, 30]let res = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
res.push(arr[i])
}
}
console.log(res);
//filter:用于筛选数组中满足条件的元素,返回筛选后的新数组
//arr.filter((value,index)=>(筛选条件))
//filter形成的新数组的长度!==原数组长度
//回调函数执行次数 == 数组长度
let res2 = arr.filter((value, index) => {
return value > 10
})
console.log(res2);
let arr1=[-40,35,9,26,0,99,77]
let res3 = arr1.filter((value, index) => {
return value%2==0
})
console.log(res3);
3.forEach数组遍历
forEach也是用于遍历数组数组.forEach(function(vaule,index,arr){算法})
回调函数的执行次数=原数组长度
forEach没有返回值,不需要return
let arr = [1, 2, 3, 4, 5, 6]
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum);
let sum1 = 0
// arr.forEach(function(value){
// sum1+=value
// })
arr.forEach(value => sum1 += value)
console.log(sum1);
4.some
Some用于判断数组元素是否符合条件回调函数的执行次数! ==原数组长度
some函数返回一个布尔值
只要有一个元素符合函数体的判断条件,就返回true
如果没有一个元素符合函数体的判断条件,则返回fase
let year=[2001,2002,2003,2005]
let arr2 = year.some((item, index) => {
return item %4==0 &&item%100!=0
})
console.log(arr2);
5.every
some和every通历函数后返回的都是一个布尔类型的值,
如果有元素满足条件,some的值为true
当全部元素满足条件,every的值为true
let arr = [1, 2, 3, 4, 5, 6]
let res =arr.every(function (item){
return item>0
})
console.log(res);
let res1 =arr.every( (item) =>item>0
)
console.log(res1);
6.findindex
findindex用于返回第一个符合元素的下标var arr = [9, 4, 0, -1, 3, -2, 7]
var index= arr.findIndex(function(b){
return b>0
})
console.log(index);
7.reduce
var arr = [66, 44, 33, 22]var a = 0;
var b = 0;
for (let i = 0; i < arr.length; i++) {
a += arr[i]
}
b = a / arr.length
console.log(b);
var sum = arr.reduce( (sum, value) => {
return sum += value
})
var avg = sum / arr.length
console.log(sum);
console.log(avg);
console.log(index);
七.函数
1.初识函数
1. 函数的定义
函数用于封装完成一段特定功能的代码相当于将一条或多条语句组成的代码块包裹起来
用户在使用时只需要关心参数和返回值,就能完成特定功能,而不用了解具体的实现
2.函数格式
function name(params){}
function值这是一个函数语句
name是函数名
params是函数参数
{}内函数的具体功能
3. 函数的返回值
函数的返回值是指函数在调用后获得的数据在定义函数时,可以为函数指定一个返回值,函数的返回值可以是任意类型的数据
在Js中使用return语句得到返回值并退出函数
{return 表达式}
2.函数内外变量的作用域
1.全局变量
在函数体外声明的变量或者在函数体内省略var关键字声明的变量var a = 10
function demo() {
console.log(a);//a为全局变量,在函数体内可以被访问
}
demo()
console.log(a);//a为全局变量,在函数体外也可以被访问
2.局部变量
在函数体内利用var关键字声明的变量function demo1(params) {
var b = 10 //b是var关键字声明的变量,为局部变量
console.log(b);//函数内部定义的局部变量b,可以在函数内部被访问
3. 块级变量
在es6标准中,新增的let关键字声明的变量为块级变量一个花括号{}为一个块级
if (true) {
// let sex = 男;//let声明的变量sex为块级变量
console.log(sex);//块级变量sex可以在()内部被访问
}
//consoLe.log(sex);//块级变量sex不可以在外部被访问
for (leti = 0; i < 5; i++) {
console.Log("循环内部" + i);
}
console.log("循环外部" + i);// i is not defind
4.js三种作用域
全局作用域:被全局变量所拥有:在{}外声明的变量局部作用:被局部变量所拥有:在函数内定义的变量
块级作用域:被块级变量所拥有:在分支语句或者循环大括号中定义的变量
5.变量提升
//通过var声明的变量,在申明并赋值语句之前就可以被访问到console.log(d);//undefined
var d = 20;
//因为变量提升,所以67-68行代码的执行效果,其实是71-73行。
var d;
console.log(d)
var d = 20;
3.函数进阶
1.封装函数
var fn = function sum(num1, num2) {//在函数内部封装了一个打印语包
//调用此函数,就会执行打印语句
console.log(num1 + num2)
}
//sum(1.2)//3
fn(1, 2)//3
function sum(num1, num2) {
//在数内部求的一个和
//并将求得的和返回出去
//让函数外部可以拿到
return num1 + num2
}
console.log(sum(1, 2));
var fn = function sum(num1, num2) {
return num1 + num2
}
console.log(fn(1, 2));
2.匿名函数
var fn1 = function (num1, num2) {return num1 + num2
}
console.log(fn1(1, 2));
3.前头函数
删除function关键字在参数和函数体中间放上"=>"
var fn2 = function (num1, num2) {
console.log(num1 + num2);
}
fn2(1, 2)
//当函数体只有一句话时,可以省略大括号
var fn3 = (numl, num2) => console.log(num1 + num2);
fn3(1, 2)
//当函数只有一句代码并且函数的执行结果就是函数的返回值
//可以省略函数的大括号和return关键字
var fn4 = (numl, num2) => num1 + num2
console.log(fn4(1,2));
//当参数只有1个时,可以省略函数外部的小括号
var fn5 = numl => num1 + num2
console.log(fn5(12));
4.回调函数
//函数fn作为参数传递给参数cal//然后在函数cal中调用函数fn
//此时,fn就是回调函数
function cal(numl, num2, fn) {
return fn(numl, num2)
}
console.log(cal(10, 20, function (a, b) {
return a + b
}));//17
console.log(cal(10, 20, function (a, b) {
return a * b
}));//200
console.log(cal(10, 20, function (a, b) {
return a % b
}));
//在cal函数中设置了回调函数后
//可以根据调用时传递的不同的函数参数(相加函数、相乘函数
//去实现不同的功能
//实现了函数的定制化
5.定时器函数
//setInterval()//Interval:间隔,间隙
//“时间间隔“一到,代码就会热行一次
//setInterval(function,time)
// setInterval(function () {
// console.log("该上课了");
// }, 5000)
//setTimeout()
// 用来指某个函数或某段代码在多少毫秒以后执行
//setTimeout(function,time)
// setTimeout(function(){
// console.log("抢票");
// },3000)
//定时器函数属于异步代码。
//setTimeout指定的代码,必须等同步代码执行完毕后执行
// console.log(1);
// setInterval(function () {
// console.log(2);
// }, 0)
// console.log(3);
console.log("A");
setTimeout(function(){
console.log("B");
},20)
console.log("C");
setTimeout(function(){
console.log("D");
},0)
6.函数嵌套与作用域链
// 函数嵌套var i = 10;
function fn1() {
var i = 20;
function fn2() {
function fn3() {
console.log(i);
}
fn3()
}
fn2()
}
fn1()
// 变量访问规则:就近原则
// 当在一个作用域中访问变量时,首先看当前作用域有没有声明
// 如果有则访问,没有则往上级作用域查找
// 直到达到顶端作用域没有时,程序报错
7.闭包函数
闭包的作用:解决变量污染问题,让变量被函数保护起来// let count = 0;
// setInterval(function () {
// console.log(count++);
// }, 1000)
// 在这段代码中,count是一个很常用的变量名。
// 为了避免和其他位置的代码起冲突,可以使用一个函数将上面的代码包裹起来
function fn(){
let count = 0;
setIntervai(function(){
console.log(count++);
},1000);
}
//内部函数setInterval访问外部函数 fn定义的局部变量count
function fn(){
let count = 0;
function add() {
console.log(count++);
}
setIntervai(add, count)
}
// 内部函数add访问外部函数fn定义的局部变量count。
8.递归函数
递归函数是一个函数间接或直接的调用自身// function func(){
// console.log(1);
// func()
// }
//需求:设置一个函数getSum()
//如果传入进去的是n
//return sum=n+(n-1)+(n-2)+..+ 1
//n=5
//sum = 5+4+3+2+1=15
// 循环写法
function getSum(n) {
var sum = 0
for (var i = 0; i <= n; i++) {
sum += i
}
console.log(sum);
}
getSum(5)
// 循环写法二
function getSum2(n) {
var sum = 0;
for (var n; n >= 0; n--) {
sum += n;
}
console.log(sum);
}
getSum(5)
//递归写法
function getSum3(n) {
//当n=1时
if (n == 1) {
return 1;
}
// 当前数组+比自己小1的数字
return n + getSum3(n - 1)
}
console.log(getSum3(5));
// 需求:设置一个函数,求阶乘(循环写法)
//传入一个
var mulSum = 1;
for (var i = 1; i <= n; i++) {
//假设n=3;i=1 i=2 i=3
mulSum *= i
}
return mulSum
}
console.log(fn(4));//4*3*2*1=24
// 需求:设置一个函数,求阶乘(递归写法)
//传入一个n,返回n*(n-1)*(n-2)*...*1
function fn1(n) {
var mulsum = 1;
//设置终点
if (n === 1) {
return 1
}
return n * fn1(n - 1)
}
//n=4; 4*fn1(3); 4*3*fn1(2); 4*3*2*fn1(1); 4*3*2*1=24
console.log(fn1(4));
//斐波那契数列(每一项等于前两项之和)
// 求斐波那契数列(循环写法)
function getValue(n) {
var arr = [1, 1]
for (var i = 2; i < n; i++) {
//某一个数等于它前面两个数之和
//比如下标i = 6(下标为6)的数8 = 5(下标为5)+3(下标为4)
//i是下标,arr[i]对应的是数组值
arr[i] = arr[i - 1] + arr[i - 2]
}
console.log(arr);
return arr[arr.length-1]
}
console.log(getValue(10));
// 求斐波那契数列(递归写法)
function getValue(n) {
//设置终点
if(n===1 || n===2){
return 1
}
//未到终点
return getValue(n-1) + getValue(n-2)
}
console.log(getValue(10));
//n=4(需要知道在数组中第4个数是多少)
//getValue(4)=getValue(3)+getValue(2)
//getValue(4)=getValue(2)+getValue(1)+1
//getValue(4)=1+1+1
n,返回n*(n-1)*(n-2)*...*1
function fn(n) {
八.对象
1.介绍对象
1.对象(obiect)是什么
对象是一种复杂数据类型(复杂数据类型的内容存储在堆内存中,地址存储在栈内存中
2.对象作用
以键值对的形式存储多个数据3.对象
let obj = {name: "张三",
age: 30,
sex: "男",
gfs: ["小花”“小美”,“小爱"],
sayHi: function () {
console.log("瓦达西见一个爱一个")
}
}
console.log(obj);//(name:'张三',age:30,sex:'男'}
console.log(obj.name);//'张三'
console.log(obj.age);//30
console.log(obj.sex);//'男
console.log(obj.gfs);//['小花','小美','小爱']
console.log(obj.sayHi);
console.log(obj.sayHi());
4.对象新增
obj.bf = "李四"console.log(obj);
5.对象修改
obj.bf = "王五"console.log(obj);
6.对象删除
delete obj.ageconsole.log(obj);
7.对象通历
//遍历数组:for(let i=0; i < arr.length;i++){}//遍历对象:for-in循环:for(let key in 对象名) {对象名[key]}
let score={
math:99,
history:80,
geology:70,
english:60
}
for (let key in score ){
console.log(key);// 打印属性名
console.log(score[key]);// 打印属性值
}
2.Math对象
// 1.内置对象:由JS作者提前编写好的对象,里面存储了一些属性方法,直接使用即可,//2:Math数学对象、Date日期对象
//计算一个边长为5的圆的周长
const pi = 3.14
const r = 5
const C = 2 * pi * r
console.log(C);
//a.员周率:Math.Pi
console.log(Math.PI);
const c = 2 * Math.pI * r
console.log(c);
//b.绝对值:Math.abs()
console.log(Math.abs(-3.5));//3.5
//c.找最大/最小值:Math.ax/Math.min()
console.log(Math.max(1, 9, 5, 6, 3, 4, 6, 2));//9
console.log(Math.min(1, 9, 5, 6, 3, 4, 6, 2));//1
//d.幕运算:Math.pow(x,y)求x的y次方
console.log(Math.pow(2, 10));//1024
//e.四舍五入: Math.round()
console.log(Math.round(3.5));//4
console.log(Math.round(3.2));//3
console.log(Math.round(-3.5));//-3
console.log(Math.round(3.6));//-4
//f.向上取整:Math.ceil()
console.log(Math.ceil(3.1));//4
console.log(Math.ceil(-3.1));//-3
//g.向下取整:Math.floor()
console.log(Math.floor(-1.8))//-2
//h.生成0-1之间的随机小数:Math.random()
console.log(Math.random());
//生成一个0-100之间的随机整数
console.log(100*Math.random());
3.Date对象
时间戳:从1970年1月1日零时零分零秒到现在的毫秒数//人以下三种写法都会得到时间戳
console.log(Date.now());
console.log(+new Date);
console.log(new Date().getTime());
1.获取年份
console.log(new Date().getFullYear());console.log(new Date().getMonth());//范围0-11
console.log(new Date().getDate());//范围1-31
console.log(new Date().getDay());//范围0-6,星期天是0
console.log(new Date().getHours());
console.log(new Date().getMinutes());
let a = new Date().getFullYear();
let b = new Date().getMonth();
let c = new Date().getDate();
let d = new Date().getDay();
document.write("今天是" + a + "年" + b + "月" + c + "日")
2.设置年份
date.setFullYear(1998)date.setMonth(8)
date.setDate(1)
3.获取年份
var year = date.getFullYear()var month = date.getMonth()
var day = date.getDate()
4.打印年份
console.log(year);console.log(month);
console.log(day);
4.Array对象
1.push(element) 在数组末尾添加一个元素
var course = ["web", "java"]course.push("JavaScript")
console.log(course);//['web','java','JavaScript']
2.unshift(element)在数组开头添加一个元素
course.unshift("计算机基础")console.log(course);//[计算机基础,'web','java',javaScript]
3.pop()删除数组中最后一个元素
course.pop()console.log(course);//[计算机基础',‘web','java']
4.shift()删除数组第一个元素
course.shift()console.log(course);//['web','java']
5.splice(start, deletCount)
arr.splice(3, 2)//从下标为3的数(4)开始,删掉后面两个数字console.log(arr);//[1,2,3,6,7]
6.splice(start,deleteCount,item1,item2,item3)
arr.splice(4, 0, 999, 888, 777)//从下标为4的数字(6)开始,往后面满加一些元素console.log(arr);//[1,2,3,6,999,888,777,7]
7.reverse():颠倒数组中元素的索引
var arr1 = [1, 2, 3, 4, 5, 6, 7]arr1.reverse();
console.log(arr1);//[7,6,5,4,3,2,1]
5.String对象
1. 创建字符串对象
var str = new String("apple")
console.log(str);//{"apple"
2.数组类型检测
console.log(typeof (str));//object
var str1 = "banana"
console.log(typeof (str1));//string
3.根据字符串返回索引
// indexOf() 返回在字符串中首次出现的索引,没有则返回-1
// lastIndexOf() 返回在字符串中最后一次出现的索引,没有则返回-1
var str = "helloworld"
console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//6
// 根据索引返回字符串
// chatAt
console.log(str.charAt(7));//"r"
4.字符串截取
// slice (start)
console.log(str.slice(5));//"world"
// slice (start,end)//从start的下标截取到end的下标
console.log(str.slice(1, 4));//"ell"
console.log(str);//helloworld //截取不会改变原数组
5.字符串连接
// concat()
var str1 = "hello"
var str2 = ",world"
str1.concat(str2)
console.log(str1.concat(str2));//hello,world
6.大小写转换
//toUpperCase() 转化为大写
//toLowerCase() 转化为小写
console.log(str1.toUpperCase());//HELLO
console.log("HELLO".toLowerCase());//hello
7.替换
// replace(str1,str2) 将str2替换str1
console.log(str)//helloworld
console.log(str.replace("world", "js"));//hellojs
8.字符串分隔(将字符串转化为数组)
// split(分隔符)
console.log(str.split(""));//['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
console.log(str.split());//['helloworld']
console.log(str.split("o"));// ['hell', 'w', 'rld']
九.DOM(上)
1.获取元素案例1-隔行变色
HTML 部分
<button id="btn">点我呀,给你点颜色看看</button>
<!-- ul>li{给你点黄色看看}*5 -->
<ul>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
</ul>
JS 部分
1.获取元素
<script>
let btn = document.getElementById("btn")
console.log(btn);
let liList = document.getElementsByTagName("li")
console.log(liList);
//document.getElementByID("id属性值")根据ID属性获取元素
//document.getElementByTagName("标签名")根据标签名获取元素
2.注册事件
btn.onclick = function () {
3.事件处理
//3.1遍历liList数组
for (let i = 0; i < liList.length; i++) {
//当遍历的i是偶数时
if (i % 2 == 0) {
console.log("黄色");
liList[i].style.backgroundColor = "yellow"
//当遍历的i是奇数时
} else {
console.log("绿色");
liList[i].style.backgroundColor = "green"
}
}
}
// 元素对象,事件属性 = 事件处理函数
// element.onlick(单击事件)=function(){}
// 元素样式操作
// Element.style.样式属性值="样式属性值"
// backgroundColor 设置元素的背景颜色
</script>
2.获取元素案例2-微博评论框
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.count {
color: red;
}
</style>
</head>
<body>
<div class="box">
<!-- textarea多行文本框 -->
<!-- placeholder占位符 -->
<!-- maxlength最大输入数 -->
<textarea id="area" cols="30" rows="10" placeholder="说点什么吧" maxlength="140"></textarea>
</div>
<span class="count">0</span>
<span>/</span>
<span>140</span>
<script>
// 1.获取元素
let area = document.querySelector("#area")
let count = document.querySelector(".count")
console.log(area);
console.log(count);
//根据CSS选择器获取元素
//document.querySelector("#id名")通过id选择器获取元素对象
//document.queryselector(".类名")通过class类选择器获取元素对象
//2.注册事件
//元素对象.事件属性=事件处理函数
// element.oninput(输入事件)=function(){}
area.oninput = function () {
//area.value.length//在输入框内输入的内容的长度
console.log(area.value.length);
count.innerHTML = area.value.length
}
// 设置内容
// element.innerHTML ="HTML内容'
3.获取元素案例3-开关灯
<body><input type="button" value="关灯" id="btn">
<script>
//1.获取按钮
//document.getElementByID("id属性值")根据ID属性获取元素
let btn = document.getElementById("btn")
//2.注册事件
//元素对象.事件属性=事件处理函数
// element.oninput(输入事件)=function(){}
btn.onclick = function () {
// body标签具有唯一性,可以直接通过点语法获取
document.body:获取文档中的body元素
let body = document.body
if (this.value == "关灯") {
body.style.backgroundColor = "black"
this.value = "开灯"
} else {
body.style.backgroundColor = "white"
this.value = "关灯"
}
}
// 元素样式操作
// element.style.样式属性名 =“样式属性值'
// backgroundColor 设置元素的背景颜色
</script>
4.元素内容操作案例1-真香
<div id="text">我王境泽就是饿死,死外边,从这里跳下去,也不会吃你们一点东西
</div>
<input type="button" value="王子变形记" id="btn" οnclick="changeText()">
<script>
function changeText(){
// var text= document.getElementById("text")
// console.log(text);
document.getElementById("text").innerHTML ="真香"
}
</script>
5.元素内容操作案例2-显示实时时间
<style>p {
font-size: 50px;
text-align: center;
}
span {
font-weight: bolder;
color: blue;
}</style>
<body>
<p>现在是<span id="clock"> 11:10:20</span></p>
<button οnclick="a()">按钮</button>
<script>
//这个函数对时间进行处理,如果的得到时间是一个个位数
//就进行一个十位数的补零操作
function time(t) {
if (t < 10)
t = "0" + t
return t
}
function a() {
//通过内置对象获取当前时间
let arr = new Date();
console.log(arr);
let arr3 = arr.getHours() + ":" + arr.getMinutes() + ":" + arr.getSeconds()
console.log(arr3);
let arr2 = time(arr.getHours()) + ":" + time(arr.getMinutes()) + ":" + time(arr.getSeconds());
console.log(arr2);
document.getElementById("clock").innerHTML = arr2
}
//定时器函数
//每隔1秒执行一a函数
setInterval(a, 1000)
</script>
6.元素样式操作案例1-改变盒子大小
<style>.box{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
let box=document.getElementById("box")
var i=0;
box.οnclick=function(){
++i
if(i%2){
this.style.width = '500px';
this.style.height = '500px';
this.innerHTML="大"
}else{
this.style.width = '100px';
this.style.height = '100px';
this.innerHTML="小"
}
}
</script>
7.元素样式操作案例2-单击按钮改变颜色
<body><button >按钮1</button>
<button >按钮2</button>
<button >按钮3</button>
<button >按钮4</button>
<button >按钮5</button>
<script>
var btns =document.getElementsByTagName("button")
console.log(btns);
for (var i=0; i<btns.length;i++){
btns[i].οnclick=changeColor
}
function changeColor(){
for (var j=0;j<btns.length;j++){
if(btns[j]==this){
console.log(this);
this.style.backgroundColor="pink"
}else{
btns[j].style.backgroundColor="grey"
}
}
}
</script>
</body>
8.元素样式操作案例3-一闪一闪亮晶晶
<div id="star"><img src="./star.jpg" alt="">
</div>
<script>
let star = document.querySelector("#star")
// onmouseover 鼠标移入事件
star.onmouseover = function () {
// display =“none" 元素被隐藏
star.style.display = "none"
}
// onmouseout 鼠标移出事件
star.onmouseout = function () {
star.style.display = "block"
}
</script>
9..元素样式操作案例4-我方了
<div class="box"></div><button class="btn">我圆了</button>
<button class="btn">我方了</button>
<script>
var box=document.getElementsByClassName("box")
//获取所有标签名为btn的元素,得到一个数组
var btn=document.getElementsByClassName("btn")
console.log(box);
console.log(btn);
//btn数组中,第0个元素是“我圆了“按钮
btn[0].οnclick=function(){
console.log(box[0].classList);//div盒子的类名是box
// element.classList.add("类名")添加类名
box[0].classList.add("changeBox")
console.log(box[0].classList);//div盒子的类名是box和changeBox
}
btn[1].οnclick= function(){
//element.classList.remove("类名")移除类名
box[0].classList.remove("changeBox")
}
</script>
10.元素样式操作案例5-标签栏切换效果的副本
<body><div class="tab-box">
<div class="tab-head">
<div class="tab-head-div current">标签一</div>
<div class="tab-head-div">标签二</div>
<div class="tab-head-div">标签三</div>
<div class="tab-head-div tab-head-r">标签四</div>
</div>
<div class="tab-body">
<div class="tab-body-div current"> 内容一 </div>
<div class="tab-body-div"> 内容二 </div>
<div class="tab-body-div"> 内容三 </div>
<div class="tab-body-div"> 内容四 </div>
</div>
</div>
<script>
//1获取元素
//1.1获取所有的标签元素
let tabs = document.getElementsByClassName("tab-head-div")
console.log(tabs);
//1.2获取所有的内容元素
let divs = document.getElementsByClassName("tab-body-div")
console.log(divs);
//2.1遍历标签数组元素对象
for (let i = 0; i < tabs.length; ++i) {
//2.2为每一个标签元素设置事件
//onmouseover鼠标移入事件
tabs[i].onmouseover = function () {
//this指向鼠示移入的标签元素
//console.log(i);
//2.3编辑内容数组元素对象
for (let j = 0; j < divs.length; ++j) {
console.log(i);
console.log(j);
//3.1如果正在点击第一个标签元素
if (tabs[j]==this) {
//3.2就给相应的数组添加current类名
//给标签添加current类名,元素增加白色背景
tabs[j].classList.add("current")
//给内容栏添加current类名,元素被显示
divs[j].classList.add("current")
}else{
tabs[j].classList.remove("current")
divs[j].classList.remove("current")
}
}
}
}
</script>
</body>
11.元素属性操作案例1-我哭了我装了
<img src="./我哭了.jpg" width="600px" height="400px" alt="" id="pic"><script>
//1.获取图片
let pic = document.getElementById("pic")
//2.设置事件
pic.onmouseover = function () {
this.src = "./我装的.jpg"
}
pic.onmouseout = function () {
this.src = "./我哭了.jpg"
}
</script>
12.元素属性操作案例2-404
<body><input type="text" value="请输入内容">
<button>搜索</button>
<script>
///1.获取元素
let input = document.querySelector("input")
let btn = document.querySelector("button")
//.2.注册事件
btn.onclick = function (){
input.value = "禁止访问"
btn.disabled=true
}
</script>
</body>
13.元素属性操作案例3-显示和隐藏密码
<div class="box"><input type="text" id="pwd">
<img src="./open.jpg" alt="" id="eye">
</div>
<script>
//1.获取元素
let pwd = document.getElementById("pwd")
let eye = document.getElementById("eye")
//2.注册事件
eye.onclick = function () {
if (pwd.type = -"text"){
console.log(111);
pws.type = "password"
eye.src="./close.jpg"
}else{
pwd.type = "text"
eye.src = "./open.png"
}
}
//3.完成事件处理函数
</script>
14.元素属性操作案例4-隔行变色plus
<body><ul>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
</ul>
<script>
let liList = document.querySelectorAll("li")
console.log(liList);
for (let i = 0; i < liList.length; i++) {
liList[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green"
//onmouseenter鼠标移入事件
liList[i].onmouseenter = function () {
this.setAttribute("bgc", this.style.backgroundColor)
console.log(this.getAttribute("bgc"));
//element.setAttribute("属性","值")设置属性
//element.getAttribute("属性","值") 获取属性
this.style.backgroundColor="red"
}
//onmouseleave鼠标移出事件
liList[i].οnmοuseleave=function(){
//取出自定义属性的值赋值给背景颜色
this.style.backgroundColor=this.getAttribute("bgc")
}
}
</script>
</body>
十.DOM (下)
1.节点操作案例1-删除水平线
JS部分
<title>删除水平线——删除节点</title>
</head>
<body>
<h1>JavaScript程序设计</h1>
<hr />
<h2>什么是JavaScript</h2>
<p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p>
<hr />
<h2>第一部分 JavaScript概述</h2>
<p>JavaScript的发展历史</p>
<input type="button" value="删除水平线" οnclick="delhr()" />
<script>
function delhr() {
let hrs = document.querySelectorAll("hr")
for (let i = 0; i < hrs.length; i++) {
var hr = hrs[i]
//node.parentNode获取父节点
console.log(hr.parentNode);
//node.previoussibling获取上一个兄弟节点
console.log(hr.previousSibling);
//node.previousElementsibling获取上一个兄弟节点元素
console.log(hr.previousElementSibling);
//node.previousSibling获取下个兄弟节点
console.log(hr.nextSibling);
//node.previousElementsibling获取下一个兄弟节点元素
console.log(hr.nextElementSibling);
//移除节点
//node.removeChild(child)
//node表示父节点,child表示node中需要被移除的字节点
hr.parentNode.removeChild(hr)
}
}
</script>
</body>
2.节点操作案例2-简易留言板
CSS部分
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
border: 3px solid seagreen;
width: 700px;
}
h1 {
text-align: center;
color: yellowgreen;
}
ul {
margin-top: 50px;
width: 500px;
height: 200px;
border: seagreen 3px dashed;
margin: 30px auto;
list-style: none;
}
li {
width: 400px;
padding: 5px;
background-color: #eee;
font-size: 14px;
margin: 15px auto;
}
li a {
float: right;
}
textarea {
width: 400px;
height: 50px;
border: 3px solid seagreen;
outline: none;
resize: none;
display: block;
margin: 20px auto 5px;
}
.sub {
display: block;
background-color: seagreen;
color: seashell;
width: 200px;
height: 30px;
margin: 10px auto;
}
.remove {
float: right;
}
JS部分
<body>
<h1>留言板</h1>
<ul></ul>
<textarea name="" id="" placeholder="请输入你的留言"></textarea>
<button class="sub">发布 </button>
<script>
let btn = document.querySelector(".sub")
let text = document.querySelector("textarea")
let ul = document.querySelector("ul")
btn.onclick = function () {
if (text.value == "") {
alert("你没有输入任何内容")
return false
} else {
//创建节点
//document.createElement("标签名
var li = document.createElement("li")
li.innerHTML = text.value
//5.实现删除功能
//5.1 创建删除按钮节点
let button = document.createElement("button")
//5.2 添加节点
// appendChild() 将一个节点添加到父节点的所有子节点的末尾
li.appendChild(button)
//5.3为按钮增加文字
button.innerHTML = "删除"
//5.4 为按钮设置类名,从而增加右浮动的样式
button.className = "remove"
//5.5实现按钮的删除功能
button.onclick = function () {
//点击钮,整个li项被删除
//node,removeChild(child)
//node表示父节点,child表示node中需要被移除的子节点
ul.removeChild(this.parentNode)
}
// 3.2漆加节点
// insertBefore()将一个节点添加到父节点的指定节点的前面
// 第一个参数要添加的节点
// 第二个参数父节点中的指定的子节点
ul.insertBefore(li, ul.children[0])
//4.将文本框内容清空
text.value = ""
}
}
</script>
</body>
3.常用事件案例-输入内容不能为空
<style>.box{
display: flex;
flex-direction: column;
}
.input{
width: 100px;
}
button{
width: 100px;
margin-top: 5px;
}
</style>
<body>
<div class="box"></div>
用户名:<input type="text" id="user" class="input">
密 码:<input type="password" id="pwd" class="input">
<button>登录</button>
</div>
<script>
//onfocus当获得焦点时触发
//onblur当失去焦点时触发
document.getElementById("user").οnblur=blur
document.getElementById("pwd").οnblur=blur
function blur(){
if(this.value===""){
alert("请注意:输入的内容不能为空")
}
}
</script>
</body>
4.常用事件案例2-下拉菜单
CSS部分
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 50px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
border: 1px solid black;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
JS部分
<link rel="stylesheet" href="./04-常用事件案例2-下拉菜单.css">
</head>
<body>
<body>
<nav class="nav">
<li>
<a href=""> 微博</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">留言板</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">电话</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">邮箱</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<script>
let a = document.getElementsByTagName("a")
let ul = document.getElementsByTagName("ul")
for (var i = 0; i < a.length; i++) {
a[i].onmouseover = function () {
let arr = this.parentNode.getElementsByTagName("ul")
arr[0].style.display = "block"
}
a[i].onmouseout = function () {
let arr1 = this.parentNode.getElementsByTagName("ul")
arr1[0].style.display = "none"
}
}
</script>
</nav>
</body>