第九周总结

最新推荐文章于 2022-08-19 20:23:30 发布
最新推荐文章于 2022-08-19 20:23:30 发布
阅读量75 收藏
点赞数
分类专栏： 第九周总结 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43572321/article/details/111811250
版权

JS概述

​ javaScript简称JS，是一门运行在客户端浏览器的脚本语言（无法独立运行的程序设计语言）；是一门直译型语言（不需要编译），是一门客户端语言；

​ Javascript同时也是一门弱类型的程序语句，以及基于事件驱动的语言。

关于强类型和弱类型：

java：

int i = 10;
String s = "java"
User u = new User();    

i = true; //编译错误

注意:java中任何变变量再使用前需要声明其数据类型，任何的变量一旦确定其类型，则只能赋予对应类型的值，运行期间不能修改为其他类型的数据，因此Java是一门强类型语言，即不是一门动态语言

javascript：

i = 10;

i = "js"
i = true;
i = new Array();

//variable变量
var j = 100;
var b = true;
var s = 3.14;
var str = "javascript";

javascript由于没有编译的过程，因此任何变量的数据类型确定是在运行期间动态绑定，并且还能再运行时修改其数据类型，因此，javascript是一门弱类型语言，即动态语言。

通过以上案例不难看出：

java是一门服务端语言（经过编译后，直接执行）

javascript是一门客户端语言（不要编译，运行期间动态绑定，效率相对较低，不适合进行服务器开发）

JS使用场景

javascript一般用于对网页特效以及表单验证等涉及到网页动态效果的功能,例如:

  • 下拉菜单
  • 回到顶部
  • 楼层导航
  • 轮播图
  • 表单验证

基础语法

HelloJS

javascript一般在html页面中进行编写，通常位于一对<script>之间

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

<script>
    // System.out.println()
    console.log("hello js!");
</script>
</body>
</html>

注意:

<script>标签可以在html的任意位置进行编写，常见的区域主要出现在以下两个位置

  • head标签对之间
  • body标签结尾处（推荐）

常见引入方式

在html中使用javascript包含以下三种方式：

  1. 直接在html页面中使用内联<script>标签编写

    <html>
    <head>
    </head>
    <body>
        <script>
            .....
        </script>        
    </body>
</html>

  2. 引入外部的脚本文件(js文件)

    <script src="js/js01.js"></script>

    js文件(js01.js)

    // System.out.println()
console.log("hello js!");
i = 10;
i = "helloworld";
console.log(i)

  3. 直接在html元素中使用内嵌的方式使用

    <a href="javascript:alert('想啥呢，老铁！！')">点我看pain</a>

关于href和src区别？

<link rel="stylesheet" href="css/index.css">
<a href="http://www.baidu.com">百度一下，你就蒙蔽</a>

<img src="img/logo.png">
<audio src="mp3/xiaopingguo.mp3"></audio>
<script src="js/index.js"></script>

href和src都用于关联外部的资源文件，区别在于href所关联的资源一旦执行到此处，则同步加载

src所关联的资源，一旦执行到此处，则浏览器停止对页面进行渲染，先读取src关联的资源，并将资源替换到当前位置

数据类型

虽然说js是一门弱类型语言，但是不代表不区分数据类型，js中也支持很多不同类型的数据，js的主要数据类型包含以下几类:

  • 数值型（包含浮点型）
  • 字符串型
  • 布尔型
  • 数组
  • 对象
  • null
  • undefined
数值类型（number）

javascript中对于任何的数值都是使用的number的数据类型表示，没有所谓浮点型和整型之分：

var i = 10;
console.log(typeof i);//number
var f = 3.14
console.log(typeof f);//number

typeof是一个js中的一个运算符，判断指定变量是什么类型

字符串类型（string）

javascript中对于所有的字符字符串统一使用string来表示，即没有字符和字符串之分，在js中可以使用单引号或者双引号表示字符串类型：

var s = "中";
s = '中国';
console.log(typeof s);//string
布尔类型（boolean）

javascript中也存在boolean类型，取值也只能是true和false,但是js中可以将任何的变量转换为boolean类型

var b = false;
console.log(typeof b); //boolean
var a = 0;
console.log(new Boolean(a));//false
对象类型（object）

javascript中的对象有多种存在形式，其中一种比较常见的显示方式为类Java中map结构（键值对），在js中称之为json对象

//对象(JSON对象)
//java: People p = new People()
var p = {
    id:1,
    name:"张麻子",
    sex:"男",
    age:18,
    marry:false,
    group:{
        gid:1001,
        name:"vip1"
    },
    fun:['java','c','php','python']
};
console.log(typeof p);
console.log(p.name);

以上javascript对象可以使用如下的Java类描述:

class People{
    private int id;
    private String name;
    private String sex;
    private int age;
    private boolean marry;
    private String[] fun;
    private Group group;
}

class Group{
    private int gid;
    private String name;
}
数组类型（object-引用类型）

javascript中的数组是以对象的形式存在，是一种引用类型

var arr = [1,2,3,4,5,6];
arr = new Array(1,2,3,4,5);
console.log(typeof  arr); // object
console.log(arr[0]);
//二维数组
arr = [[1,2],[3,4],[5,6,7,8]];
arr = new Array([1,2],[3,4],[5,6,7,8]);
console.log(arr[0][1]);
null类型（object）

表示一个空对象，在内存申请了空间，但是没有为该申请的空间赋值，通常这种对象使用null表示

var n = null;
console.log(typeof n);//object
console.log(new Boolean(n));//false
undefined

