JavaScript详细笔记

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量60 收藏
点赞数
文章标签： javascript java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51227224/article/details/120453799
版权

JavaScript入门篇

丝快pt

一、介绍

  1. 专门在浏览器编译执行的语言
  2. 处理用户与浏览器之间请求问题
  3. 采用弱类型编程风格对面对对象思想进行实现

  • 强类型编程语言风格

    • 对象行为收到修饰类型的严格约束
    • java

  • 弱类型编程语言风格

    • 不受流失类型的约束
    • 可以调属性和方法
    • JavaScript

二、第一例

<!--html文件-->
<head>
<script type="text/javascript" src="script.js"></script>    
</head>
<body>
    <input type="button"value="按下" onclick="fun()">
</body>

<!--
	在script.js文件下 写下 代码 
	不用写<script></script>
-->
function fun() {
    window.alert("你瞅瞅啥!!!")
}

  • type=“text/javascript” 必须声明

    • 通知浏览器解析script标签 需要文本编辑器与javaScript编译器

  • script可以在html文件任意位置存在

  • 可以结尾；也可以省略

三、变量声明格式

//命令格式
//var代替了原来java语法中的数据类型
//命名格式 声明格式与java一样

四、数据类型

4.1 基本数据类型

  • number 数字类型 ：整数和小数
  • string 字符串类型：字符和字符串
  • boolean 布尔类型：true false

4.2 高级引用数据类型

  • Object：通过构造方法生成的对象
  • function：函数方法

4.3 动态类型变化

  • javascript 是弱语言 根据变量的赋值内容来决定数据类型
  • 赋值改变 可以动态改变类型

4.4 特殊值

  1. undefined：默认值 没有被赋值时 返回类型【undefined】但不算一个类型
  2. null：表示对象引用了一个空内存 不能存储 读取【Object类型】
  3. NAN：非法数字 【number类型】
  4. infinity：无穷大数字 【number类型】

4.5 获取类型

typeof 数据

五、 流程控制语句与java完全一致

六、函数声明调用

6.1 命令格式：

function 函数名(参数名){
    javascript命令行
    return 返回值
}

6.2 注意

  1. 必须function声明
  2. 禁止写返回类型
  3. 禁止写形参类型
  4. 有返回值 用return

6.3 函数调用

  1. 浏览器不会自动调用函数
  2. 可以用命令行调用
  3. 绑定HTML标签上的监听事件【onclick】通知浏览器执行
<input type="button"value="按下" onclick="函数名()">

JavaScript应用篇

一、介绍

1.1 作用

帮助浏览器对用户提出请求进行处理

1.2 DOM对象

  • 文档模型对象

1.3 DOM对象生命周期

  1. 浏览器接收到html文件 将标签加载到浏览器缓存中

    每加载一个标签 生成一个对应的DOM对象

  2. 浏览器关闭会销毁缓存中DOM对象

  3. 请求其他新资源文件会覆盖原有DOM对象

1.4 document对象生命周期

  1. 浏览器在所有标签加载完毕后 在内存中用树状结构存储DOM对象

    ​ 树状结构生成完毕 会生成一个document对象进行管理这颗DOM树

  2. 一个浏览器（一个窗口一个）运行只会生成一个document对象

  3. 浏览器关闭会销毁document对象

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

1.5 通过document对象定位DOM对象方式

  1. 根据html标签id属性定位DOM对象

    var 属性名 = document.getElementByID("id属性名");

  2. 根据html标签name属性定位DOM对象

    var 属性名 = document.getElementByName("name属性名");

  3. 根据html标签类型定位DOM对象

    var 属性名 = document.getElementByTagName("标签类型名");

1.6 浏览器缓存图

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

二、DOM对象对HTML标签属性操作

2.1 value属性

DOM对象.value

2.2 样式属性

DOM对象.style.样式属性

2.3 状态属性

//状态属性都是boolean类型//disabled 当前标签不可用//checked 表示标签是否选中 只存在radio标签与checkbox

2.4 双目标签中的文字显示

//innerText 只能写入文本//innerHtml 能写入HTML标签

三、监听事件

3.1 监听事件

  • 监听用户何时以何种方式对当前标签进行操作
  • 监听到相关行为 通知浏览器调用对应的JavaScript函数处理

