本文主要是介绍JavaScript入门使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 01.概述
- 02.JavaScript的语法规则
- 2.1.注释变量运算符
- 2.2.JavaScript正则
- 03.javascript数组对象
- 04.javascript全局函数
- 05.javascript自定义函数
- 03.BOM对象
-
01.概述
在前端开发中,类比:
HTML:人类身体
CSS:衣服(美化)
JavaScript:大脑(例如,为按钮添加功能)
JavaScript是强大的脚本语言
脚本语言:无法独立运行,必须嵌套到其他语言中,结合使用,无需编译,可以被浏览器直接运行
java是编程语言,可以独立运行。(先编译,后运行)
特征:
1.无需编译,直接被浏览器解析执行
2.无法单独运行,必须嵌入到HTML代码中运行
3.由上到下依次执行
注意:
1.JavaScript没有权限访问系统里的文件
2.由于无需编译,且由上到下依次执行,所以在保证可读的情况下,允许使用链式编程
3.JavaScript和java没有任何关系
JavaScript的组成:ECMAScript,DOM, BOM
ECMAScript(核心):规定了JS的语法和基本对象
DOM:文档对象模型,处理网页内容的方法和接口
BOM:浏览器对象模型,与浏览器交互的方法和接口
在当前页面内部写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标签的放置位置为,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
正则对象的创建: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入门使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!