表示未申明的类型，与null类似，但是undefined并未申请任何空间。

运算符

不同的数据类型之间必然会存在运算的操作，javascript中支持大量的运算符，javascript中的运算符主要包含以下几类：

  • 算术运算符
  • 关系运算
  • 布尔逻辑运算
  • 位运算
  • 三目运算
/*算术运算*/
var i = 5;
var j = 10;
console.log(i / j); // 0.5 因为js中没有整型浮点之分，因此算术运算时，直接获取的精确值
console.log(i++);   // 5
console.log(i);     //6
console.log(++j);   //11

/*关系运算*/
i = 10;
j = '10';
//比较两个变量是否是相同，会进行类型转换
console.log(i == j);// true
//比较两个变量是否相等，不会进行类型转换（会判断类型是否相等）
console.log(i === j);// false

var p1 = {id:1,name:"jack"};
var p2 = {id:1,name:"jack"};
console.log(p1 == p2); //false

/*位运算*/
i = 8;
console.log(i << 1); // 16

/*三目运算*/
i = 5;
j = 10;
console.log( i > j ? i : j); // 10

流程控制

分支语句
if

if语句的语法与Java基本类似，唯一不同的是Java中的if条件必须是一个布尔类型的表达式，但是js中if中可以编写任意类型的表达式，甚至是一个任何类型的变量，因为js中可以将任何的变量转换为boolean类型，例如:

var i = 0;
if(i){
    console.log('大爷，来玩啊！');
}else{
    console.log('三年高考，五年模拟来一套！');
}

i虽然是一个number类型，但是js引擎会自动将该变量转换为Boolean;js中具体会将哪些数值转为false,哪些数值转换为true?

  1. 对于数值类型（number）,任何的非0的值都是true
  2. null和undefined转换为false
  3. 只要是存在的对象都是true
  4. 空字符串转换为false
switch
var y = 2020;
var m = 2;
switch(m){
    case 4:
    case 6:
    case 9:
    case 11:
        console.log(30);
        break;
    case 2:
        if(y % 4 == 0 && y % 100 != 0 || y % 400 == 0){
            console.log(29);
        }else{
            console.log(28);
        }
        break;
    default:
        console.log(31);
        break;
}
循环语句

javascript中支持的循环语句主要包含两种

  • for
  • while
//普通for循环
for (var i = 0; i < 10; i++) {
    document.write(i+"<br>");
}

//while循环
var i = 10;
while(i<20){
    document.write(i+"&nbsp;")
        i++;
}

//do...while循环
do{
    document.write(i+"&nbsp;")
        i++;
}while(i< 30);

//for...in循环
var arr = ['jack','rose','lilei','hanmeimei','lily','lucy'];
for(var n in arr){
    console.log(arr[n]); // 在对数组操作时，n表示的是元素的索引，而非元素本身
}

var user = {
    id:1,
    name:'softeem',
    age:15,
    birth:'2006-03-01'
}
for(var n in user){
    console.log(user[n]); // 在对对象进行操作时，n表示的是对象中的属性，如果需要去除属性值，语法为 引用变量[n]
}
console.log(user.name);     //softeem
console.log(user['name']);  //softeem

day42 - JavaScript(二)

文章目录

函数(方法)

javascript中的函数，类似java中的方法，可以通过将一些可能需要反复执行的代码封装到一个代码片段中，该代码片段就称之为函数。javascript中的函数语法与java存在较大的差异，语法结构如下：

function 函数名称(参数列表){
    //执行体
}

案例:

/**
         * js的函数无论何时都不需要声明返回值类型
         * 申明参数时无需也不能指定参数类型，只需要设置参数名即可
         * @param msg
         */
function print(msg){
    console.log(msg);
}

函数定义

javascript中的函数分类与java中基本一致，也包含四种类型函数：

  1. 有参数有返回值
  2. 有参数无返回值
  3. 无参数无返回值
  4. 无参数有返回值
//有参数无返回值
function print(msg){
    console.log(msg);
}

//无参有返回值函数
function msg(){
    return "helloworld";
}

//有参数有返回值函数
function max(a,b){
    return a > b ? a : b;
}

//无参数无返回值函数
function show(){
    console.log("this is function");
}

函数调用

与java不同的是，js中的函数调用，不需要显式的通过对象调用，只需要在script语句块中直接调用即可，或者通过html元素中相关事件属性进行调用

  1. 调用方式一
function show(){
    console.log("this is function");
}
//调用
show();
  1. 调用方式二
<button onclick="show()">点我试试</button>

<a href="javascript:print('葫芦娃大战奥特曼')">点我看片</a>

arguments

javascript函数中参数可以有任意多个，并且在调用时，可以传入任意个参数，通过arguments对象可以获取实际调用函数时传入的参数个数。

function add(a,b,c,d,e){
    //获取当前方法执行时实际传入的参数个数
    var len = arguments.length;
    if(len === 1){
        console.log(a);
    }else if(len === 2){
        console.log(a + b);
    }else if(len === 3){
        console.log(a + b + c);
    }else if(len === 4){
        console.log(a + b + c + d);
    }else if(len >= 5){
        console.log(a + b + c + d + e);
    }
}
add(10,20,30,40,50,60,70,80);

匿名函数&函数自调用

//将一个匿名函数存储到一个变量中，（将匿名函数改成有名字的函数）
var add = function(a,b){
    console.log(a + b);
}
add(1,2);

//自调用函数
var value =  (function(a,b){
    var r = a > b ? a : b;
    console.log('匿名函数被执行');
    return r;
})(10,20);

console.log(value);

*闭包

