javascript基础、web API(1)

文章目录


参考教程;https://www.bilibili.com/video/BV1ux411d75J

一、js基础

1、概念

1、学后端的必须会js
2、javaScript是一种运行在客户端的脚本语言,不需要编译,运行过程中由js解释器逐行来进行解释并执行。
javaScript解析器在运行javaScript代码的时候分为两步:预解析和代码执行。
在这里插入图片描述

3、现在也可以基于node.js技术进行服务器端编程
4、浏览器分成两个部分:渲染引擎和js引擎
5、js组成
在这里插入图片描述
6、注释快捷键
单行注释 ctrl+/
多行注释 shift+alt+a

2、基本使用

2.1弹窗

写js两种方法:

html内写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--script写的位置可以在head内,也可以在body内的最后-->
    <script>
        alert('hello world');
    </script>
</head>

<body>


<!--<script>
        alert('hello world');
    </script>
    -->
</body>
</html>


html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/js.js"></script>
</head>
<body>

</body>
</html>

js:

alert('hello world')

两个效果一样:
在这里插入图片描述

2.2基本语法

2.2.1输入输出三种方式

alert
console.log()
prompt(‘’);//浏览器弹出输入框,用户可以输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // javascript严格区分大小写
        // 1.定义变量 变量类型 变量名 = 变量值;
        var num = 1;
        alert(num);
        // 2.条件控制
        if(2>1){
            alert('true');
        }
        /* 在浏览器控制台打印变量,相当于java的system.out.println()
        console.log(num)
        */
    </script>
</head>
<body>

</body>
</html>

2.2.2数字型Number

在这里插入图片描述

2.2.3字符串转义符

在这里插入图片描述

2.2.4数据转换

1、转换成字符型
在这里插入图片描述
2、转换成数字型
在这里插入图片描述
3、转换成布尔型、
在这里插入图片描述

2.3浏览器控制台使用

在这里插入图片描述
蓝色:数字型的
黑色:字符型的
深蓝:布尔型
灰色:undefined,null

2.4运算符

1)算术运算符:+,-,*,/,%
2)比较运算符:>,<,=,>=,<=,, != ,=,!==
3)逻辑运算符:逻辑与,逻辑或,逻辑非,短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续计算运算右边的表达式。

console.log(123&&456);
//结果为456


console.log(0||345||3+2);
//结果为345
//逻辑中断影响
var num=0;
console.log(123||num++);//123
console.log(num);//0

4)赋值运算符
=,+=,-=,*=,/=,%=
5)运算符优先级
在这里插入图片描述

2.5流程控制分支

顺序结构
分支结构(if 、else if 、else、三元表达式:条件表达式?表达式1:表达式2、switch case)
switch case中的匹配值是全等,必须值和数据类型一致才可以,当case里面没有break,则不会退出switch,是继续执行下一个case
循环结构

2.6断点调试

F12开发模式,Sources查看并进行断点,
在这里插入图片描述
点击右边的向下箭头(F11),可以发现断点后的执行情况,并在Console打印出对应已执行代码的结果

2.7数组创建

var a = new Array();
var a = [];
修改数组的长度有两种方法:
1)

var arr = ['red','green','blue'];
arr.length=5;
//这时arr[3],arr[4]值是undefined
var arr1 = ['red','green','r'];
arr1[3] = 'pink';
arr1[4] = 'hotpink';
arr1[5] = 'yellow';

2.8函数实参形参

实参不确定,这个时候函数形参怎么写呢?
使用arguments

function fn(){
    console.log(arguments);
}
fn(1,2,3);

打印在控制台的数据是:
在这里插入图片描述

2.9生成对象的三种方法

//对象3种创建方法
//1)var obj={};
//2)var obj = new Object();
/* obj.username='ii';
obj.sayhi= function(){
3)构造函数封装对象

} */
var obj={
    username:'aa',
    age:18,
    sex:'nan',
    sayhi:function(){
        console.log('hi');
    }
}
obj.sayhi();
console.log(obj.username);
console.log(obj['username']);
//构造函数
function Star(uname,age,sex){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(){
        console.log('111');
    }
}
var ldh = new Star('yhx',18,'nan');//调用函数返回的是对象
ldh.sing();

遍历对象

for(var k in ldh){
    console.log(ldh[k]);
}

对象分三种:自定义对象,内置对象,浏览器对象
内置对象是js语言自带的一些对象,供开发者使用,并且提供了一些必要功能属性,使用MDN文档
对对象进行增删改查,其中删是使用delete方法

