JavaScript入门使用
2021/6/29 17:22:04
本文主要是介绍JavaScript入门使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 01.概述
- 02.JavaScript的语法规则
- 2.1.注释变量运算符
- 2.2.JavaScript正则
- 03.javascript数组对象
- 04.javascript全局函数
- 05.javascript自定义函数
- 03.BOM对象
- 3.1.BOM对象概述
01.概述
- JavaScript是什么?有什么作用?
在前端开发中,类比: HTML:人类身体 CSS:衣服(美化) JavaScript:大脑(例如,为按钮添加功能) JavaScript是强大的脚本语言 脚本语言:无法独立运行,必须嵌套到其他语言中,结合使用,无需编译,可以被浏览器直接运行 java是编程语言,可以独立运行。(先编译,后运行)
- JavaScript的语言特征以及编程注意事项
特征: 1.无需编译,直接被浏览器解析执行 2.无法单独运行,必须嵌入到HTML代码中运行 3.由上到下依次执行 注意: 1.JavaScript没有权限访问系统里的文件 2.由于无需编译,且由上到下依次执行,所以在保证可读的情况下,允许使用链式编程 3.JavaScript和java没有任何关系
- JavaScript的组成
JavaScript的组成:ECMAScript,DOM, BOM ECMAScript(核心):规定了JS的语法和基本对象 DOM:文档对象模型,处理网页内容的方法和接口 BOM:浏览器对象模型,与浏览器交互的方法和接口
- JavaScript的引入方式
在当前页面内部写script标签,script内部即可书写JavaScript代码 格式: <script type="text/javascript"> javascript的代码 </script> 注:script标签理论上可以书写在HTML文件的任意位置 外部引入,在HTML文档中,通过<script src="">标签引入.js文件 格式:<script type="text/javascript" src="javascript文件路径"></script> 注意:当script标签中添加了src属性之后,就不要再标签内部写东西了,会被覆盖,不执行
- script标签规范化放置位置
开发规定:script标签的放置位置为,body结束标签之前 我们在开发时,可以先把脚本放到前面(方便开发),等开发结束之后再把脚本放后面 优点:保证HTML展示内容优先加载,最后加载脚本,增强用户体验性 示例: <html> <head> <meta charset="utf-8"> <title>AISMALL</title> </head> <body> <h1>先加载的网页内容</h1> <script></script> </body> </html> -->
02.JavaScript的语法规则
2.1.注释变量运算符
- 注释
注释:单行注释:// 多行注释:/**/
- 变量
变量简述:标示内存中的一块空间,用于存储数据,且数据是可变的 变量声明:var 变量名(默认值 undefined) 注意:JavaScript变量严格区分大小写 java中的变量类型有:基本数据类型,引用数据类型 JavaScript变量: 一,JavaScript基本数据类型:(5种) string :字符串(JavaScript中没有单个字符,所以双引单引号都代表字符串) boolean:布尔 number:数字类型(任意数字) null:空(一个占位符) undefined:未定义类型 注:undefined是从null中派生出来的,所以undefined==null javascript区别于java,是弱类型语言,变量的使用不用严格遵循规范, 所以一个变量声明好之后(不管什么类型的变量都用var声明),可以赋予任意类型的值 我们可以使用typeof运算符查看变量所属的数据类型 例如:alert(typeof(str1)):显示出变量的类型 注意:ECMAScript实现之初的一个bug,null属于基本数据类型, typeof(null)——>obj 二,引用数据类型 引用数据类型通常叫做类(class),但是在JavaScript中,因为不存在编译过程, 所以没有类的概念,所以处理的引用数据类型都是对象 标准创建方式: var str=new String();(和java相同) var str=new String;(JS特有)
- 运算符
大部分和java中的运算符相同: == 逻辑等,仅仅对比值 === 全等,对比值并且对比类型,当值和类型都相等返回true JavaScript的变量定义和java中不同 逻辑运算符(只有这么多,没有&): 与(&& and) 或(|| or) 非(| nor)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a; //未被定义的变量会被赋值undefined alert(a); alert(typeof(b)); var b=10; alert(b); alert(typeof(b)); </script> </body> </html>
2.2.JavaScript正则
- 参考文档链接
文档链接:https://www.w3school.com.cn/jsref/index.asp
- Javascript正则
正则对象的创建:RegExp对象的创建方式 var reg=new RegExp("表达式") (开发中基本不用) var reg=/^表达式$/; 直接量(常用) var reg=/表达式/; 普通方式 直接量中存在边界,即^代表开始,$代表结束 注:直接量检测为严格检测,全部符合才返回true,普通检测,为不严格检测, 只要字符串里能匹配到(除非一个字符都匹配不到),就返回true 在正则表达式类中一共提供了三种方法,我们一般只用到test方法 test() 方法用于检测一个字符串是否匹配某个模式 语法:RegExpObject.test(string) 如果字符串 string 中含有与 RegExpObject 匹配的文本,有则返回 true, 否则返回 false。
- 举个栗子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--js代码无需调用,直接就会被浏览器执行--> <script type="text/javascript"> var str = "Visit W3School"; var patt1 = new RegExp("W3School"); var result = patt1.test(str); document.write("Result: " + result); </script> </body> </html>
03.javascript数组对象
JS数组的特性:可以看成Java中的ArrayList集合(里面可以存放不同类型的元素) 数组中每一个成员没有类型限制,即可以存放任意类型数据 数组的长度可以自动修改 注意:java数组中只能存放同一类型数据 JS数组的四种创建方式 var arr=[1,2,3]; var arr=new Array(); 数组默认长度为零 var arr=new Array(4); 定义长度为4的数组,每个元素为undefined var arr=new Array(1,2); 数组元素为1和2 JS数组的常用属性和方法: 查看API链接:https://www.w3school.com.cn/jsref/jsref_obj_array.asp length属性: arrayObject.length 注意:在JavaScript中如果数组定义长度为4,arr[10]="10"; 数组会自动扩展到长度为11的数组,在Java中会报错 数组方法: join()方法用于把数组中的所有元素拼接成一个字符串。 元素是通过指定的分隔符进行拼接的。(不影响原数组) reverse()方法用于颠倒数组中元素的顺序。(影响原数组) 数组方法: pop() 方法用于删除并返回数组的最后一个元素。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--js代码无需调用,直接就会被浏览器执行--> <script type="text/javascript"> var arr1=new Array(4); document.write("arr: " + arr1[0]); var arr2=new Array('hello','aismall'); document.write("arr: " + arr2); var arr3=new Array('hello','aismall'); arr3.reverse(); document.write("arr: " + arr3); </script> </body> </html>
04.javascript全局函数
全局函数:Global 全局函数(Function) eval() 函数:可计算某个字符串,并将其作为 JavaScript 代码来执行 注:该方法只接受原始字符串(基本数据类型)作为参数, 如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。 因此请不要为 eval() 函数传递 String 对象(构造数据类型)来作为参数。 全局函数(Function) encodeURI() 函数可把字符串作为 URI 进行编码。 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。 URI和URL的区别: URI是统一资源标识符 URL是统一资源定位器 资源:可以通过浏览器访问的信息都称之为资源(图片,文本,HTML,CSS等) URI表示资源的详细名称:包含资源名 URL定位资源的网络位置:http:// 例如: http://www.baidu.com/ 是URL /aismall.html 是URI http://www.baidu.com/aismall.html 即是URL也是URI 字符创转数字(Function) parseInt() 函数可解析一个字符串,并返回一个整数。(小数点后面直接忽略) 注:只有字符串中的第一个数字会被返回。 parseFloat() 函数可解析一个字符串,并返回一个浮点数。 注:该函数指定字符串中的首个字符是否是数字。 如果是,则对字符串进行解析,直到到达数字的末端为止(遇到非数字结束转换), 然后以数字返回该数字,而不是作为字符串。 NAN:not a number(数字类型标识符)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //此处x未被声明会报错 alert(x); //eval()全局函数中的字符串会作为代码来执行 eval("var y=10;") alert(y) //下面的代码不能被执行:String 是一个对象 //eval(new String("var x=10;")); </script> </body> </html>
05.javascript自定义函数
- 自定义函数(增强代码复用性 )
自定义函数(增强代码复用性 ): 函数格式: function 函数名(参数1,参数2,...){ 函数体 } 注意:function小写,无需指定返回值类型 参数定义也不用写var,否则报错 自定义函数 函数使用的注意事项: JavaScript函数调用执行完毕一定有返回值,值的类型根据return决定, 如果未return具体值,返回值为undefined, JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义覆盖之前的定义 因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数, 即使实参与函数的形参不匹配,也不影响正常调用。
- 自定义对象(有了类才能有对象,根据已有的类自定义出对象)
自定义对象(有了类才能有对象,根据已有的类自定义出对象): 在JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示, 相当于java中的创建的类 无形参格式: function 对象名(){ 函数体 } //对象创建 function Person(){ this.name="east"; this.age=18; } //对象引用 var p=new Person(); alert(p.name); alert(p.age); alert(p.name="AISMALL"); 属性定义的方式: 1.this关键字,在声明对象阶段,定义一个属性 2.创建对象后,使用对象.属性方式 动态定义属性,例如:p.sex="男"; 为属性赋值的方法: function Person(n,s){ this.name=n; this.age=s; } 1.构造参数赋值:var p=new Person("east",18); 2.创建对象后调用属性进行赋值:p.name=20 自定义对象(对象直接量) 开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式成为“对象直接量” 格式: var 对象名={属性名1="属性值1",属性名2="属性值2",.........}; 注:该方式直接创建出实例对象,无需构造函数,无需再new创建实例对象,直接使用即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--JavaScript函数调用执行完毕一定有返回值,值的类型根据return决定,--> <script> function getSun(a,b){ return a+b; } var result=getSun(1,2); alert(result); </script> <!--JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义覆盖之前的定义--> <script> function aismall(a,b){ return a-b; } function aismall(a,b){ return a+b; } alert(aismall(1,2)); </script> <script> //定义一个对象(相当于java中的类) function Person(n,a){ this.name=n; this.age=a; } //创建一个对象,进行动态赋值 var p=new Person("AISMALL",18); alert(p.name); alert(p.age); p.age=22; p.name="Dan"; alert(p.name); alert(p.age); </script> </body> </html>
03.BOM对象
3.1.BOM对象概述
BOM对象API:https://www.w3school.com.cn/jsref/index.asp BOM对象简述: BOM对象是什么?有什么用? BOM(Browser Object Model):浏览器对象模型 作用:用来执行浏览器对象上的相关操作(例如:浏览器上的地址,弹出消息等) window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写
- 举个栗子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写 window.alert("AISMALL_01"); alert("AISMALL_02"); </script> </body> </html>
这篇关于JavaScript入门使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程