//闭包即在一个函数内部定义的函数
//闭包提供了在函数外部对函数内部局部变量的访问能力
function counter(){
    var count = 0;
    //闭包
    return {
        increment:function(){
            count++;
        },
        decrement:function(){
            count--;
        },
        count:function(){
            return count;
        }
    }
}

var c = counter();
c.increment();
c.increment();
console.log(c.count()); // 2
var c = counter();
c.increment();
console.log(c.count()); // 1

闭包使用实例：

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

        <ul id="menu">
            <li>菜单项01</li>
            <li>菜单项02</li>
            <li>菜单项03</li>
            <li>菜单项04</li>
            <li>菜单项05</li>
        </ul>

        <script>
            //根据标签名获取所有的标签所表示的元素对象
            var list = document.getElementsByTagName('li');

            //每次点击列表项时输出的都是5（出现变量污染）
            for(var i = 0;i<list.length;i++){
                list[i].onclick=function(){
                    console.log(i);
                }
            }
            //解决方法一：闭包
            //遍历列表项
            // for(var i = 0; i < list.length;i++){
            //     list[i].οnclick=(function(value){
            //		   //使用闭包缓存临时变量	
            //         return function(){
            //            console.log(`您点击的是第${value}项`);
            //         }
            //     })(i);
            // }
			
            //解决方法二：let关键字
            //使用let能够有效的防止变量污染
            for(let i = 0;i<list.length;i++){
                list[i].onclick=function(){
                    console.log(i);
                }
            }

        </script>
    </body>
</html>

let变量(ES6)

(function a(){
    //全局变量(js中变量在使用前如未做任何声明，一律称之为全局变量)
    i = 10;
    var n = 20;
})();

console.log(i);
// console.log(n);//局部变量无法调用 Uncaught ReferenceError: j is not defined at...


if(i >= 10){
    //es6新增，用于防止变量污染存在的一个关键字（let声明任何变量只能在声明区域使用）
    let j = 20;
    //非函数的语句块无法形成作用域，因此该区域定义的变量，在外部可以被调用(变量污染)
    var k = 20;
}
console.log(k);
console.log(j); // Uncaught ReferenceError: j is not defined at...

事件

​ js是一门基于事件驱动的语言，多数时候的js代码执行不是主动执行，可能是由于html页面中某些元素，或者浏览器的某些动作导致js的执行，而触发这些动作的操作称之为事件，触发动作执行的目标称之为事件源。

事件分类

js中的事件分为以下几类：

  1. 窗口事件
  2. 鼠标事件
  3. 键盘事件
  4. 文档事件
  5. 对象事件（音频，视频等）

  • 窗口事件

  • 事件名描述
    onload当窗体内容被加载时触发
    onunload当窗体中内容卸载时触发
    onbeforeunload当窗体内容被卸载之前触发
    onresize当窗体大小被改变时触发
    onscroll当窗口内部发生滚动时触发

  • 鼠标事件

    事件名描述
    onclick当鼠标单击时触发
    ondblclick当鼠标双击时触发
    onmouseover当鼠标悬停到元素上时触发
    onmouseout当输入从元素中移出时触发
    onmouseenter当鼠标进入时触发
    onmouseleave当鼠标离开时触发
    onmousedown当鼠标按下时触发
    onmouseup当鼠标抬起时触发

  • 键盘事件

    事件名描述
    onkeydown当键盘按键被按下时触发
    onkeyup当键盘按键抬起触发
    onkeypress当键盘按键被按压时触发

  • 表单事件

    事件名描述
    onchange当控件内容改变时触发
    onselect当控件内容被选中时触发
    onblur当控件失去焦点时触发
    onfocus当控件获得焦点时触发
    onreset表单重置时触发
    onsubmit表单提交时触发

事件绑定

javascript事件需要为指定的触发源进行绑定，js事件绑定的方式有如下几种：

  • 直接在html元素中通过事件名称绑定

     <button onclick="backTop()" onmouseover="enter(this)" onmouseout="out(this)">回到顶部</button>

  • 在js中获取元素调用元素的事件名

    document.getElementById('box').onmousemove=function(e){
    console.log(e.x+"----"+e.y);
}

//窗口滚动事件
window.onscroll=function(e){
    //获取与浏览器顶部的距离（px）
    var t = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条滚动'+t);
}

  • 获取元素对象之后使用addEventListener()方法绑定

    //为控件添加事件监听(内容选中事件)
document.getElementById('uname').addEventListener('select',function(e){
    console.log(this.value);
})

    //为控件绑定change事件
    document.getElementById('city').addEventListener('change',function(e){
    console.log('选择的城市是:' + this.value);
})

    //为表单控件绑定重置事件
    document.getElementById('form1').addEventListener('reset',function(){
    alert('表单已重置')
})

事件解绑

js中事件既可以通过addEventListener进行绑定，同时也可以通过removeEventListener进行解绑：

//绑定事件
document.getElementById('msg').addEventListener('blur',value);

function value(){
    console.log(this.value);
}

document.getElementById('btn').addEventListener('click',function(){
    //移除指定对象的相关事件触发的动作
    document.getElementById('msg').removeEventListener('blur',value);
})

事件流

由于网页中可触发事件的元素众多，因此可能会存在在一个元素上触发事件时同时也在另一个元素上触发，针对以上事件流有两家浏览器厂商分别制定了两套标准:

  1. 以IE为标准的事件冒泡（默认）
  2. 以网景为标准的事件捕获
事件冒泡&事件捕获

事件冒泡是一个由内向外的传播过程，当触发最内层的元素事件时，逐级向外进行传播;