delete 对象名.属性名

2.10Date时间戳

①倒计时案例

在这里插入图片描述
在这里插入图片描述
为了想让倒计时效果在页面上显示出来,需要通过document.querSelector('#hour)…,来获取时分秒对应的盒子,再将算出来的时分秒通过innerHtml写进去盒子里面,将写的总代码封装在getCounTime函数中,在使用定时器。

setInterval(getCountTime,1000)

但是页面打开时,会出出现页面一加载,倒计时会出现空白,这时在使用定时器之前先调用一下getCounTime

2.11数组

常用方法:push、pop、unshift、shift、sort、reserves、indexOf、lastIndexOf,toString、join(‘分隔符’)、
在这里插入图片描述
注意数组的排序

var a = [1,2,3,45,2,43,56,10];
console.log(a.sort());

在这里插入图片描述
发现排序是按照从左往右一位一位的比较的,所以要想正确排序,需要更改代码为“

console.log(a.sort(
    /* function(a,b){
        return a-b;//从笑到大
    } */
    function(a,b){
        return b-a;//从大到小
    } 
));

2.12字符串

indexOf、lastIndexOf、charAt、charCodeAt、contact、截取字符串(substr、slice、substring)、replace(只替换一个)、split、toUpperCase、toLowerCase

二、进阶js、API

不写分号

1、输入输出语句

//输入输出
document.write('<h1>yhx i love you</h1>')
console.log('yhx')
prompt('请输入生日')

2、var,let

var
1)可以先使用在声明
2)声明过的变量可以重复声明
3)变量提升,全局变量、没有块级作用域等

3、模板字符串

let age=18
document.write(`我今年${age}岁了`)

4、隐式转换

在这里插入图片描述

5、函数

5.1具名函数,

5.2匿名函数

匿名函数:

let n = function(){
......
}

立即执行函数(分号必须写

(function(x,y){
console.log(x+y)
})(4,6);

(function(x,y){

}(6,4));

6、准换为布尔型

``、0、undefined、null、false、NaN转换为布尔值后都是false,其余则为true

7、DOM、BOM

7.1DOM

1)概念

操作页面内容
DOM树:
1)以树状结构直观地表现出来,称之文档树、DOM树。
2)文档树直观地体现了标签与标签之间地关系
在这里插入图片描述

2)获取DOM元素

<1>根据css选择器,选择匹配的第一个元素
div,#nav(id的)
ul li:first-child等,没有匹配成功返回Null

document.querySelector('div')

<2>选择所有的指定css选择器

document.querySelectorAll('ul li')

获取的值是一个伪数组,不能直接对其样式修改,只能通过for遍历的方式一次给里面的元素做修改,且伪数组没有pop()、push()功能,

3)操作元素内容
//修改文字内容,innerText不解析标签,修改成<strong>111</strong>,并不会改变样式
对象.innerText 属性
//直接 对象.innerText 是打印出来了,没修改

//解析标签
对象.innerHTML 属性
4)修改样式

<1>通过style修改样式
<2>通过className修改样式,当想要原class还想要新加的样式,需要通过类似:原类名 新加类名 的形式赋值给className
在这里插入图片描述
<3>追加以前的类名

获取的元素对象.classList.add('新加的类名')

删除类

获取的元素对象.classList.remove('需要删除的类名')

切换类(有就删掉,没有就加上)

获取的元素对象.classList.toggle('需要判断的类名')

轮播图案例

5)属性

标准属性
自定义属性

data-自定义属性

在这里插入图片描述

6)定时器

间歇函数
1、开启、关闭定时器
定时器返回的是一个id数字,即第几个定时器

//setInterval(函数,间隔时间ms)
let n = setInterval(function(){
console.log('11111')
},1000)
clearInterval(n)
7)事件监听

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
事件对象:(有事件触发时的相关信息,在事件绑定的回调函数的第一个参数就是事件对象)

元素.addEventListener('click',function(e){})

常见的属性:

e.key//这样就知道按了什么键
8)评论案例

发布完评论后,文本域清空
当发布的评论最左边和最右边有空格时,使用str.trim()去除空格,如果输入的只有空格,点击发布也要恢复初始输入的状态,有placeholder,统计字数赋值为0/200字

9)环境对象

this代表当前函数运行时所处的环境。
非严格模式下,普通函数this指向window
事件监听指向调用者
箭头函数没有this
this能改变指向的方向。

10)回调函数

A作为参数传递给函数B,A称为回调函数
如定时器函数setInterval,addEventListener

