JavaScript学习笔记

最新推荐文章于 2024-07-22 15:19:55 发布
最新推荐文章于 2024-07-22 15:19:55 发布
阅读量135 收藏
点赞数
分类专栏： 学习笔记 文章标签： js 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guo_Yuhua/article/details/119778823
版权

文章目录

javaScript学习笔记

01_javaScript基本

1.1 ECMASCRIPT

js的核心，ecmaScript描述了js的语法和基本对象

简单地说，ECMAScript 描述了以下内容：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象

1.2 DOM

描述了网页处理的方法和接口

1.3 BOM

描述了与浏览器进行交互的方法和接口

02_语法规则

1. 简单输出案例

var a = 10;
var b = 5;
var temp = a+b;
alert(temp);

2. 基本数据类型

区分java and js (js自动区分数据格式声明var即可使用)

  • String，Char.js不区分字符和字符串

    var st1 = "lalal";
var st2 = 'lalal';
//两者等价

  • boolean类型 java和js一样

    var flag1 = true;
var flag2 = flase;

  • number数字类型（js不区分整数浮点数）

    var num1 = 10;
var num2 = 1.11;
var num3 = -111;

  • null空一个占位符号

    var obj = null;

  • undefined未定义数据类型该类型仅有一个固定值undefined表示变量声明却没定义值

    var a;
var b = undefined;
//两者等价

  • 变量混合使用

        var a = 10;
    a = "DAWDWA";
    a = null;
    a = true;
    alert(a);

  • 查看变量类型方法typeof

    var a = 10;
a = "lalal";
alert(typeof(a));

  • 引用数据类型

    java中引用数据类型成为 类，js引用数据类型成为对象，创建方式如下：

    var str = new String(); //和jaav一样可以带参数
var str = new String;  //js独有

3. 比较运算符

  • “"，"==”

    大多数和java相同。因为js不区分数据类型，

    前者比较值相同返回true不一样返回false。后者比较值和数据类型相同true…

    var str1 = 10;
var str2 = 10;
var str3 = "10";
str1 == str2;   //true
str2 == str3;   //true
str2 === str3;  //false

  • 逻辑运算符

与或非javaVSjs

  • java

    &.|,!,^,&&,||(查漏补缺单个与或两边都要运算，双与或只运算左边)

  • js仅有以下三个

    &&,||, !

4. 正则对象

  • RegExp对象

  • 直接量方式，必须每一个字符都符合正则否则返回false，一般用于表单校验

      var reg = /^巴拉巴拉$/    
  ^是正则表达式开始    $是正则表达式结束

  • 普通方式，只要有一个符合都true除非全部字符都不符合返回false,一般用于字符串查找替换

      var reg = /巴拉巴拉/;

  • test方法

检索字符串中指定值返回true或者false