事件捕获是一个由外向内的传播过程，当触发内层元素事件时，实际是先执行最外层元素事件，逐级向内传播；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            box-sizing: border-box;
        }
        .d1{
            padding:50px;
            width: 400px;
            height: 400px;
            background: #f00;
        }
        .d2{
            padding:50px;
            width: 300px;
            height: 300px;
            background: #0f0;
        }
        .d3{
            width: 200px;
            height: 200px;
            background: #00f;
        }
    </style>
</head>
<body>
        <div class="d1" id="d1">
            <div class="d2" id="d2">
                <div class="d3" id="d3"></div>
            </div>
        </div>

        <script>
            //以下行为默认为事件冒泡机制，
            document.getElementById("d1").addEventListener('click',function(){
                console.log('box1');
            })
            document.getElementById("d2").addEventListener('click',function(){
                console.log('box2');
            })
            document.getElementById("d3").addEventListener('click',function(){
                console.log('box3');
            })
            //当为addEventListener指定第三个参数为tru时，此时采用事件捕获机制
            //   document.getElementById("d1").addEventListener('click',function(){
            //    console.log('box1');
            //	},true)
            
        </script>
</body>
</html>
取消事件传播

若需要取消事件的传播，只需要通过调用事件对象的stopPropagation()即可

document.getElementById("d1").addEventListener('click',function(e){
    console.log('box1');
})
document.getElementById("d2").addEventListener('click',function(e){
    console.log('box2');
})
document.getElementById("d3").addEventListener('click',function(e){
    console.log('box3');
    //取消事件的传播
    e.stopPropagation();
})

面向对象

自定义对象

JSON（JavaScript Object Notation）对象

js中有一种固定的对象表达形式，即json对象，json对象是一种以键值对为标准的对象表达形式（类似java中的Map）;并且随着互联网技术的发展，以及前后端分离技术的出现，json已经形成一种特殊的数据格式（基于javascript的json对象改变而来），用于实现前端数据传递。

//JSON对象
var hero = {
    img:new Image(),
    x:100,
    y:200,
    w:90,
    h:60,
    speed:10,
    draw:function(){
        let that = this;
        that.img.src = 'hero.png';
        that.img.onload=function(){
            //设置图片样式
            this.style.position='absolute';
            this.style.left=`${that.x}px`;
            this.style.top=`${that.y}px`;
            //设置图片大小
            this.width = that.w;
            this.height = that.h;
            document.getElementById('box').appendChild(this);
        }
    },
    moveTo:function(x,y){  //移动
        this.x = x;
        this.y = y;
        //重绘
        this.draw();
    }
}
//绘制飞机
hero.draw();

JSON字符串从js中的JSON对象发展而来，主要用于实现服务端和客户端之间的数据通信，语法：

{
    "id":1,
    "name":"softeem",
    "groups":{
        "id":1001,
        "gname":"vip1"
    }
}
构造器创建对象
//构造器
function User(id,name,pwd,show){
    this.id = id;
    this.name = name;
    this.pwd = pwd;
    this.getName=function(){
        return name;
    }
    this.setName=function(n){
        this.name = n;
    }
    this.show=show;
}

var u1 = new User(1,"softeem","123");
console.log(u1.getName());

var u2 = new User(2,"admin","123456",function(){
    console.log("hello");
})
u2.show();

全局函数

javascript提供了一些常见的全局函数，大多数用实现数据转换的功能：

  • parseInt():将string类型转换为number类型（只会取整数）
  • parseFloat():将string类型转换为number类型（会保留小数点）
  • eval():可以将字符串作为js代码进行执行
  • encodeURI():将string类型数据转码为url编码
  • decodeURI():将url编码的字符串解码为原始字符串值
  • Number():将任意类型转换为number
  • String():将任意类型转换为string
var s = '123456';
console.log(typeof s);

//将字符串类型转换为number
s = parseInt(s);
console.log(s,typeof s);

//将字符串类型转换为number
s = parseFloat(s);
console.log(s,typeof s);

s = '3 + 2';
console.log(s);
//eval可以将字符串转换为可执行的js代码（非常危险，避免使用）
console.log(eval(s));

//
s = "http://www.softeem.top/query?str=白日依山尽，黄河入海流&id=100";
//将目标字符串转码为URL编码（对于特殊符号和中文进行转码）
//http://www.softeem.top/query?str=%E7%99%BD%E6%97%A5%E4%BE%9D%E5%B1%B1%E5%B0%BD%EF%BC%8C%E9%BB%84%E6%B2%B3%E5%85%A5%E6%B5%B7%E6%B5%81&id=100
s = encodeURI(s);
console.log(s);

//解码
//http://www.softeem.top/query?str=白日依山尽，黄河入海流&id=100
s = decodeURI(s);
console.log(s);

//将任意类型数据转换为number
s = Number(true);  // 1
s = Number(null); // 0
s = Number(undefined); // NaN(not a number)
s = Number('123'); // 123
console.log(s);

//将任意类型数据转换为String
s = String(true);       // "true"
s = String(undefined);  // "undefined"
console.log(typeof  s); // string

常见内置对象

Number

JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。Number 对象的创建方式分为两种：

  1. 使用Number构造器创建

    var num = new Number('100');

  2. 使用Number的工厂方法创建

    var num = Number('100');

    关于工厂方法原理如下：

    function User(id,name,pwd){
    var u = {
        id:id,
        name:name,
        pwd:pwd
    }
    return u;
}
var u = User(1,"softeem","123");

使用示例:

//工厂模式
// var n2 = Number();
var n = new Number(undefined);
console.log(typeof n);
console.log(n instanceof Number);
console.log(Number.MAX_VALUE)
console.log(Number.isNaN(NaN))

var i = 3.1415926;
//保留指定number类型的小数点后2位
console.log(i.toFixed(2))
//最多截取小数点后三位并转换为string
console.log(typeof i.toLocaleString(i));
String

类似java中String，javascript的String类型也用于表示字符串，区别在于js中的String既可以表示字符串还可以表示字符，内部包含的一些方法与java中String类的方法基本一致，String对象的创建同number一样也包含两种创建方式：

  1. 构造器创建
  2. 工厂方法创建
var s = new String('softeem');
console.log('字符串长度:'+s.length);
//使用指定的html标签对字符串内容包裹
console.log(s.big()); // <big>softeem</big>
console.log(s.bold()); // <b>softeem</b>
//<a href="http://www.softeem.top">softeem</a>
console.log(s.link("http://www.softeem.top"));

//es6特性
s = `hasdfasdfa
sdfasdfasd
fasdfas
dfaasdf`;

console.log("13267890532".match(/1[3578]\d{9}/));//使用字符串匹配对应的正则表达式，匹配结果为数组对象

console.log(/1[3578]\d{9}/.test('13567089876'));//使用指定的正则表达式判断是否匹配给定的字符串

console.log("ab,cd,ef".split(","));//使用给定正则表达式截取位数组

console.log("a.txt".endsWith(".txt"));//判断是否以指定后缀结束

console.log("      abc  ".trim());//去除前后空格

Array

Array是js中的数组对象，创建方式包含以下：

//构造空数组对象
var a1 = [];
var a2 = new Array();

案例:

var arr = [6,7,4,3,5,2,1,9,8,10];
console.log(arr[0]);

//向数组中添加元素（末尾）
arr.push(8);
//获取数组长度
console.log(arr.length);// 11

//箭头函数（lammda表达式:ES6）
arr.forEach((item,index)=>{
    console.log(item,index);
})

/**
     * item: 当前遍历到的元素对象
     * index：当前元素的索引
     * array：目标数组对象
     */
arr.forEach(function(item,index,array){
    console.log(item,index,array);
})

//排序:自己实现排序规则，等同java中集合排序中Comparator比较器
arr.sort((a,b)=>b-a);
console.log(arr); // [10, 9, 8, 8, 7, 6, 5, 4, 3, 2, 1]

//数组反转
arr.reverse();
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 10]
//弹出数组的末尾元素，并从数组中移除
console.log(arr.pop());//10
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//向数组头部插入元素
arr.unshift('100');
console.log(arr); // ["100", 1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//取出数组头部的元素
console.log(arr.shift());
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//获取指定元素的索引
let index = arr.indexOf(7);
console.log(index)// 6

//删除指定索引的元素 参数一:索引  参数二：删除的元素个数
arr.splice(index,1);
console.log(arr);//[1, 2, 3, 4, 5, 6, 8, 8, 9]

//使用指定的符号对数组中的元素进行拼接，转换成string
let s = arr.join(",");
console.log(s);// 1,2,3,4,5,6,8,8,9

/*
        有数组 ["jackson","rose","tom","lily","adom","bob","chrise"]
        要求按照英文字母顺序排序输出
     */

var names = ["jackson","rose","tom","lily","adom","bob","chrise"];
// names.sort((a,b)=>a.localeCompare(b));
names.sort();
console.log(names);
Math

Math对象类似java中Math类，js中的Math不能通过传统的方式(构造器，工厂)创建对象，内部的所有方法可以直接通过Math调用，不需要实例对象调用（类似java中静态方法）

//从传入的参数中返回最大的一个元素
console.log(Math.max(10,20,40,50,33,22,12,9));

//返回从0.0~1.0之间的随机浮点数
console.log(Math.random());

//返回5~10之间的整数？
var n = parseInt(Math.random() * 6) + 5;
console.log(n);

//四舍五入取整
console.log(Math.round(4.46))

//输出指定数的n次幂
console.log(Math.pow(3,3));

//向下取整
console.log(Math.floor(3.999));

//向下取整
console.log(Math.ceil(3.00001));
Date
let date = new Date();
console.log(typeof date);//object

//获取日期对象的毫秒数表示方式
let time = Date.now();
console.log(typeof time);//number

console.log(DateFormater(date));
//yyyy-MM-dd HH:mm:ss

//日期格式化函数
function DateFormater(date){
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m > 10 ? m : `0${m}`;
    let d = date.getDate();
    d = d > 10 ? d : `0${d}`;
    let h = date.getHours();
    h = h > 10 ? h : `0${h}`;
    let min = date.getMinutes();
    min = min > 10 ? min : `0${min}`;
    let s = date.getSeconds();
    s = s > 10 ? s : `0${s}`;
    return  `${y}年${m}月${d}日 ${h}:${min}:${s}`;
}
RegExp（正则表达式）

​ 正则表达式在javascript用途主要在表单验证，正则表达式即通过一些特殊的符号标记按照一定的规则进行组织，形成字符串可以用于对指定的文本内容（string）进行匹配，查找，替换等操作。

js中正则表达式对象的创建方式主要包含以下三种:

  1. 使用构造器创建

    var regex = new RegExp("\\d{3,5}");

  2. 使用正则表达式常量表示形式

    var regex = /\d{3,5}/;

  3. 使用静态工厂创建

    var regex =  ("\\d{3,5}");

基本使用：

var num = "56432123123";