11)tab栏切换
.activee{
 color: pink;    
 }
.atw{
display: flex;
margin-left:40px
}
.pw{
 width: 350px;
 height: 350px;
 background-color: aliceblue;
 border-radius: 10px;
}
      
.pw .item{
      display: none;
 }
.pw .item.activeee{
      display: block;
 }
 
   
    
  
<div style="width: 400px;height: 400px;border: 1px solid gray;box-shadow: 5px 5px rgb(240, 237, 237);border-radius: 10px;">
      <h3 style="margin-left: 10px;">每日特价</h3>
      <ul class="atw">
        <li style="list-style: none;margin-left:40px"><a href="" class="activee">11</a></li>
        <li style="list-style: none;margin-left:40px"><a href="">22</a></li>
        <li style="list-style: none;margin-left:40px"><a href="">33</a></li>
      </ul>
     <div class="pw">
        <div class="item activeee"><img src="images/1.jpg"></div>
        <div class="item"><img src="images/2.jpg"></div>
        <div class="item"><img src="images/3.jpg"></div>
     </div>
let lii = document.querySelectorAll('.atw li a')

for(let i =0;i<lii.length;i++){

    lii[i].addEventListener('mouseenter',function(){
   console.log('11');
    document.querySelector('.atw .activee').classList.remove('activee')
    this.classList.add('activee')
    //盒子
    document.querySelector('.pw .activeee').classList.remove('activeee')
    console.log(document.querySelector('.pw'));
    document.querySelector(`.pw .item:nth-child(${i+1})`).classList.add('activeee')
    //img.classList.add('activee')
    let t = document.querySelector(`.pw .item:nth-child(${i+1})`)
    console.log(t);
    })

}

12)表单全选反选

查看小复选框是否都全部选了,使用css复选框选择器input:checked来检查小复选框勾选的个数,等于小复选框的总数,则勾上全选。

13)事件流

捕获阶段、冒泡阶段

①事件捕获

在这里插入图片描述

②事件冒泡

在这里插入图片描述

③阻止冒泡

在这里插入图片描述
改方法阻止事件流动传播,不光冒泡阶段,捕获阶段也有效,使用事件对象
在这里插入图片描述

④阻止默认行为:

如不让你提交,不让你跳转

e.preventDefault()

在这里插入图片描述

⑤解绑事件:

①将函数赋值为Null

btn.onclick=null

②使用addEventListener中的匿名function无法解绑,必须使用下列的注册格式,才能使用removeEventListener()解绑事件

fn = function(){}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)

在这里插入图片描述

14)事件委托

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

15)其他事件
①页面加载事件
//等待所有资源加载完才会执行
window.addEventLisener('load',function(){})
//无需等待样式表、图像等完全加载,监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded',function(){
//const btn = docu
})
②元素滚动事件

在这里插入图片描述
想要找到html标签、

//document.documentElement
window.addEventListener('srcoll',function(){
const n = document.documentElement.scrollTop
if(n>=100){
div.style.display = 'block'
}else{
div.style.display = 'none'
}
}

在这里插入图片描述
在这里插入图片描述

③页面尺寸事件

在这里插入图片描述
在这里插入图片描述

16)元素尺寸与位置

在这里插入图片描述
当需要处理的盒子的所有父DOM没有定位,如position:relaive时,就可获得它距离窗口文档的最上方/最左方的距离
在这里插入图片描述
元素尺寸与位置:
相对于可视区的位置
在这里插入图片描述
在这里插入图片描述
电梯导航案例:
在这里插入图片描述

想要页面有滚动

html{
scroll-behavior:smooth;
}

在这里插入图片描述

17)节点操作
①查找DOM节点
<1>查找父节点

已知孩子节点
找父节点

baby.parentNode

找爷爷节点

baby.parentNode.parentNode

如果找不到最近一级的父节点,返回Null
例子,关闭广告
在这里插入图片描述

<2>查找子节点
childNodes//获得所有子节点,包括文本节点(空格、换行)、注释节点等
父元素.children//仅获得所有元素节点,返回的还是一个伪数组
<3>兄弟节点

在这里插入图片描述

②新增节点

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
渲染列表:
在这里插入图片描述
克隆节点:
在这里插入图片描述

③删除节点

在这里插入图片描述

18)M端事件

在这里插入图片描述

19)js插件

https://www.swiper.com…cn/
https://www.swiper.com.cn/demo/index.html
https://www.swiper.com.cn/usage/index.html
api:https://www.swiper.com.cn/api/index.html
注意:多个swiper同时使用的时候,类名需要注意区分

