JavaScript笔记

最新推荐文章于 2024-07-21 10:17:51 发布
最新推荐文章于 2024-07-21 10:17:51 发布
阅读量243 收藏 1
点赞数
分类专栏： Web开发笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43895819/article/details/126898749
版权

1. 入门

1.1 概念：运行在客户端的脚本语言

1.2 作用

  • 动态校验表单
  • 网页特效
  • 服务端的开发(nodejs)
  • 桌面程序
  • 控制硬件-物联网

1.3 组成

  • ECMAScript 基础
  • DOM 文档数据模型
  • BOM 浏览器数据模型

1.4 书写方式

  • 内嵌  <script><script>
  • 外链式  <script src=""><script>

1.5 注释

   // 

  /* */

        多行可嵌套单行，单行不可嵌套多行

1.6 输入输出

  • 输入

                弹窗输入 var a = prompt("输入名字");

                确认框 var res = confirm('你确定吗') //返回true、false

  • 输出

                弹框 alert("你好\n"+"小明")

                控制台

         console.log(a+"你好\n", b)

         console.dir(document) 对象详细信息

                浏览器

         document.write("你好")

1.7 代码片段

VSCode > 设置 > 配置用户代码片段

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

2. 数据类型

2.1 基本数据类型

  1. number 数值（在控制台显示为蓝色）
  2. String 字符串（换行 \n，  缩进、制表 \t）
  3. boolean 布尔型
  4. undefined 未定义 (false, NaN)
  5. null 空 (false, 0)

2.2 引用数据类型

        类； 数组； 日期, 正则

2.3 转换

强制转换

  、String(); Number(); Boolean(); parseInt()逐个解析，遇到非数字字符结束

        false：Boolean( "" 0 null undefined )

        true： Boolean( " " "0" )

自动转换

        任何类型 + 字符串 -> 拼接字符串

        true,false,null + 数值 -> 数值

        + 两端都不是字符串，默认用Number()强转，再加法运算

2.4 其他

typeof a

console.dir(f1 instanceof Function); //true 验证f1是不是Function的实例

console.dir(f1 instanceof Object);//true 验证函数是不是引用数据类型

NaN not a number

        NaN != NaN true，六亲不认，比较没有意义

null 和 undefined区别

        null 可转为数值 0，undefined 转为NaN

Number() 与 parseInt()区别

        都可转字符串为数值类型。后者能逐个解析，遇到非数字字符结束。前者只要有，直接显示NaN

==与===

        ==只比较值，不比较类型；===比较值与类型

3. 运算符

1）算术运算符（+ - * / %取余）

2）自增自减运算符（++在后，先返回结果，后变量+1）

3）比较运算符 （> < >= <= != ==）结果是boolean类型

4）逻辑运算 （与&& 或|| 非!）

        短路：第一个表达式值可以确定结果时,就不再继续运算后边的表达式的值

                与

                         表达式1 值为真，则返回表达式2 console.log( 123 && 456 ); // 456

                        表达式1 值为假，则返回表达式1 console.log( 0 && 456 ); // 0

                或

                        表达式1 值为真，则返回表达式1

                        表达式1 值为假，则返回表达式2

5）赋值运算符

         基本 （=）

         复合 （+= -= *= /= %=）

6）三元运算符 表达式1 ? 表达式2 : 表达式3

4. 流程控制

条件

// if-else
if (a == 1){ 
}else { }

//if-else-if
if(money>=200){
}else if(money>=100){
}else{ 
}

//switch
switch (Number(m)) {
    case 3:
    case 4:
    case 5:
        alert("春季");
        break;
default:
        alert("不是春季")
        break
}
  • case穿透：执行完后没有break，代码继续往下穿透，直到遇到下一个break为止
  • break; 跳到下一次循环
  • continue; 跳出循环
  • return;

循环

//for 使用场景：循环次数确定
var sum=0;
for(var i = 1 ; i <= 99 ; i++){
    sum += i;
}
console.log(sum);

// while 使用场景：循环次数不确定、条件确定
var i=1;
while(i<=10){
    循环语句
    i++;
}

var q = 0 ;
while(Number(q) != 1){
    q=prompt("爱我吗？1/0");
}
alert("领证走")

// do-while
var i=1;
do{
    循环语句
    i++;
}while(i<=10)

5. 数组

定义赋值

    1）var arr = new Array(2，9，4);        

  //传递一个数字，生成指定长度数组（每个值为空）。传递一个字符，生成长度为一的有内容数组
        arr[0] = 12;

    2）var arr = new Array('张三','李四');

    3）var arr=[];
        var arr=[1,2,4];

