javascript基础、web API（1）

今天学前端了吗？

已于 2023-07-06 22:38:10 修改

阅读量234

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-07-04 18:05:17 首次发布

本文链接：https://blog.csdn.net/qq_50883182/article/details/123462656

版权

文章目录

一、js基础
二、进阶js、API
总结

参考教程；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
评论
javascript基础、web API（1）

文章目录一、js二、基本使用1.弹窗2.总结一、js学后端的必须会js二、基本使用1.弹窗写js两种方法：①html内写：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <scrip
复制链接

扫一扫