3.2 监听分类

  1. 监听何时使用鼠标操作当前标签
  2. 监听何时使用键盘操作当前标签

3.3 鼠标操作当前标签

  1. onclick：【单击】标签鼠标
  2. onmouseover：【悬停】标签上方
  3. onmouseout：【移开】标签上方
  4. onfocus：【获得光标】通过鼠标
  5. onblur：【丢失光标】通过鼠标

3.4 键盘操作当前标签

  1. onkeydown：【按下键盘】
  2. onkeyup：【弹起键盘】

3.5 onload监听事件

  • 浏览器是自上而下解析标签
  • 还没加载完DOM对象 没法得到对象
  1. 作用：监听浏览器何时将标签加载完毕
  2. 意义：onload可以调用函数 对标签进行处理 就不会出现找不到DOM对象的问题
<script type="text/javascript">    function fun(){    		}</script><body onloocd="fun()">    </body>

3.6 监听事件与HTML标签之间绑定

  1. 前提：同一个监听事件绑定多个HTML标签
  2. 命令格式：DOM对象.监听事件名 = 函数 【不能有括号】

要用onload属性 直接调用

四、项目介绍在这里插入图片描述

JavaScript高级篇

一、函数属性arguments

1.1 介绍

  1. 每个函数都有一个arguments属性 是一个数组
  2. 函数调用时 把实参传入数组中 在由数组传入形参
  3. 增加函数调用灵活性
  4. 只能在函数内使用

1.2 实参传形参图

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

二、function类型对象

2.1 介绍

  1. function类型是JavaScript的高级数据类型
  2. 一个function对象管理一个具体函数

2.2 function类型对象声明方式：

  1. 标准声明方式：

    function 函数对象名(参数,参数){    命令}

  2. 匿名声明方式：

    var 函数对象名 = function (参数,参数){命令}

2.3 function类型对象的创建时机

浏览器加载

第一次加载，将script标签所有的标准声明对象进行创建

第二次加载，将script标签所有的命令行按自上而下的

三、局部变量与全局变量

3.1 局部变量

  1. 定义：在函数内部 通过var声明的变量
  2. 特征：只能在函数内部使用，不能在函数外使用

3.2 全局变量

  1. 定义：全局变量可以在HTML文件中所有函数中使用

    ​ 全局变量被声明时，自动分配给window对象作为属性

  2. 声明全局变量；

    一：在script标签下，通过var声明的变量，就是全局变量

    二：在函数执行体内，没有通过var修饰符修饰的变量也是全局变量

    ​ 但函数要被调用才会执行

四、Object类型对象特征

4.1 定义

  • 通过构造函数生成的对象其数据类型都是Object类型

4.2 特性

  • 对象创建完毕，可以任意添加或移除属性与方法

4.3 属性维护

  1. 添加属性：对象.属性名 = 值

    添加函数：对象.函数名 = function （参数名）{命令}

  2. 添加属性：对象[“属性名”] = 值

    添加函数：对象[“函数名”] = function （参数名）{命令}

  3. 移除属性 函数

    delete 对象.属性名或函数名

五、自定义构造函数

5.1 命令

function 函数对象名(){	}

5.2 调用

var Object对象名 = new 函数对象名()

5.3 普通函数与构造函数区分

  1. 没有调用前无法区分

  2. 普通：var 名 = 函数对象名（）

  3. 构造：var 名 = new 函数对象名（）

  4. 返回值：普通函数运行结束 return运算结果返回

    构造调用 直接返回Object类型对象 return直接失效

六、JavaScript中this指向

  1. 构造函数，this指向当前构造函数生成的Object对象
  2. 在普通函数，this指向调用当前函数的实例对象
fun();//直接调用 this是指window这个对象

七、JSON

​ Z省 对象

  1. 前提：javaScript得到Object对象

    ​ 构造方法生成

    ​ JSON数据描述格式生成：获取Object类型对象简化版

  2. 标准命令格式：

    var obj =	{"属性名":值,"属性名":值,					"函数名":function (){}}

  3. JSON数组

    var obj = [	{"属性名":值,"属性名":值,"函数名":function (){}},	{"属性名":值,"属性名":值,"函数名":function (){}}]

八、JSON实现服务端与javaScript之间通信