其他

        以数字为索引的列表 []

        个数/长度 arr.length

        最后一个元素 arr[arr.length - 1]

增、改          arr[2] = "";

删                 delete arr[2];

二维数组       var arr = [[30, 60], [40, 80]]; arr[2][0]

6. 函数

概念：是封装的一段有参数，有特定功能的代码块，可多次调用

命名函数

function plus(x, y){
return x+y;
}
var res=plus(1, 2);

匿名函数

var plus = f(x, y){
return x+y;
}
var res = f(1, 2);

参数 arguments

function f() {
console.log("函数参数：",arguments);
}

返回值 return 结束函数，可以放在 if 中

函数名代表整个函数 console.log( f );

方法：函数和对象写在一起后，称作“方法”

7. 类和对象

7.1 关系

  • 类(抽象)是对象的集合 -> 教师（类）
  • 类【实例化】为对象(具体) -> 张三（对象）
  • 类： 对现实生活中具有相同属性和行为的事物的一个统称(抽象的,相当于模板)
  • 对象 /实例： 是类 “实例化” 得到的内存中的一个实体

7.2 构造函数

  • 构造函数名大写开头，大驼峰
  • new来调用
方法1
// 定义类
function Person(name, age) {
  this.name = name
  this.age = age
  this.eat = function () {
    console.log('吃饭')
  }
}
//创建对象
var p = new Person('张三', 20)
//调用属性和方法
p.eat()

方法2
class Runoob {
  constructor(name, year) {
    this.name = name
    this.year = year
  }
  age() {
    let date = new Date()
    return date.getFullYear() - this.year
  }
}
var a = new Runoob('李四', 19)

7.3 对象

概念：对象是名值对的集合，或字符串到值映射的集合，由花括号 {} 括起来

取值、添加属性： book.topic="" book["fat"]=""

对象的创建

构造函数创建
function Person(name, age){
    this.name = name;
    this.age = age;
    this.study = function () {
        console.log("在学习");
    }
}
var p = new Person("张三", 20);

字面量方式创建
var p = {
	name: "张三",
	age: 20,
	study: function () { }
}

用new Object() 创建
var student = new Object();
student.name = "张三";

8. 常见对象

8.1 Math

  • PI         Math.PI
  • 最值     Math.max(1, 3, 6, 4, 2) Math.min(1, 3, 6, 4, 2)
  • 绝对值       Math.abs(-10)
  • 向上取整    Math.ceil(1.2)
  • 向下取整    Math.floor(1.8)
  • 四舍五入    Math.round(1.34)
  • [0,1) 随机数    Math.random()
  • [min,max]随机数 ： Math.floor(Math.random() * (max - min + 1) ) + min

8.2 Date

1）创建对象 var date = new Date();

  • 年 date.getFullYear()
  • 月 date.getMonth() + 1
  • 日 date.getDate()
  • 周 date.getDay() 值为0-6，周日起
  • 时 date.getHours()
  • 分 date.getMinutes()
  • 秒 date.getSeconds()
  • 毫秒date().getTime()
  • 返回 1970.1.1 至当下时间的毫秒数
    • var now = +new Date();
    • var now = new Date().getTime();
    • valueOf() 与 getTime() 返回值相等

2）静态方法 Date.now() 等效于 +new Date()

3）取此时详细时间 new Date() ，Date()

4）使用

function getDate() { //获取今日时间
let date = new Date();


//获取年月日周
let year = date.getFullYear();
let month = date.getMonth();
let day = date.getDate();
let week = date.getDay();

//用数组保存星期
arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

//模板字符串
return `今天是${year}年${month}月${day}日${arr[week]}`;
}

8.3 数组Array

1）创建

  new Array(长度)

  new Array(元素1, 元素2...)

2）方法

  • 头增，返回新长度 arr.unshift("Lemon","Pineapple");
  • 头删，返回删除值 arr.shift()
  • 尾增，返回新长度 push()
  • 尾删，返回删除值 pop()
  • 自由增删，返回删除的元素数组
    • arr.splice(1,0,100,200) 在索引1处删除0个元素，并插入100,200
  • 排序
    • 升序 sort()
    • 降序 arr.sort( function(a,b){ return b-a } )
  • 反转 reverse()
  • 索引
    • arr.indexOf(7) 没有找到，返回 -1
    • arr.lastIndexOf(7)
  • filter过滤
    • arr.filter(a => (a> 5))
    • arr.filter(function(a){return a>5});
  • 截取片段 arr.slice(1,3);

