广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了包括JavaScript简单入门、JavaScript基础语法等等整理的知识点,希望对大家有帮助。
相关推荐:javascript教程
一、JavaScript简单入门1.1.一门客户端脚本语言运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言:不需要编译,直接就可以被浏览器解析执行了 功能:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验
1.2.JavaScript发展史1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript 1996年,微软抄袭JavaScript开发出JScript语言 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)登录后复制1.3.JavaScript优势
1.4.JavaScript引用a.解释性语言 b.基于对象 c.事件驱动 d.弱类型 e.安全性高 f.跨平台
如需在 HTML 页面中插入 JavaScript,请使用 <script>
标签。<script> 和 </script>
会告诉 JavaScript 在何处开始和结束。<script> 和 </script>
之间的代码行包含了 JavaScript
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>登录后复制1.5.JavaScript输出的几种方式
window.alert()document.write()innerHTMLconsole.log()登录后复制
就个人使用来看 console.log()
在编程中使用是较多切方便的 直接F12控制台即可查看输出内容
1.8.JavaScript常见标识符有哪些1.9.JavaScript常见HTML事件有哪些1.10.JavaScript常见运算符1.11.JavaScript常见赋值运算符1.12.JavaScript常见比较运算符1.13.JavaScript常见逻辑运算符二、细讲JavaScript基础语法2.1.变量2.1.1.定义一个变量// 这是代码:单句注释,在编辑器一般是ctrl + L键。 /* 这是代码 */:多行注释,在编辑器一般是ctrl + shift + L键。
// 声明一个变量名为test的变量。var test;登录后复制
var age, name, sex;//声明age、name、sex三个变量登录后复制
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";登录后复制2.1.2.变量命名规则及规范
2.2.数据类型1、由字母、数字、下划线、符号组成,不能以数字开头 2、不能使用关键字,例如:while 3、区分大小写 规范:约定俗成的写法 1、变量名要有意义. 2、遵守驼峰命名法,驼峰命名法:首字母小写,后面单词首字母大写,例如userName.
其中数据类型有:Number类型、String类型、Boolean类型、Undefined类型、Null类型、Object类型
Number数字类型:包含整数和小数 可以表示:十进制、八进制、十六进制
如:
var num = 10; //十进制var num1 = 012; //八进制var num2 = ox123; //十六进制登录后复制
数值范围:
console.log(Number.MAX_VALUE); //最大值 值为5e-324console.log(Number.MIN_VALUE); // 最小值 值为1.7976931348623157e+308无穷大:Infinity无穷小:-Infinity登录后复制
数值判断不可以用小数验证小数以及不要用NaN验证是不是NaN (NaN----not a number) 但是可以用isNaN— is not a number结果是不是NaN 如:
var num; //声明一个变量,未赋值console.log(isNaN(num)); // true 不是一个数字吗? 结果是true登录后复制2.2.2.String
字符串转义符:
eg:
var str = "iam a pm\\"console.log(str); // iam a pm\登录后复制
字符串拼接:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>0登录后复制
若是字符串和数字拼接 结果也是字符串 拼接效果如上所示
2.2.3.Boolean布尔类型的话两个属性 true/false
undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>1登录后复制2.2.5.Null
Null表示一个空,变量的值如果想为null,必须手动设置
2.2.6.Object2.3.数据类型的转换2.3.1.转换成数值类型(1)、Number()可以把任意值转换成数值,如果要转换的字符串中有一个不是数值的字符,返回NaN 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>2登录后复制
(2)、parseInt()转整数 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>3登录后复制
(3)、parseFloat()转小数 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>4登录后复制
(4)、Number()、parseInt()、parseFloat()三者的区别 Number()要比parseInt()和parseFloat()严格. parseInt()和parseFloat()相似,parseFloat会解析第一个. 遇到第二个.或者非数字结束
2.3.2.转换成字符串类型(1)、toString() 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>5登录后复制
(2)、String() 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>6登录后复制
(2)、JSON.stringfy()
2.3.3.转换成布尔类型0、空字符串、null 、undefined 、NaN 会转换成false 其它都会转换成true 如:
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>7登录后复制2.4.运算符
运算符种类:算数运算符、复合运算符、关系运算符、逻辑运算符
(1)、算数运算符:“+”“-”“*”“/”“%” 算数运算表达式:由算数运算符连接起来的表达式 复合运
(2)、复合运算符:“+=”“-=”“*=”“/=”“%=” 复合运算运算表达式:由复合运算符连接起来的表达式
(3)、关系运算符:“>”“<”“>=”“<=”“”“=”“!=”“!==” 关系运算表达式:由关系运算符连接起来的表达式
(4)、逻辑运算符:“&&”“||”“!” 逻辑运算表达式:由逻辑运算符连接起来的表达式
表达式1 && 表达式2 如果有一个为false,整个的结果就是false
表达式1 || 表达式2 如果有一个为true,整个的结果就是false
2.5.运算符的优先级! 表达式 表达式的结果是true,整个的结果为false 表达式的结果是false,整个的结果为true
由高到低:
2.6.函数2.6.1.简介() 优先级最高 一元运算符 ++ – ! 算数运算符 先* / % 后 + - 关系运算符 > >= < <= 相等运算符 == != === !== 逻辑运算符 先&& 后|| 赋值运算符
JavaScript中的函数就是对象。对象是“名/值”对的集合并拥有一个连到原型对象的隐藏连接。对象字面量产生的对象连接到Object.prototype。函数对象连接到Function.prototype(该原型对象本身连接到Object.prototype)。每个函数在创建时会附加两个隐藏属性:函数的上下文和实现函数行为的代码
2.6.2.函数使用<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>8登录后复制
语法: 圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, …)
由函数执行的代码被放置在花括号中:{}
<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>9登录后复制
函数参数(Function parameters)是在函数定义中所列的名称。 函数参数(Function arguments)是当调用函数时由函数接收的真实的值
函数的调用:
window.alert()document.write()innerHTMLconsole.log()0登录后复制
立即执行函数:
window.alert()document.write()innerHTMLconsole.log()1登录后复制2.7.JavaScript正则表达式2.7.1.创建正则表达式
字面量。语法:Reg = /pattern/modifiers;
字面量的正则由两个正斜杆组成//,第一个正斜杆后面写规则:/pattern[规则可以写各式各样的元字符|量词|字集|断言…]。第二个正斜杆后面写标识符/modifiers[g全局匹配 | i忽略大小写 | m换行匹配 | ^起始位置 | $结束位置] 标识符。 var Reg = /box/gi; 构造函数。语法 Reg = new RegExp( pattern , modifiers );
pattern ,modifiers此时是字符串。何种方法创建都是一样的,pattern 模式 模板,要匹配的内容,modifiers 修饰符。
window.alert()document.write()innerHTMLconsole.log()2登录后复制2.7.2.String中正则表达式方法
window.alert()document.write()innerHTMLconsole.log()3登录后复制2.7.3.RegExp对象的方法
修饰符也称作标识符,可指定匹配的模式,修饰符用于执行区分大小写和全局匹配。 i忽略大小写匹配。 g全局匹配,没有g只匹配第一个元素,就不在进行匹配。 m执行多行匹配
window.alert()document.write()innerHTMLconsole.log()4登录后复制2.7.5.元字符
在正则表达式中具有特殊意义的专用字符。 特殊的转译字符. \ /。
window.alert()document.write()innerHTMLconsole.log()5登录后复制
window.alert()document.write()innerHTMLconsole.log()6登录后复制2.8.JavaScript常用对象2.8.1.Date对象
2.8.2.String对象Date对象是一个有关日期和时间的对象。它具有动态性,必须试用new关键字创建一个实例,如: var Mydata=new Date(); Date对象没有提供直接访问的属性,只有获取和设置日期的方法,如下表
2.8.3.Math对象String对象是JavaScript提供的字符串处理对象,创建对象实例后才能引用,它提供了对字符串进行处理的属性和方法(类似java一样)具体如下表: 属性 length —返回字符串中字符的个数。 注意:一个汉字也是一个字符!!
属性: Math对象方法:
三角函数(sin(), cos(), tan(),asin(), acos(), atan(), atan2())是以弧度返回值的。可以通过除法Math.PI / 180把弧度转换为角度,也可以通过其他方法来转换。
例子1:写一个函数,返回从min到max之间的随机整数,包括min不包括max
window.alert()document.write()innerHTMLconsole.log()7登录后复制
例子2:写一个函数,生成一个长度为 n 的随机字符串,字符串字符的取值范围包括0到9,a到 z,A到Z
window.alert()document.write()innerHTMLconsole.log()8登录后复制2.8.4.数组对象
数组的分类** 1、二维数组,二维数组的本质是数组中的元素又是数组。
window.alert()document.write()innerHTMLconsole.log()9登录后复制
2、稀疏数组
稀疏数组是包含从0开始的不连续索引的数组。在稀疏数组中一般length属性值比实际元素个数大(不常见) 举例
// 声明一个变量名为test的变量。var test;0登录后复制
数组对象属性
1.length属性:
// 声明一个变量名为test的变量。var test;1登录后复制
2.prototype 属性
prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。 objectName.prototype objectName 参数是object对象的名称。 说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。 对于数组对象,用以下例子说明prototype 属性的用途。 给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
// 声明一个变量名为test的变量。var test;2登录后复制
3.constructor 属性
constructor 属性表示创建对象的函数。 object.constructor //object是对象或函数的名称。 说明:constructor 属性是所有具有prototype 的对象的成员。它们包括除 Global 和 Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。
例如:
// 声明一个变量名为test的变量。var test;3登录后复制
Array的对象方法 说明:部分是ECMAScript5的新特性(IE678不支持)
主要对一些新特性进行讲解
concat concat作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat不会修改原数组。
例如:
// 声明一个变量名为test的变量。var test;4登录后复制
slice slice(a,b)a和b可以取负数,表示从a位置开始截取到b位置的一段数组,是一个左闭右开的区间,a和b可以取负数,如果是负数代表倒数第a/b个元素
// 声明一个变量名为test的变量。var test;5登录后复制
splice splice删除元素并向数组添加新元素 object.splice(a)从左边开始删除a个元素 object.splice(a,b)从a位置开始截取其中的b个元素 object.splice(a,b,c,d)从a位置开始截取b个元素,并将c和d或者更多的元素插入原数组 需要注意的是splice会修改原数组
// 声明一个变量名为test的变量。var test;6登录后复制
foreach foreach()函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身
// 声明一个变量名为test的变量。var test;7登录后复制
reduce() Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:
// 声明一个变量名为test的变量。var test;8登录后复制
// 声明一个变量名为test的变量。var test;9登录后复制
数组和一般对象的比较
数组和字符串的比较
用于把js对象序列化为JSON字符串
var age, name, sex;//声明age、name、sex三个变量0登录后复制
stringify()
除了可以接受对象外,还可以接受2个参数,第一个参数是过滤器,可以是对象属性的数组集合,也可以是函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进
数组过滤器:
var age, name, sex;//声明age、name、sex三个变量1登录后复制
函数过滤器:
var age, name, sex;//声明age、name、sex三个变量2登录后复制
注意,如果函数返回undefined,则该属性就会被忽略;
字符串缩进:
var age, name, sex;//声明age、name、sex三个变量3登录后复制2.9.2.toJSON()
向对象添加toJSON()方法:
var age, name, sex;//声明age、name、sex三个变量4登录后复制2.9.3.parse()
parse()除了接受json字符串外,也可以接受一个函数参数。该函数接受2个值,一个键和一个值;
var age, name, sex;//声明age、name、sex三个变量5登录后复制2.10.Ajax2.10.1.创建步骤:
1.创建一个XMLHttpRequest异步对象 2.设置请求方式和请求地址 3.接着,用send发送请求 4.监听状态变化 5.最后,接收返回的数据
例:
var age, name, sex;//声明age、name、sex三个变量6登录后复制2.10.2.ajax在jQuery中的应用
var age, name, sex;//声明age、name、sex三个变量7登录后复制2.10.3.GET方法
结构
var age, name, sex;//声明age、name、sex三个变量8登录后复制
参数解释:
var age, name, sex;//声明age、name、sex三个变量9登录后复制2.10.4.POST方法
它与$.get( )方法的结构和使用方式都相同,不过之间仍然有一下区别
2.10.5.get与post区别2.11.Cookie2.11.1.js中cookie的读取操作1.post的安全性高于get;如果以get方式请求,请求参数会拼接到url后面,安全性性低,以post方式请求,请求参数会包裹在请求体中,安全性更高 2.数量区别:get方式传输的数据量小,规定不能超过2kb,post方式请求数据量大,没有限制。 3.传输速度:get的传输速度高于post 因为使用方法相同,因此只要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";0登录后复制2.11.2.cookie简单存储操作
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";1登录后复制2.11.3.cookie设置过期时间
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";2登录后复制2.11.4.cookie修改
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";3登录后复制2.11.5.cookie删除
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";4登录后复制2.12.循环2.12.1.for循环
for是最常用的循环,主要用来循环数组
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";5登录后复制2.12.2.Array.forEach()
语法:arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
callback为数组中每个元素执行的函数,该函数接收三个参数,currentValue(数组中正在处理的当前元素),index(数组中正在处理的当前元素的索引),array(forEach() 方法正在操作的数组)
thisArg为当执行回调函数 callback 时,用作 this 的值。
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";6登录后复制
2.12.3.whileforEach() 为每个数组元素执行一次 callback 函数 那些已删除或者未初始化的项将被跳过(例如在稀疏数组上) 与map()和reduce()不同的是,它没有返回值,总是返回undefind。 forEach()除了抛出异常以外,没有办法中止或跳出 forEach() 循环。
while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环
示例:
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";7登录后复制
注:使用break语句在condition计算结果为真之前停止循环
2.12.4.do…whiledo…while 语句创建一个执行指定语句的循环,直到condition值为 false。在执行statement 后检测condition,所以指定的statement至少执行一次
示例:
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";8登录后复制2.12.5.for…in
for…in循环可以用来遍历对象的可枚举属性列表(包括[[Prototype]]链)
主要用于遍历对象,通过属性列表可以获取属性值
//同时声明变量并赋值var age = 10, name = "小强", sex = "1";9登录后复制
相关推荐:javascript学习教程
以上就是爆肝归纳JavaScript学习知识点的详细内容,更多请关注9543建站博客其它相关文章!
发表评论