var regex = new RegExp("\\d{3,5}");
// regex = /\d{3,5}/;
//判断给定的字符串是否匹配给定的表达式
console.log(regex.test(num));
//执行匹配，并取出符合条件的字符串
console.log(regex.exec(num)[0]);

var phone = "1adfadsf135231123987fsdfsdf12138324234234sfsdf";
var regex = /1[3578]\d{9}/g;
var arr;
// Matcher ->group()
while((arr = regex.exec(phone)) !== null){
    //取出匹配到的字符串
    console.log(arr[0]);
}

var s = "HelloWorldSofteem";
regex = /world/i;
console.log(regex.test(s));

正则表达式使用实例：

验证手机号格式是否正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    手机号：<input type="tel" name="phone" onblur="checkPhone(this)">

    <script>
        function checkPhone(input){
            //获取输入框的值
            var tel = input.value;
            //声明手机号格式正则表达式
            var regex = /^1\d{10}$/;
            //验证输入的值是否匹配正则表达式
            if(!regex.test(tel)){
                // alert('请输入正确的手机号!');
                input.style.boxShadow="0 0 10px #f00";
                input.value='';
            }else{
                input.style.boxShadow="0 0 10px #0f0";
            }
        }
    </script>
</body>
</html>

DOM（文档对象模型）

概述

​ Javascript支持DOM编程，DOM即：Document Object Model；对于任何一个html网页都可以将页面中所有内容当做一颗倒置的文档树理解，可以通过js的dom操作对树中任意节点进行访问（添加，删除，修改，检索），倒置的文档树看上去，就像如下结构:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-97oUuSsy-1609054624901)(E:\Java学习\Java学习\20201224\笔记\assets\1608793100663.png)]

名词解释:

  1. 元素（Element）：html中任意一个标签开始到标签结束，之间的内容（包括标签本身）都称之为元素，一个元素也称之为一个节点
  2. 属性（Attribute）：属性是开始标签中有属性名和属性值构成的一个键值对结构

获取DOM几种方式

  1. 获取文档中的所有元素

    var all = document.all; // 返回一个包含了文档中所有节点的数组对象

  2. 根据标签获取元素

    //获取页面中的所有h1元素 (返回数组对象)
let titles = document.getElementsByTagName("h1");
console.log(titles);

  3. 根据元素的class名称获取元素（存在兼容性问题，慎用）

    //返回所有class名称为row的元素(返回数组对象)
let rows = document.getElementsByClassName("row");
console.log(rows);

  4. 根据元素的name属性获取元素集合（一般只有表单元素才有name属性）

    let langs = document.getElementsByName("lang"); //返回数组

  5. 根据元素的id获取元素(因为id在页面中具备唯一性，因此以下代码只能获取一个元素)

    let selectAll = document.getElementById("selectAll");//返回单个元素对象

以上都是一些比较常规的获取dom的方式，另外javascript还提供了两种更为全面的获取dom对象的方式：

  1. document.querySelector()：根据css的选择器获取匹配的单个元素

  2. document.querySelectAll()：根据提供的css选择器获取匹配的多个元素

    //根据css的选择器获取指定选择器选中的单个元素
var h2 = document.querySelector("h2");
console.log(h2);

var tds = document.querySelectorAll("td");
console.log(tds);

//获取所有class="row" h1 h2元素？
var elements = document.querySelectorAll(".row,h1,h2");
console.log(elements);
综合练习