20)学生信息表案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.2window对象

7.2.1BOM

在这里插入图片描述

7.2.2定时器-延时函数

在这里插入图片描述
在这里插入图片描述

7.2.3js执行机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.2.4location对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一般单页面应用会出现,a标签中的href就是会使location的hash结果变。
刷新网页:
f5
ctrl+f5
在这里插入图片描述

①5s后跳转页面

在这里插入图片描述

7.2.5navigator对象

在这里插入图片描述
跳转移动端页面–
在这里插入图片描述

7.2.6histroy对象

在这里插入图片描述
在这里插入图片描述

7.3本地存储

7.3.1本地存储介绍

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
例子,增删改查
在这里插入图片描述
本地存储只能存储字符串型
localStorage永久存储在本地,除非手动删除,否则关闭页面也会存在

7.3.2本地存储分类

在这里插入图片描述

7.3.3存储复杂数据类型

在这里插入图片描述

7.4综合案例

数组map和join方法
在这里插入图片描述
在这里插入图片描述

学生就业统计表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 //学生信息表
        const form = document.querySelector('form')
        const uname = document.querySelector('.uname')
        const age = document.querySelector('.age')
        const gender = document.querySelector('.gender')
        const salary = document.querySelector('.salary')
        const city = document.querySelector('.city')
        const tbody = document.querySelector('tbody')
        const items = document.querySelectorAll('[name]')
       // localStorage.setItem('data',JSON.stringify(children))
        arr = JSON.parse(localStorage.getItem('data'))||[]
        render()
       // console.log(info);
        form.addEventListener('submit',function(e){
            e.preventDefault()
            //第一种方法
            /* for(let i =0;i<items.length;i++){
                if(items[i].value===''){
                    return alert('输入内容不能为空')
                }
            } */
            //第二种方法,非空判断
            if(!uname.value||!age.value||!salary.value){
                return alert('输入内容不能为空')
            }
            arr.push(
            {
            xuehao:arr.length+1,
            uname:uname.value,
            age:age.value,
            gender:gender.value,
            salary:salary.value,
            city:city.value,
            caozuo:'删除'
            }
            )
            render()
            this.reset()
            localStorage.setItem('data',JSON.stringify(arr))
          
        })
     //渲染函数
       function render(){
            const trArr = arr.map(function(ele,index){
            return `
            <tr>
                <td>${index+1}</td>
                <td>${ele.uname}</td>
                <td>${ele.age}</td>
                <td>${ele.gender}</td>
                <td>${ele.salary}</td>
                <td>${ele.city}</td>
                <td><a href="javascript:" data-id=${index}>删除</a></td>
            </tr>
            `
        })
        
        tbody.innerHTML = trArr.join('')
       }
      
        

8、正则表达式

8.1语法

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

8.2元字符

在这里插入图片描述

①边界符

在这里插入图片描述

    console.log('字符串正则表达式匹配');
    console.log(/^二哈/.test('二严'));//false
    console.log(/^二哈/.test('二哈'));//true
    console.log(/^哈/.test('哈哈'));//true
    console.log(/^哈$/.test('哈哈'));//false
    console.log(/^哈$/.test('哈'));//true
②量词

在这里插入图片描述

 // 量词
        console.log('量词');
        console.log(/^哈*$/.test('哈哈哈哈'));//true
        console.log(/^哈*$/.test(''));//true
        console.log(/^哈+$/.test('哈哈哈哈'));//true
        console.log(/^哈+$/.test(''));//false
        console.log(/^哈{4}$/.test('哈哈哈哈'));//true
        console.log(/^哈{4}$/.test('哈哈哈哈哈'));//false
        console.log(/^哈{4,}$/.test('哈哈哈'));//false
        console.log(/^哈{4,}$/.test('哈哈哈哈哈'));//true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'));//false
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈'));//true
③字符类

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
(2).匹配除换行符之外的任何单个字符
(3)
在这里插入图片描述

④用户名验证案例

在这里插入图片描述

在这里插入图片描述

8.3修饰符

在这里插入图片描述
在这里插入图片描述

const str = 'java是一门编程语言,学完JAVA工资很高java'
const re = str.replace(/java/g,'前端')
console.log('re----'+re)//re----前端是一门编程语言,学完JAVA工资很高前端
const re2 = str.replace(/java/gi,'前端')
console.log('re2-----'+re)//re2-----前端是一门编程语言,学完JAVA工资很高前端

总结

综合案例在续篇

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天学前端了吗?

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值