关于JavaScript的学习笔记

最新推荐文章于 2024-07-12 09:36:48 发布

大聪明397

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量102

点赞数 2

分类专栏：前端基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48391468/article/details/119785811

版权

前端基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.函数

1.1.定义函数

绝对值函数

定义方式一：

function abs(x){
    if(x>=0)
        return x;
    else
        return -x;
}

如果没有return，函数执行也会返回结果（undefined）

定义方式二：

var abs = function(x){
    if(x>=0)
        return x;
    else
        return -x;
}

function(x){…}是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

调用函数：

abs(10) //10
abs(-10) //10

参数问题：JavaScript可以传任意个数的参数，也可以不传参数

arguments //代表传递进来的所有参数，是一个数组

var abs = function(x){
    
    console.log("x=>"+x);
    
    for(var i = 0;i < arguments.length;i++){
        console.log(arguments[i]);
    }
    
    if(x>=0)
        return x;
    else
        return -x;
    
}

问题：arguments包含所有的参数，如果想使用多余的参数来进行附加操作，需要排除已有的参数、

**rest：**ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest参数只能写在最后面，必须用 … 标识

1.2.变量的作用域

var 定义的变量有作用域的，函数内声明的就是局部变量

假设内部函数变量和外部函数变量重名

function dd(){
    var x = 1;
    function dd2{
        var x = 'A';
        console.log('inner' + x);
    }
    console.log('outer' + x);
    dd2();
}
dd();

函数查找变量从自身开始，由内向外查找，假设外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function dd(){
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果：x undefined

因为js执行引擎自动提升了y的声明，但不会提升变量y的赋值

全局函数

全局对象window

var x = 'xxx';alert(x);alert(window.x);//默认所有全局变量都绑定在window的对象下

alert()这个函数本身也是一个window的对象

规范

由于所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，就会冲突，如何减少冲突？

//唯一全局变量var duan = {};//定义全局变量duan.name = 'duanyuqi';duan.add = function(a,b){    return a + b;}

把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

ES6 let（块级作用域）关键字，解决局部作用域冲突问题

常量const

修饰的常量只读，不可修改

1.3.方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法

var duan = {    name:'duanyuqi',    birth:1999,    age:function(){        var now = new date.get().getFullYear();        return now - this.birth;    }}duan.name;duan.age();

apply

在js中可以控制this的指向

function getAge(){	var now = new date.get().getFullYear();    return now - this.birth;}var duan = {    name:'duanyuqi',    birth:1999,    age:getAge()};getAge.apply(duan,[]);//this指向了duan，参数为空

2.内部对象

标准对象

typeof 123"number"typeof '123'"string"typeof []"object"typeof {}"object"

2.1.Date

基本使用

var now = new Date();now.getFullYear();now.getMonth();now.getDate();now.getDay();now.getHours();now.getMinutes();now.getSeconds();now.getTime();//时间戳console.log(new Date(1578106175991));//时间戳转换为时间

2.2.Json

Json字符串和Js对象的转换

var user = {    name:"duanyuqi",    age:22,    sex:'男'}//对象->Json字符串var jsonUser = JSON.stringify(user);//Json字符串->对象var obj = JSON.parse('"name":"duanyuqi","age":22,"sex":"男"');

JSON和JS对象的区别

var obj = {a:'hello',b:'hellob'};var json =  '{"a":"hello","b":"hellob"}'

2.3.Ajax

原生的js写法 xhr 异步请求

jQuery 封装好的方法 $(“name”).ajax("")

axios 请求

3.面向对象编程

class继承

class关键字，ES6引入

class Student{    constructor(name){        this.name = name;    }    hello(){        alert('hello');    }}var xiaoming = new Student("xiaoming");var xiaohong = new Student("xiaohong");xiaoming.hello();

4.操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

Navigator

封装了浏览器的信息

navigator.appName"Netscape"navigator.appVersion"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36"navigator.userAgent"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36"navigator.platform"Win32"

大多数时候不使用navigator对象，会被人为修改

screen

screen.width1920screen.height1080

location（重要）

location代表当前页面的url信息

host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload() //刷新网页eplace: ƒ replace()location.assign('http://wormhole-dev.hsmob.com/#/groupManage/userGroup') //跳转新的地址

document

document代表当前的页面，HTML DOM文档树

document.title"百度一下，你就知道"document.title = '面向监狱编程'"面向监狱编程"

获取网页cookie

document.cookie"BIDUPSID=A8193CF1CC6EABCC735EA8CCE768BFD9; PSTM=1619007674; BAIDUID=A8193CF1CC6EABCC4371C39116C66094:FG=1; MCITY=-%3A; BD_UPN=12314753; BAIDUID_BFESS=A8193CF1CC6EABCC4371C39116C66094:FG=1; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1625812690,1626420375,1626425693,1626837085; COOKIE_SESSION=95285_4_7_8_6_18_0_1_6_8_1_0_161530_161434_0_0_1626837189_1626837086_1626932518%7C9%23161393_52_1626837042%7C9; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BD_HOME=1; H_PS_PSSID=34303_33764_34272_31254_34004_34073_34092_34094_26350_34237; BA_HECTOR=21a1ah2480242g25if1gfkq2k0q"

劫持cookie原理

www.taobao.com

<script src="a.js"></script><!--a.js里包含document.cookie，获取访问人的cookie-->

服务器可以设置cookie：httpOnly

history(不建议使用)

浏览器的历史记录

history.back()histoey.forward()

5.操作DOM对象

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构

更新：更新DOM节点

遍历DOM节点：得到DOM节点

删除：删除一个DOM节点

添加：添加一个心得DOM节点

要操作一个DOM节点，就要先获得这个DOM节点

获得DOM节点
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YsAT6s-1629280308113)(C:\Users\WEIMOB\AppData\Roaming\Typora\typora-user-images\image-20210723155746090.png)]$

更新节点

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3gTIAkL-1629280308117)(C:\Users\WEIMOB\AppData\Roaming\Typora\typora-user-images\image-20210723160601586.png)]$

操作文本

id1.innerText='456' 修改文本的值id1.innerHTML='<strong>123</strong>' 解析HTML文本标签

操作CSS

id1.style.color = 'yellow';id1.style.fontsize = '20px';id1.style.padding = '2em';

删除节点

步骤：先获取父节点，再通过父节点删除自己
在这里插入图片描述
注意：删除多个节点的时候，children是时刻变化的

插入节点

获得了某个DOM节点的时候，假设这个节点是空的，通过innerHTML可以增加一个元素，如果本身节点上就存在一个元素，会覆盖

追加

在这里插入图片描述
效果：

创建一个新的标签，实现插入

在这里插入图片描述

6.操作表单（验证）

表单是什么 form DOM 树

文本框 text

下拉框

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

表单的目的：提交信息

获得要提交的信息
在这里插入图片描述

提交表单（MD5加密，表单优化）
在这里插入图片描述

大聪明397

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JavaScript的学习笔记

1.函数1.1.定义函数绝对值函数定义方式一：function abs(x){ if(x>=0) return x; else return -x;}如果没有return，函数执行也会返回结果（undefined）定义方式二：var abs = function(x){ if(x>=0) return x; else return -x;}function(x){…}是一个匿名
复制链接

扫一扫