省市联动效果：

  1. 数据文件

    var data = {
    "cityCode":[
        {
            "省": "北京",
            "市": [
                {
                    "市名": "北京",
                    "编码": "101010100"
                },
                {...}
                 ]
        },
       {
           "省": "北京",
             "市": [
                 {
                    "市名": "北京",
                    "编码": "101010100"
                 },
                 {...}
                 ]
       }
                 ...
   }

  2. 实现过程：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <select name="province" id="province"></select>省
        <select name="city" id="city"></select>市

        <!--引入数据脚本文件-->
        <script src="data.js"></script>
        <script>

            //获取所有的省
            let provs = data.cityCode;

            provs.forEach((item,index)=>{
                //创建元素
                var option = document.createElement("option");
                option.value = index;
                option.innerText = item.省;
                //获取select节点并将创建的子节点插入进来
                document.getElementById("province").appendChild(option);
                //加载市
                loadCity(0);
            })

            //为省列表绑定内容改变事件
            document.getElementById("province").addEventListener('change',function(){
                loadCity(this.value);
            });

            function loadCity(index){
                //获取当前被选中的元素的value属性值（索引）
                var citys = provs[index].市;

                //清空原节点中的子元素
                document.getElementById("city").length = 0;
                //遍历数组重新创建节点并加入到select中
                citys.forEach((e,i)=>{
                    let option  = new Option(e.市名,e.编码);
                    document.getElementById("city").appendChild(option);
                })
            }
        </script>
    </body>
</html>

DOM编程

插入DOM

js-dom中向指定节点插入元素的方法主要包含以下几类：

  1. appendChild(node)：向当前节点中插入子元素（子元素必须是一个dom对象）
  2. insertBefore(newNode,refNode)：向当前节点中的refNode之前插入newNode
  3. innerHTML：向当前节点插入html代码（覆盖原有的内容）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box1">
        <h1>dom插入演示</h1>
    </div>
    <button type="button" id="insert1" data-list="[1,2,3,4,5]">插入元素</button>
    <button type="button" id="insert2">插入输入框</button>

    <script>
        //获取目标节点
        var box1 = document.querySelector('#box1');
        document.getElementById('insert1').addEventListener('click',function(){
            //创建节点
            var hr = document.createElement('hr');
            //将指定节点插入到目标节点
            // let e = box1.appendChild(hr);
            let h1 = document.querySelector('h1')
            //向指定节点中的某一个子节点之前插入元素
            box1.insertBefore(hr,h1);
        })

        document.getElementById('insert2').addEventListener('click',function(){
            //创建节点
            var input = document.createElement('input');
            input.type = 'text';
            input.textContent = "123123123"
            input.value = 'softeem';
            input.className =  'input-box';
            input.id = 'username';
            //setAttribute用于向元素中添加属性和属性值（即便属性不存在该元素上）
            //data-*   data-msg    data-user-name
            input.setAttribute('data-msg','helloworld');
            box1.appendChild(input);
        })
    </script>
</body>
</html>

修改DOM

  • innerText：将文本内容插入到指定节点
  • innerHTML：将html代码插入到指定节点

删除DOM

  • removeChild(childNode)：删除当前节点下指定的子节点
  • remove()：删除当前节点对象

DOM补充

  • children: dom元素通过该属性可以获取当前节点下的所有的子节点（集合）
  • parentNode：dom元素通过该属性可以获取当前节点的父节点(唯一)

BOM

概述

BOM:Brower Object Model(浏览器对象模型)；即js中将有关浏览器的操作的顶层元素都是来自window对象；对外界提供了一个用于操作浏览器的访问结构，通过bom可以获取window相关信息，比如屏幕的尺寸，浏览器的详细信息（版本，内核，配置等），页面跳转，历史记录，定位，本地存储等，对于移动设备来说还可以获取与本机设备交互的硬件接口(位置信息，蓝牙，摄像头，陀螺仪)

window

window对象是BOM的顶层对象，bom中的一些核心对象都是源自于window，全局函数的this指针一般都是指向window

window的常见属性：

  • innerWidth：当前窗口可用区域的宽度
  • innerHeight：当前窗口可用区域的高度
  • outerWidth：浏览器窗口开启的实际宽度
  • outerHeight：浏览器开启的实际高度

基于window对象的弹窗组件

  • alert()：警告框
  • confirm()：确认框
  • prompt()：消息输入框
  • open()：自定义窗口
早睡不早起^_^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第六周学习周记——学习JavaScript
jix_Hu的博客
04-24 769
第六周学习周记前言一、JavaScript简介二、JavaScript用法三、JavaScript语法1. JavaScript字面量2. JavaScript变量3. JavaScript操作符4. JavaScript关键字5. JavaScript数据类型四、JavaScript对象五、JavaScript函数六、JavaScript事件总结 前言 在上一周学习了BootStrap后，这一周将学习新的知识：JavaScript。 一、JavaScript简介 JavaScript是一种直译式脚本语
JavaScript学习博客
demo_020的博客
11-13 427
JavaScript的简介： getElementById() 是多个 JavaScript HTML 方法之一。 JavaScript 是属于 HTML 和 Web 的编程语言。 JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。 JavaScript 是 web 开发者必学的三种语言之一： HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进行编程 JS组成 JS组成：ECMAScript（JS的核心）、DOM（文档对象模型）、BOM（浏览器对象模
赵大超的学习周志（九）
Mr_SuperZhao的博客
12-27 345
赵大超的学习周志（九） 本周是Java学习的第九周，主要是对Javascript的学习，具体学习了JS的基础语法，JS中的函数、事件，面向对象的思想，常见内置对象，DOM（文档对象模型），BOM（浏览器对象模型）等。通过对JavaScript的初步学习已经可以实现对页面的基本操作，极大地增强了页面的动态性。现将相关知识点总结如下： JS概述 ​ javaScript简称JS，是一门运行在客户端浏览器的脚本语言（无法独立运行的程序设计语言）；是一门直译型语言（不需要编译），是一门客户端语言； ​ Javasc
JavaScript 使用 · 每日笔记（3）
Mr_Duoduo的博客
07-22 331
知识点来源：w3school 1.<script> 标签 在 HTML 中，JavaScript 代码必须位于<script>与</script>标签之间。 实例 <script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script&...
学习js一周的总结
weixin_49257051的博客
07-11 257
学习js一周的总结 1.js的简史 1995年时，由Netscape公司的Brendan Eich开发出来的，最初中liveScript,为了快速发展，借用了当时一个业界非常流行的词语java,于是更名为javaScript.后来微软进入浏览器行业，从IE3.0开始的搭载了一个javaScript的克隆版JScript.因为行业的竞争,导致出来了多个不同的版本，使得各种浏览器，在兼容程序方面出现了混乱。为了统一语法标准，1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（EC
Java学习第九周笔记总结
最新发布
11-20
内容包括客户端与服务器端之间的交互，正则表达式，Junit，Maven
第九周值周工作总结.doc
01-27
第九周值周工作总结.doc
第一周知识总结1
08-08
9. **格式化输出**：使用`format`命令可以改变输出的格式，如`format short`用于短格式输出，`format longE`用于长格式的科学计数法输出。 10. **数学函数**：`exp()`用于计算e的幂，`linspace()`创建等差数列，`...
优秀资料（2021-2022年收藏）小学第十九周值周总结.doc
09-29
教育精品资料
520_第七周学习总结1
08-08
九、n皇后问题 n皇后问题是一种经典的算法题目，它的基本思想是将n个皇后摆放到n×n的棋盘上，使得每个皇后都不能攻击到其他皇后。我们可以使用python的位运算来实现n皇后问题，例如使用递推方程p(x)=p(x&(x-1))+1来...
Web Audio API 中文文档(官方pdf)
09-30
Web Audio API 中文文档(官方pdf)
audio.js插件
09-14
audio.js插件，播放音频，简介，方便，易操控，样式自定义
学习周记5——学习JavaScript
qq_48999927的博客
04-06 172
JavaScript简介 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 改变 HTML 图像 点亮灯泡实例 <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.g
第二周学习JS感受
szjljj的博客
03-20 333
在学习了二周JS后感觉不是很好，老师出的题，要求课堂上的练习效果都不是很好。 主要是自己的练习还不够，就像老师说的代码不是看出来的，而是敲出来的。但是如果要 要上心得话，就要对它感兴趣，而且光记没有，关键要学会应用才是最重要的。以后的学习 中学会多多动手吧！
第五周学习周记——JavaScript学习
weixin_54826115的博客
04-08 319
JavaScript学习 1.JavaScript的用法 如果需要在网页页面中插入 JavaScript语句，我们可以使用 <script> 标签。 <script> 和 </script> 之间的代码就是JavaScript的程序，<script> 和 </script> 将告诉网页JavaScript 在何时运行，何时结束。 JavaScript语句可以位于 HTML 的 <body> 或 <head> 中，或者同时存在
JS学习第一周总结
前端工程师学习记录
03-22 552
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基本特点： 是一种解释性脚...
js第一周学习总结
caicaizi3的博客
08-19 313
3、不一定非要从document开始查找，如果document去找，会找到所有的元素，可以换成我们已经找到的某个父元素，就只会找到这个父元素下面的元素了。4.Undefined-取值：1个，undefined，创建了一个变量，但是没有赋值，默认值为undefined，祖师爷犯的错，用来做大部分操作都会报错！1、返回值：找到了返回的一个是类数组DOM集合（很像数组，都能用下标，都能用length，都能遍历），没找到返回一个空集合。elem==>id值或找到的元素 - 支持识别开始标签到结束标签之间的标签。
JavaScript学习
panfengblog
09-11 206
JavaScript学习 最近在学习前端，js肯定是绕不过的一道坎，所以就写篇博客记录一下吧，供自己之后复习查看，当然如果能帮到你那就更好了，整个学习过程是按照廖雪峰的js教程进行的。 快速入门部分已经在我的另一篇博客中了，这里就直接跳过了那一部分。 1.函数 1.1 函数的定义和调用 函数和其他语言都比较相似，使用function关键字定义： function abs(x){ return x>0?x:-x; } console.log(abs(-1)); 由于Javascript中函数
JavaScript学习（一）
kuikui1452的博客
11-03 168
<!--【1】JS引入的方式一--> <script type="text/javascript" /*网页中的弹框*/ alert("js 的学习课程"); </script> <!--注意：引入js 的时候千万不要二合一--> <script type="text/javascript" src="js/test.js" charset="UTF-8" ></script> 1、JS中变量的使用注意的事项 1、
关于vue的实习日记10周
05-14
第1周： 本周主要是熟悉公司的Vue项目，并且了解项目的整体架构和代码结构。同时，学习了Vue的基本语法和常用指令，例如v-bind、v-if、v-for等。在实践中，我还尝试了使用Vue-cli构建项目，并了解了Webpack的基本配置。 第2周： 本周的任务是完成一个简单的Vue组件，并且尝试使用Vuex进行状态管理。在编写组件的过程中，我深入学习了Vue组件的生命周期和钩子函数，并且掌握了Vuex的基本概念和使用方法。 第3周： 本周的任务是完成一个复杂的Vue组件，并且尝试使用Vue-router进行路由管理。在编写组件的过程中，我继续深入学习了Vue组件的生命周期和钩子函数，并且掌握了Vue-router的基本概念和使用方法。 第4周： 本周的任务是深入学习Vue的响应式原理，并且尝试使用自定义指令和过滤器进行数据处理。在编写指令和过滤器的过程中，我掌握了Vue的核心概念和原理，并且了解了Vue的性能优化策略。 第5周： 本周的任务是尝试使用Vue的插件和第三方库，并且学习Vue的常用工具类和辅助函数。在实践中，我使用了Element UI和Axios，并且熟悉了Vue的常用工具类和辅助函数，例如lodash、moment等。 第6周： 本周的任务是学习Vue的动画和过渡效果，并且尝试使用Vue的自定义指令和组件进行动画效果的实现。在编写动画效果的过程中，我深入了解了Vue的动画机制和过渡效果，以及掌握了Vue的自定义指令和组件的使用方法。 第7周： 本周的任务是学习Vue的SSR和Nuxt.js，并且了解Vue的服务端渲染和构建工具的使用方法。在实践中，我使用Nuxt.js搭建了一个简单的SSR项目，并且掌握了Vue的SSR机制和构建工具的使用方法。 第8周： 本周的任务是学习Vue的测试和调试，并且尝试使用Vue的单元测试框架进行测试。在编写测试用例的过程中，我深入了解了Vue的测试机制和调试方法，并且掌握了Vue的单元测试框架的使用方法。 第9周： 本周的任务是学习Vue的性能优化和安全防范，并且尝试使用Vue的性能监测工具进行性能优化。在实践中，我使用了Vue的性能监测工具和安全防范工具，并且了解了Vue的性能优化和安全防范策略。 第10周： 本周的任务是总结和复习Vue的知识点，并且进行项目实战。在实践中，我对之前学习的Vue知识进行了总结和复习，并且使用Vue完成了一个实际项目的开发。同时，我还将项目部署到了服务器上，并且进行了线上测试和调试。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值