var reg = /^\s*$/;	//直接量方式0~n个空格
var flag =  reg.test("  ");
alert(flag);    //true
var reg1 = /\s+/;	//普通方式1~n个空格
flag = reg1.test("   a  );
alert(flag);  // true

5. JS数组对象

  • js数组特性

js数组可以看出java中ArrayList集合

  1. 数组中每一个成员没有类型限制，即可以存放任意类型
  2. 数组的长度可以任意更改
  • js创建数组四种方式
//主要掌握前两种
//第三种其实没意义，因为js数组长度可变
var arr1 = [1, 2, "ddwad", 'daw', true]; //长度为5元素分别为......
var arr2 = new Array();  //new一个数组
var arr3 = new Array(4);  //长度为4
var arr4 = new Array(1,2,"dawd"); //长度为3元素分别是1，2，dawd
  • 数组使用和lenght方法
//lenght方法等同java
var arr = [1,2,'das',true];
alert(arr.lenght);    //输出4
arr[1] = "dddd";
arr[4] = "lalala";
alert(arr.lenght);   //输出5
arr[7] = 5;
alert(arr.lenght);   //输出8  (5到7undefined)
  • js数组对象常用方法
  1. join(String)方法将数组元素按照指定字符拼接（不影响原先数组）
  2. pop()删除并返回数组最后一个元素
  3. push()向数组的末尾添加一个元素并返回新的长度
  4. reverse（）反转数组中元素的顺序(反转下标，影响原先数组)
var arr1 = [1, 2, "ddwad", 'daw', true,434];
var st = arr1.join("+");
alert(st);  //1+2+ddwad+daw+true+434
var st1 = arr1.pop();  //返回删除的元素
alert(st1);  //434
alert("pop方法后原来数组长度"+arr1.length);  //5
var st2 = arr1.push("new");  //返回长度
alert("push方法后数组长度"+st2);  //6
alert(arr1); //1,2,ddwad,daw,true,new
alert(arr1.reverse()); //new,true,daw,ddwad,2,1

6.全局函数global

  • evel（String）函数：

可以把传入的字符串当作js代码执行(可以拓展程序功能)

只能传入基本的数据类型，不能传入字符串对象

evel(var x = 10);  //等价于var x = 10
alert(x);   //10
evel(new String("var a = 10"));
alert(a); //报错 a未定义

  • 编码和解码

    URL编码：传递中文容易出错

    var msg = "www.lalala.com/index.html?username=张三&passsword=123";
alert(msg);  //www.lalala.com/index.html?username=张三&passsword=123
var after = encodeURI(msg);  //编码
alert(after);  //输出结果username=%E5%BC%A0%E4%B8%89&passsword=123
var after1 = decodeURI(after);  //解码
alert(after1);  //www.lalala.com/index.html?username=张三&passsword=123

    URI和URL区别

    URI统一资源标识符：标识资源详细名称

    URL统一资源定位符：定位网络资源位置

  • 字符串转数字

    parseInt(); //转数字(不带小数)

    parseFloat(); //转数组(带小数)

            var x = "10.55";
        var temp1 = parseInt(x);
        var temp2 = parseFloat(x);
        alert(typeof(temp1)+":"+temp1);   //number:10
        alert(typeof (temp2) + ":" + temp2);  //number:10.55
		//试错
		// x = 10.a.55      结果10  10
		// x = 1a0.55       结果1   1
		// x = 10.55.a      结果10  10.55
		// x = a10.55		结果NaN(Not A Number)这是一个数字类表示，表面值不是数字

7. 自定函数

  • 创建格式 function 方法名（参数列表）{函数体}

    function getSum(a,b){
    return a+b;
}

  • 调用

    var result = getSum(1,2);
alert(result);

  • 函数使用注意

    js调用完默认返回defined

    js方法名相同不存在重载，先来后到覆盖

    js仅仅依靠方法名识别方法，形参不匹配不影响

8. 自定对象

  • 创建创建格式 function 对象名（）{函数体}

  • 调用 var ob = new 对象名();

            //1. 声明对象
        //2. 声明属性 this.对象名
        function persional() {
            this.name = "张三";
            this.age = 22;
        }
        var per = new persional();
        alert(per.name+per.age);    //张三22

  	function persional1(a, b) {
            this.name = a;
            this.age = b;
        }
        var per1 = new persional1("我是参数调用", 100);
        alert(per1.name+per1.age);  //我是参数调用100
		per1.sex = '男';  //为persional1声明sex属性
        alert(per1.sex);   //男

  • 对象直接量法创建，直接创建出实例不需要new

    var 对象名 = {属性1:“值”,属性2:“值”,属性3:“值”,属性4:“值”，，，，，};

            var per2 = {name:'我是直接量创建', age: 2020};
        per2.e = "我是追加属性";
        alert(per2.name+per2.age+per2.e);  //我是直接量创建2020我是追加属性

03_BOM对象

浏览器对象模型BOM：BOM对浏览器窗口进行访问和操作。

BOM对象有：

1. Windows对象

windwos对象是主要使用对象，windows是js内置对象，调用时可以省略不写例如alert（）方法

浏览器打开的窗口比如chrome，firefox，IE等

1.1 消息框
  • alert()方法

警告框，用来弹出警告信息

 ```js
 alert("你好");
 ```
+ confirm()方法

确认框，用于告知用户信息并收集用户选择

        var b = confirm("你好");
        alert(b);    //返回用户点击确认还是取消
1.2 定时器

  • 循环定时器的设置和取消

    • 启动循环定时器 setInterval()

      返回定时器ID

      调用一次就会创建并循环执行一个定时器

    格式： setInterval(调用方法，毫秒值)；

    • 取消循环定时器 clearInterval()

      //循环5次后停止
var intervalId;
var sum=0;
function run1(){
  alert("我是run1");
    sum++;
    if (sum == 5) {
        clearInterval(intervalId);
    }
}
intervalId = setInterval("run1()", 2000);   //等价 setInterval(run1, 2000);

  • 一次性定时器设置和取消
    调用时创建并执行一个一次性定时器

    • 启动setTimeout(调用方法，毫秒值)；

      返回定时器id值

    • 取消clearTimeout(id);

      function run() {
    alert("你好");
}
var timeOut = setTimeout("run()", 2000);
clearTimeout(timeOut);

2. Naviqator

3. Screen

4.History

5. Location

location对象包含浏览器地址栏的信息

常用属性URL，主机，路径，端口，协议，URL部分截取

对象方法加载新文档，重新加载当前，新文档替换当前

可通过windows.localtion属性访问

  • 常用属性

    • hrel 设置或返回完整的URL

      var loca = window.location;
alert(loca);    //返回当前页面地址编码后的URL
var t = decodeURI(loca);   //解码
alert(t);  //返回解码后的URL
window.location.href = "http://www.baidu.com";  //跳转到百度页面

//两秒后跳转百度页面
function run() {
    window.location.href = "http://www.baidu.com";
}
setTimeout("run()", 2000);

03_DOM对象

DOM(Document Object Model)文档对象模型

DOM将标记形文档中所所有的东西（标签文本属性）封装成对象

通过操纵对象的属性和方法来控制改变HTML展示

一个HTML文档加载到内存中会形成一个文档

3.1 获取元素对象四种方式

注意获取对象方法，应在元素之后

  • getElementByld() — 通过元素ID获取对应元素

  • getElementsByname() — 通过元素name属性获取符合要求的对象 返回值是数组

  • getElementBsyTagName() — 通过元素的元素名属性（标签名）获取对象 返回值是数组

  • getElementsByClassName() — 通过元素的class属性来获取元素 返回值是数组

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1() {
            alert("点了");
        }
    </script>
</head>
<body>
        <!--
        事件源  按钮button
        事件    点击onclick 
        监听器  run1()
        注册/绑定监听器  onclick="run1()"
        -->
        <input type="button" name="按钮" value="点我" onclick="run1()">
</body>
</html>
3.2元素对象常见属性

  • value 元素对象.value

    获取 元素对象的value属性 也可以重新赋值 元素对象.value

  • className

    获取元素对象className属性 也可以赋值

  • checked 默认选中属性

    获取元素对象checked属性 也可以赋值 （checked是默认选中属性返回值只有true和flase）

  • innerHTML

    获取元素对象内容体，使用方法同上除此以外还可以追加 元素对象.innerHTML+=“sssss”;

04_JS事件

js事件是鼠标移动点击或者热键的动作

通过js事件可以完成页面的指定特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1() {
            alert("点了");
        }
    </script>
</head>
<body>
<input type="button" name="按钮" value="点我" onclick="run1()">
</body>
</html>
4.1js事件驱动机制简述

  • 事件源

    产生事件的组件

  • 事件

    由事件源产生的动作或者事情

  • 监听器

    处理事件源产生的事情

  • 注册/绑定监听器

    让监听器时刻监听事件源是否有指定事件产生，产生则执行事件动作

4.2js常见事件

  • onclick() ----点击事件

  • onfocus() ----获取焦点事件

    焦点事件是整个页面的注意力 默认一个页面在最多只能有一个焦点

    反应的是用户目前的关注点组件（例如文本框中闪烁的小竖线）

  • onblur() ----失去焦点事件

    元素组件失去焦点时触发

    <body>
<input type="text" id="t1" value="请输入balabala" onfocus="run1()" onblur="run2()">
<script>
    function run1() {
        let t1Fun = document.getElementById("t1");
        t1Fun.value = "获取焦点后";
    }
    function run2(){
        let t1Fun = document.getElementById("t1");
        t1Fun.value = "失去焦点后";
    }
</script>
</body>
  • 值得一提，写在body中切出网页触发，输入完用户名失去焦点时候查询用户名是否存在
<body onfocus="run3()">
<script>
    function run3() {
        alert("失去焦点")
    }
</script>
</body>

  • onchange() ----域内容改变事件

    元素组件值发生改变时候触发

    <select onchange="run3()">		//下拉选择框
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>
<script>
    function run3() {
        alert("值发生改变了");   //点击下拉框选择框选项时触发
    }
</script>

  • onload() ----加载完毕事件

    元素组件加载完时触发 例如获取元素对象时候为防止数据丢失可以先等待元素加载完成

    <body onload="run3()">
<script>
    function run3() {
        alert("加载完成");
    }
</script>
</body>

  • onsubmit() ----表单提交事件

    表单提交按钮点击时触发。可以进行表单校验

    返回布尔类型，true提交，false阻止提交

    <body >
<form onsubmit="return  run1()">
<input type="text" name="user" value="please input:">
<input type="submit" value="提交1">
</form>
<script>
    function run1() {
            alert("点击按钮被点击了");
            return true;
    }
</script>
</body>

  • onkeyup() onkeydown() ----键位弹起和按下事件

    组件中输入某些内容时键盘键位弹起按下时触发该事件

    onkeyup() 弹起会触发（bug如果摁下去不放就不会触发）

    onkeydown() 按下会触发 没有上面的bug

    <body >
<input type="text" id="t1" name="user" value="please input your name" onfocus="run1()" onkeyup="run2()" onkeydown="run3()">
<script>
    function run1() {
        var name1 = document.getElementsByName("user");
        name1[0].value = "";
    }
    //弹起触发 比如最后的i按不放就不会触发
    function run2() {
        var name1 = document.getElementsByName("user");

        if (name1[0].value === "woshi") {
            alert("检测出来您输入woshi");    //必须从一开始输入woshi
        }
    }
    //按下触发
    function run3() {
        var name1 = document.getElementsByName("user");
        if (name1[0].value === "woshi") {
            alert("111111检测出来您输入woshi");    //必须从一开始输入woshi
        }
    }
</script>
</body>

  • onmouseover() ----鼠标移入事件

  • onmouuseout() ----鼠标移出事件

    <body >
<input type="text" name="input" value="please innout" onmouseover="run1()" onmouseout="run2()">
<script>
    function run1() {
        var inp = document.getElementsByName("input");
        inp[0].value = "鼠标移入了";
    }
    function run2() {
        var inp = document.getElementsByName("input");
        inp[0].value = "鼠标移出了";
    }
</script>
</body>
4.3两种事件绑定方式

  • 元素事件句柄绑定

    将事件以元素属性的方式写到标签内部，进而绑定对应函数

    优点：开发快捷 可以绑定多个参数 传参方便

    缺点: js和html高度融合在一起不利于多个部门的项目开发维护

    • 单个函数绑定
    <body>
<input type="text" name="input" value="1111" onclick="run1()"><br/>
<input type="text" name="input" value="2222" onclick="run2('带参调用')"><br/>
<input type="text" name="input" value="3333" onclick="run3(this)"><br/>
<script>
    //无参调用
    function run1() {
        alert("无参调用");
    }
    //含参调用，双引号原则外双内单
    function run2(str) {
        alert(str);
    }
    //参数为对象  this指的是当前对象   
    function run3(obj) {
        alert(obj.value);
    }
</script>
</body>

    • 多个函数绑定 逗号隔开

      <!--多个函数绑定-->
<input type="text" name="input" value="1111" onclick="run1(),run2(),run3()"><br/>

  • DOM绑定方式

    使用DOM的属性方式绑定事件

    优点： html和js完全分离

    缺点： 一个事件只能绑定一个函数 解决：匿名函数

    		不能传递参数    解决：匿名函数

    <input type="text" name="input" value="1111" ><br/>
<input type="text" id="t1" value="2222" ><br/>
<script>
    function run1() {
        alert("窗口加载完毕");
    }
    //dom绑定1    对象名.属性
    window.onload = run1();
    //dom绑定2   对象名.属性 = 匿名函数
    window.onload = function () {
        run1();
    };

    //通过id值获取对象
    function run2() {
        var id = document.getElementById("t1");
        id.onclick = function () {
            run1();
        };
    }
    window.onload = run2();
</script>
</body>
郭小傻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 985
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javascript 学习笔记
Katios
05-25 7233
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 435
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 610
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1803
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 527
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
前端性能优化--懒加载
weixin_43799793的博客
07-19 177
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 397
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 492
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 291
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1064
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
web前端 React 框架面试200题（三）
柯晓楠
07-21 421
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
Linux上的系统服务——DNS、WEB、NFS 和 AutoFS 服务的详细配置步骤
qq_68600196的博客
07-17 724
现有主机 node01 和 node02，完成如下需求：1、在 node01 主机上提供 DNS 和 WEB 服务2、dns 服务提供本实验所有主机名解析3、web服务提供 www.rhce.com 虚拟主机4、该虚拟主机的documentroot目录在 /nfs/rhce 目录5、该目录由 node02 主机提供的NFS服务共享6、该目录可以通过autofs服务实现自动挂载7、所有服务应该在重启之后依然可以正常使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值