String 名 = “{\"属性名\":值,\"属性名\":值,\"函数名\":function (){}}”;//写入请求体作用域 请求转发 使用EL表达式

185-187 笔记等

筑梦##
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript笔记
2301_80250017的博客
03-16 867
1. JavaScript是Web开发领域中的一种强大的编程语言，主要用于开发交互式的网页。我们在计算机，手机等设备上浏览的网页，其多数交互逻辑都可以通过JavaScript实现。下面介绍HTML，CSS，JavaScript的区别2.JavaScript是由ECMAScript，DOM，BOM3.JavaScript初体验像这样使用，在网页打开时会弹出一个警告框，内容为Hello JavaScript。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4586
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
郑德帅
12-17 1万+
1..什么是JavaScript? 客户端的解释性脚本语言.与Java之间不存在任何关系; 2.JavaScript的语法结构，声明与引入 <script type="text/javascript">...</script> <script type="text/javascript" src="JS文件路径及名称"></scrip...
JavaScript 笔记部分导航
GoldenaArcher的博客
05-28 755
重新学习了一下，可以算是用自己的语言重新组织了一下上面的笔记，并且增添了自己写的一个小案例，感觉现在才算是对 iterator 和 generator 稍微入门一些了。看了看也快 50 篇笔记了，稍微整理一下写了点什么，之后复习的时候也方便找内容。一个整合，第 5 章的内容是基本引用类型，其中一部分内容拆成不同的笔记了。array，map & set 部分内容因为内容量的关系，也单独拆了出来。其实这里的内容，语句里面都提过，然后忘了。暂时归类到这里，等红宝书过到这里再看看要不要修改……
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 2946
JavaScript高级 学习笔记总结
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5560
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
JavaScript笔记（全）
程序猿小九九的博客
06-04 6108
JavaScript是一门世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScriptECMAScript可以理解为JavaScript的一个标准最新版本已经到es6但是大部分浏览器还只停留在支持es5代码上开发环境~线上环境，版本不一致内部标签 外部引入我的第一个JavaScript程序.html qj.js 03、浏览器控制台使用 04、数据类型快速浏览 变量 numberjs不区分小数和整数，number 字符串‘abc’“abc”布尔值truefalse逻辑运算 比较运算符 这
JavaScript Math 对象笔记
Mr_Bobcp的博客
11-16 1万+
目录定义属性和方法Math对象属性Math对象方法例子 定义 Math 对象主要是为了方便解决数学上的常见但不常规的计算，属性包含如圆周率这类特定数值，方法包含如取绝对值这类计算。 Math对象的使用就是调用函数把返回值赋给变量，不需要实例化。 属性和方法 Math对象属性 属性 描述 数学表达 数值大小 E 自然指数 e 2.71828… LN2 2的自然对数 ln2 0.69314… LN10 10的自然对数 ln10 2.30258… LOG2E 2为底数，e的对数 log
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript使用笔记
qq_45217345的博客
02-23 5189
使用JS 截取数组的某个属性，组成新的数组. 实例 //原数组 arr1 = [ 　　{id: "1", age: "34"}, 　　{id: "2", age: "46"}, 　　{id: "3", age: "7"}, 　　{id: "4", age: "25"} ] //新数组 arr2 = ["1", "2", "3", "4"] 方法一：使用forEach 遍历数组 let arr2 = [] arr1.forEach(item => { arr2.push(item.id)
javascript 详细笔记
09-22
很不错的js学习笔记，相信能让你收获很大。
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
javascript高级 笔记
03-06
这份"javascript高级 笔记"涵盖了从JavaScript基础进阶到高级特性的深入理解，旨在帮助那些已经掌握了JavaScript基础知识的学习者进一步提升技能。 一、JavaScript高级特性 在JavaScript高级阶段，你会接触到许多...
JavaScript笔记
11-14
长期以来做的比较简单的笔记，有了一些经验就补补，相当于给自己一个记忆
javascript笔记.pdf
11-28
javascript笔记.pdf
ES6 新特性有哪些
weixin_64684095的博客
07-06 768
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1273
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 182
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 196
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
javascript typora笔记
09-27
Typora是一款支持JavaScript语言的笔记软件。它提供了强大的编辑功能和良好的用户界面，使得编写和管理笔记变得简单和高效。 首先，Typora支持JavaScript脚本语言，这意味着用户可以使用JavaScript编写自定义功能和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值