8.4 String 字符串

  • 索引
    • str.indexOf('a')
    • str.indexOf('a', 5) 从索引5开始查
    • str.lastIndexOf('变')
  • 查指定位置字符 str.charAt(3)
  • 拼接 var str = str1.concat(',',str2) 不改变原字符串
  • 截取
    • str1.substr(3, 4) 从索引3开始，截取4位
    • str.substring(3, 7) 截取索引 [3,7) 的字符
  • 替换 str.replace('情','*')
  • 切割 str.split(",") 得到数组

9. Json

9.1 json概念

JSON: JavaScript Object Notation(JavaScript 对象表示法)

本质是一个字符串,是一种轻量级的数据传输格式

JSON 是存储和交换文本信息的语法，类似 XML
JSON 比 XML 更小、更快，更易解析
JSON 易于人阅读和编写。

9.2 json和xml

json        

         {"username":"张三","password":"123"}

xml

        <user>        
        <username>张三</username>
        <password>123</password>
        </user>

9.3 json和js对象的区别

作用上

        json字符串: 本质是一个格式化的字符串,可跨平台传输,一般用在网络传输上

        js对象:本质是一个对象(类的实例),不能在网络上传输

语法上

        json字符串:属性名必须加双引号

        js对象:属性名可以不加引号

9.4 json和js对象的转换

json字符串-->js对象 JSON.parse()

        var jsonStr = '{"name":"张三","age":23}'
        console.log(JSON.parse(jsonStr));

js对象-->json字符串 JSON.stringify

        var jsObj = { name:'张三', age:23 }
        //js对象-->json字符串 JSON.stringify
        console.log(JSON.stringify(jsObj));

10. DOM 文档对象模型

10.1 概念

网页加载时，浏览器创建页面的文档对象模型（树形结构）：document文档 > 根标签（HTML）> > >

DOM作用

  • 访问HTML文档元素
  • 改变HTML元素、属性
  • 改变CSS样式
  • 对事件做反应

操作思想

将页面的所有组成部分（标签、属性、标签体、注释）抽取为对象，用对象操作方式操作

（对象有属性和方法，比单纯操作字符串方便）

Document 对象

  • js的一个内置对象,直接写就能用
  • 浏览器载入 HTML 文档, 就会成为 Document 对象
  • 是 HTML 文档的根节点，包含整个页面的元素，使我们可以从脚本中对 HTML 页面中所有元素进行访问

10.2 document

结构

        元素（属性节点 + 文本节点）

获取元素对象

   document.getElementById("id")

   document.getElementsByTagName("img") 返回带有指定标签名的对象集合。

   document.getElementsByClassName("p1") 返回文档中所有指定类名的元素集合

H5新增

   document.querySelector("#id")

   document.querySelectorAll("#id") 返回文档中匹配的CSS选择器的所有元素节点列

操作属性

        var img = document.querySelector('img');
        img.src = './img/on.gif' //元素对象.属性名 = 属性值

操作标签体

        innerHTML（有样式）document.querySelector('#d2').innerHTML

        innerText（操作纯文本）document.querySelector('#d2').innerText

操作样式

        一次设置一种样式 （元素对象.style.属性名称 = 属性值）

                var div = document.querySelector('div');
      div.style.width = '200px';

        批量设置样式（元素对象.className = class属性值）

                var div = document.querySelector('div');
      div.className = 'div c2';

10.3 节点操作

创建元素节点 document.createElement("hr")

创建属性节点

创建文本节点

添加节点

        element.insertBefore()

      ul.insertBefore(addNode, ul.firstChild);

        element.appendChild()

                var hr = document.createElement("hr");
                var body = document.quertySlector("body");
      body.appendChild(hr);

删除节点

        body.removeChild(del);

10.4 元素方法

自动获取焦点 input.focus();

相当于事件名去掉 on

10.5 事件

HTML DOM 事件对象 | 菜鸟教程

三要素

        事件源（按钮）

        事件（点击）

        事件处理程序（弹出消息）

三步骤

        事件源（按钮）

        监听器（函数） function myClick(){ }

        用属性绑定监听器与事件源

                var btn = document.querySelector("button");
                btn.onclick = myClick;
                //函数名代表整个函数，加()代表执行函数

                var btn = document.querySelector("button");
                btn.onclick = function () { }

                <button οnclick="myClick()"></button>

鼠标事件

        onclick

        onmouseover 鼠标经过

        onmouseout 鼠标移出

        onmousedown 鼠标按下

        onmouseup 鼠标松开

键盘事件

        onkeyup 松开

        onkeydown 按下 不区分大小写

        onkeypress 按下 不能识别ctrl, shift等功能键, 区分大小写

