JavaScript详解
2021/7/10 17:09:31
本文主要是介绍JavaScript详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- JavaScript
- 简介
- JS的特点
- JS的组成
- HTML与JavaScript的结合方式
- 行内脚本
- 内部脚本
- 外部脚本
- JavaScript的使用
- 变量
- 自动类型转换
- 数据类型转换函数
- null & undefined
- 算术运算
- 关系运算
- 逻辑运算
- 控制语句
- 常用字符串API
- 数组
- 初始化数组的三种方式
- 数组的常用方法
- Math数学对象
- number对象
- 正则表达式
- 日期对象
- 函数
- 参数对象
- 构造函数
- 匿名函数
- 全局函数
- 闭包
- 弹框输出
- DOM操作
- DOM访问
- DOM修改
- 事件
- 窗口事件 (Window Events)
- 表单元素事件 (Form Element Events)
- 鼠标事件 (Mouse Events)
- 键盘事件
- 事件冒泡
- 事件捕获
- JSON
JavaScript
简介
- 虽然java作为前缀,但java和javascript的关系,就像老婆和老婆饼之间的关系,也就是没有任何关系…
- 网景公司在Netscape2.0首先推出了JavaScript
- JavaScript 的正式名称是 “ECMAScript”,此标准由 ECMA 组织发展和维护,简称“js”
- JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为
- JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释执行代码,不进行预编译
JS的特点
- 解释执行:事先不编译,逐行执行
- 基于对象:内置大量现成对象
- 常用于:
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作
JS的组成
- ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
- DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
- BOM:浏览器对象模型,对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX对象,进而实现ajax局部刷新技术
HTML与JavaScript的结合方式
行内脚本
- 点击按钮(触发)
- 弹框(具体的操作)
<button onclick="alert('弹框测试')">点我一下</button>
内部脚本
- 使用<script></script>
- 标准是写在head和body之间(脖子位置),但其实只要写在html文件内部就可以,无论什么位置,<html>外,<p></p>内部,都可以。
<body> <script> alert("弹框提示"); </script> </body>
外部脚本
- 在项目根目录下创建一个目录js
- 在js目录中创建一个文件,后缀名是.js
- 在html页面中,使用:
<script src="js/xx.js"></script>
- 注意事项:因为是解释性语言,所以以上三种使用脚本的方式没有优先级之分,在上面的优先执行。
JavaScript的使用
变量
- 因为js是弱类型语言,所以在定义变量的时候,所有的数据类型都是var
- 声明变量: var x ; var x,y;
- 数值类型:number
- 不区分整型数值和浮点型数值
- 所有数字都采用 64 位浮点格式存储,类似于double 格式
- 字符串:string
- 首尾由单引号或双引号括起
- 布尔类型:
- 仅有两个值:true和false也代表1和0
- 实际运算中true=1,false=0
自动类型转换
数字 + 字符串:数字转换为字符串 10 + 'a' -> 10a 数字 + 布尔值:true转换为1,false转换为0 true + 5 -> 6 字符串 + 布尔值:布尔值转换为字符串true或false true + 'a' -> truea 布尔值 + 布尔值:布尔值转换为数值1或0 true + true -> 2
数据类型转换函数
- parseInt:强制转换成整数
- 如果不能转换,则返回 NaN (NaN:代表非数字值的特殊值。该属性用于指示某个值非数字)
- 例如:parseInt(“6.32”)=6
- parseFloat:强制转换成浮点数
- 如果不能转换,则返回 NaN
- 例如:parseFloat(“6.32”)=6.32
- typeof:查询数值当前类型,返回 string / number / boolean / object
- 例如:typeof(“test”+3)==“string”
null & undefined
- null 在程序中代表“无值”或者“无对象”
- 可以通过给一个变量赋值 null 来清除变量的内容
- undefined
- 声明了变量但从未赋值或者对象属性不存在
算术运算
- 加(+)、 减(-)、 乘( * ) 、除( / ) 、取余( % )
- - 可以表示减号,也可以表示负号,如:x = -y
- +可以表示加法,也可以用于字符串的连接
- 递增( ++ ) 、递减( – ),同Java
- i++ 相当于 i=i+1
- i-- 相当于 i=i-1
关系运算
- 严格相等:===
- 类型、数据都相同
- 非严格相等:!==
逻辑运算
- 逻辑非(!)、逻辑与(&&)、逻辑或(||)
- 逻辑运算的操作数均为 boolean 表达式
控制语句
- 同Java
常用字符串API
- length:获取字符串的长度(字符串中字符的个数) 属性,没有小括号
- toUpperCase/toLowerCase:转换大小写
- charAt(下标):返回某个下标上的字符
- indexof(字符):查找字符串中字符出现的首次下标
- lastIndexof(字符):查找字符串中字符最后一次出现的下标
- substring(开始,结束):截取字符串中一部分(不包含结束)
- replace(旧的,新的):将字符串中的旧字符替换成新字符
- split(分割的节点):一个字符串切割成N个小字符串,所以返回的是数组类型
<script> // 获取字符串长度 var str = "hello"; console.log(str.length); // 转换大小写 var name = "AngierSun"; console.log("大写:" + name.toUpperCase()); console.log("小写:" + name.toLowerCase()); // 返回某个下标上的字符 var str1 = "javascript网页教程"; var str2 = str1.charAt(12); // 下标12上的字符 console.log(str2); // "教" var str3 = str1.charCodeAt(12); console.log(str3); // 25945:(汉字“教”在unicode编码中的编号) // 根据字符查找对应下标 var str1 = "javascript网页教程"; var str2 = str1.indexOf("a"); // a字符在str1中第一次出现的下标 console.log(str2); var str3 = str1.lastIndexOf("a"); // a字符在str1中最后一次出现的下标 console.log(str3); // 截取字符串 var str1 = "abcdefgh"; var str2 = str1.substring(2, 4); console.log(str2); // cd,从2开始(包含),4结束(不包含) // 替换字符 var str1 = "abcde"; var str2 = str1.replace("cd", "XXX"); console.log(str2); // abXXXe,将str1中的cd替换成XXX // 切割字符串,返回数组类型 var str1 = "一,二,三,四,五"; var arr = str1.split(","); // 将str1以逗号进行分割,分割成N份,返回一个数组 console.log("共分割成:" + arr.length + "份"); console.log("第三份是:" + arr[2]); // "三" </script>
数组
初始化数组的三种方式
<script> // 第一种 var arr1 = new Array(); arr1[0] = 110; arr1[1] = 119; arr1[2] = 120; // 第二种 var arr1 = new Array(10, "a", true); // 第三种 var arr1 = [10, "a", true]; </script>
数组的常用方法
- tostring():将数组转换成字符
- join(连接符号):将数组中的每个元素用连接符号连接成一个新的字符串。
- concat(新元素):在原数组的末尾添加新元素,生成一个新数组,原数组不变。
- slice(开始,结束):在数组中截取一部分,形成新的数组。(含开始,不含结束)
- reverse():将数组反转(倒序)
- sort():数组排序
- arr.sort() 字符排序
- arr.sort(func) 按自定义的func函数进行排序
// 按照数值大小进行排序 function func(a,b) { return a-b; }
Math数学对象
- Math 对象用于执行数学任务
- 没有构造函数 Math()
- 无需创建,直接把 Math 作为对象使用就可以调用其所有属性和方法
number对象
- Number.fixed(n):精确到小数点后n位(四舍五入)
正则表达式
- 此处建议面向百度编程
日期对象
<script> var time = new Date(); console.log(time); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) var year = time.getFullYear(); // 年 var month = time.getMonth() + 1; // 月(从0开始,11结束,所以国内习惯要+1) var day = time.getDate(); // 日 var hour = time.getHours(); // 时 var m = time.getMinutes(); // 分 var s = time.getSeconds(); // 秒 var ms = time.getMilliseconds(); // 毫秒(1000毫秒 = 1秒) var timestr = year + "年" + month + "月" + day + "号 " + hour + "点" + mm + "分" + s + "秒" + ms + "毫秒"; console.log(timestr); </script>
函数
- 使用关键字 function 定义函数
function 函数名( 形参列表 ){ // 函数体 return 返回值; }
- 函数声明后不会立即执行,会在我们需要的时候调用到。
- 注意事项:
- 形参不能带数据类型
- 分号是用来分隔可执行JavaScript语句的。 由于函数声明不是一个可执行语句,所以不以分号结束。
参数对象
- 在函数内部,调用参数列表的属性
arguments.length
:获取参数的个数arguments[1]
:获取下标为1的参数
构造函数
- 函数同样可以通过内置的 JavaScript 函数构造器(Function())定义
var myFunction = new Function("a", "b", "return a * b");
匿名函数
<script> var fn = function (a, b) { // 匿名函数需要用一个变量来接收 return a * 10 + b; }; console.log(fn(3, 4)); </script>
全局函数
- isNaN:检查其参数是否为非数字值
- eval:转换字符串中的运算
<script> var str = "1+3"; console.log(str); // 1+3 ,+会认定为一种字符符号,没有加法的作用 console.log(eval(str)); // 4 ,使用eval让字符串中的运算符号生效 </script>
- 转码 & 解码(常用于信息的加密)
- encodeURI(参数):转码
- decodeURI(参数):解码
闭包
- 概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。
- 作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理。
- 简单来讲:就是在函数的局部范围内声明一个封闭的环境,此环境不会被垃圾回收探测到。保证了数据的安全唯一性。
- 缺点: 使用闭包可以使函数在执行完后不被销毁,保留在内存中,如果大量使用闭包就会造成内存泄露,大量消耗内存。
弹框输出
- 普通弹框:
alert("hello");
- 控制台日志输出:
console.log("谷歌浏览器按F12进入控制台");
- 页面输出:
document.write("<h2>我爱你中国</h2>");
将<h2>元素输出到<body>中 - 确认框:
confirm("确定删除吗?");
- 输入框:
prompt("请输入姓名:");
DOM操作
- 在一个html页面中,会使用很多标签来规划制作页面。
- 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
- 如何查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一片叶子,应该怎么做?
- “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一片叶子都不是难事了
- 叶子和大树的一些启发,工程师们开会讨论就定了这个理论“文档对象模型”
- 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了
- 在节点树中,顶端节点就是根节点(root)
- 每个节点都有父节点(根节点除外)
- 任何一个节点都可以拥有任意数量的子节点
- 同胞指的是拥有相同父节点的节点
DOM访问
- 使用 document 对象来调用以下方法:
getElementById
:通过id属性获得元素节点对象getElementsByName
:通过name属性获得元素节点对象集getElementsByTagName
:通过标签名称获得元素节点对象集
DOM修改
- 修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
事件
- JS 捕获某个动作而做出的反馈
- HTML 事件的案例:
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
窗口事件 (Window Events)
- 仅在 body 和 frameset 元素中有效。
onload
当文档被载入时执行脚本
<body onl oad="test()"> <script> function test() { document.write("哈哈哈哈"); } </script> </body>
表单元素事件 (Form Element Events)
- 仅在表单元素中有效。
onblur
当元素失去焦点时执行脚本onfocus
当元素获得焦点时执行脚本
鼠标事件 (Mouse Events)
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
键盘事件
- onkeydown 按下时执行脚本
- onkeyup 回弹时执行脚本
事件冒泡
- 先子后父。事件的触发顺序自内向外。
事件捕获
- 先父后子。事件的触发顺序由外向内。
JSON
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 易于阅读和编写,同时也易于机器解析和生成。
// 格式如下: var json = { 属性1:值1, 属性2:值2, };
这篇关于JavaScript详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-22项目:远程温湿度检测系统
- 2024-12-21《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》简介
- 2024-12-21后台管理系统开发教程:新手入门全指南
- 2024-12-21后台开发教程:新手入门及实战指南
- 2024-12-21后台综合解决方案教程:新手入门指南
- 2024-12-21接口模块封装教程:新手必备指南
- 2024-12-21请求动作封装教程:新手必看指南
- 2024-12-21RBAC的权限教程:从入门到实践
- 2024-12-21登录鉴权实战:新手入门教程
- 2024-12-21动态权限实战入门指南