表单事件

        onchange 表单元素的内容改变( <input>, <keygen>, <select>, 和 <textarea>)

        oninput 元素获取用户输入

        onsearch 用户向搜索域输入文本时触发

        onselect 用户选取文本时触发 ( <input> 和 <textarea>)

        onblur 失去焦点

        onfocus 获得焦点

事件注册

  btn.addEventListener('click', function(e) { })

                event： 事件名，去掉on

                可以为同一个事件添加多个方法

事件对象

        domObj.addEventListener('click', function(e) { console.dir(e) })

  e.target 触发事件的对象 e.target.innerHtml

                e.target === this（非箭头函数）

  e.type 事件类型

  e.keyCode 哪个键

                onkeydown 不区分大小写

                onkeypress 区分大小写

  e.preventDafult() 阻止默认行为

                document.querySelector('a').onclick = function(e){
                e.preventDefault() //阻止a标签的默认跳转
                }

  e.stopPropagation() 阻止冒泡 阻止事件从子到父的传递

11. BOM

11.1 概念

浏览器对象模型(Browser Object Model)

11.2 作用

使用 JavaScript 操作浏览器

如：弹框,新建一个窗口,跳转到其他窗口,实现定时操作

11.3 操作思想

将浏览器的各个组成部分抽成对象,以面向对象的方式来操作(对象有属性和方法),提高开发效率

11.4 组成

window对象

概念

        窗口对象 浏览器窗口

        包含页面中的很多东西(变量,函数,弹框,document等)

        包含document,location,history,navigator等对象

  window.onload = function(){ } //页面加载完后就调用匿名函数

定时器

定时一次

setTimeout(function () { }, 1000) //单位：毫秒，1000 = 1s

        setTimeout(f1, 1000)

        setTimeout('f1()', 2000)

        清除 clearTimeout()

                var timer = setTimeout(f1, 1000);
                clearTimeout(timer);

循环定时

  setInterval(function( ){ }, 1000)

        清除 clearInterval()

                var timer = setInterval(function () { }, 1000);
                clearInterval(timer)

弹框相关

        alert()

        prompt() 输入值 并取回

        confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框，返回布尔值

location对象

        概念： 地址栏对象，获得当前页面URL，并把浏览器重定向到新的页面。可以刷新和跳转

        属性： url地址 location.href = 'http://wwww.baidu.com';

        方法： 刷新 location.reload();

history

        历史记录对象 包含浏览器历史

        方法

        返回上页：

     history.back()

     history.go(-1) //加载历史列表中某页

screen

        屏幕对象 包含有关用户屏幕的信息

navigator

        浏览器对象 包含有关访问者浏览器的信息

假以时日♪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript笔记
2301_80250017的博客
03-16 880
1. JavaScript是Web开发领域中的一种强大的编程语言，主要用于开发交互式的网页。我们在计算机，手机等设备上浏览的网页，其多数交互逻辑都可以通过JavaScript实现。下面介绍HTML，CSS，JavaScript的区别2.JavaScript是由ECMAScript，DOM，BOM3.JavaScript初体验像这样使用，在网页打开时会弹出一个警告框，内容为Hello JavaScript。
JavaScript笔记（全）
程序猿小九九的博客
06-04 6163
JavaScript是一门世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScriptECMAScript可以理解为JavaScript的一个标准最新版本已经到es6但是大部分浏览器还只停留在支持es5代码上开发环境~线上环境，版本不一致内部标签 外部引入我的第一个JavaScript程序.html qj.js 03、浏览器控制台使用 04、数据类型快速浏览 变量 numberjs不区分小数和整数，number 字符串‘abc’“abc”布尔值truefalse逻辑运算 比较运算符 这
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
Javascript笔记
02-12
本笔记将深入探讨JavaScript的核心概念、语法、特性以及常见应用。 一、基础概念 JavaScript是网景公司的Brendan Eich在1995年开发的，最初被命名为LiveScript。由于Java的流行，后来更名为JavaScript，但两者并无...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1166
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 480
【代码】博客前端项目学习day03——框架页。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 797
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
react 快速入门思维导图
weixin_44565776的博客
07-18 314
只要掌握了这些react技能，基本就可以熟练使用react了
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 225
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 237
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 660
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
thinkphp8结合layui2.9 图片上传验证
最新发布
quweiie的专栏
07-21 90
thinkphp8图片上传的验证
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 1190
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 308
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

假以时日♪

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

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

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

打赏作者

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

抵扣说明：

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

余额充值