JavaScript的基础知识以及基本语法

最新推荐文章于 2022-07-30 14:48:10 发布

永旗狍子

最新推荐文章于 2022-07-30 14:48:10 发布

阅读量362

点赞数

分类专栏：前端 JAVAEE 文章标签：正则表达式脚本语言 javascript

本文链接：https://blog.csdn.net/qwq1518346864/article/details/116089270

版权

JAVAEE 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

一.JavaScript

1.1JavaScript简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

1.2 JavaScript组成部分

1.3 JavaScript环境搭建

使用HBuilder进行页面开发
新建工程：文件->新建->Web项目

在HTML页面中创建一个< script >< /script >标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			document.write("hellow world");
		</script>
		
		<!-- <script type="text/javascript" src="demo1.js"></script> -->
	</body>
</html>

还可以使用外部引用的形式：把原本的JavaScript代码写到一个文件里，之后再引用过来

<html>
	<body>
		<script src="js/my.js"></script>
	</body>
</html>

二、JavaScript基本语法

2.1 变量声明

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
var是声明关键字，a是变量名，语句以分号结尾。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。

var a;

2.2 基本类型

变量的基本类型又有Number、String、Boolean、Undefined、Null五种。


var a=1;

var b="1";
var c='1';

var d=false;

在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。
在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。
下面是演示undefined的情况：(当一个引用不存在时，它为Null)

var a;
document.write(a);

2.3 引用类型

var student={id:1,name:"zs",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);

student被赋值为了一个JSON，JSON就是我们在Java基础阶段学过的，全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

2.4 数组类型

数组就是和我们之前理解的数组概念一致，而在JavaScript中成为Array类型。
我们说JSON可以标记一个对象，那么它同样可以标记一个数组，就是Java基础时我们学过的JSONArray。

var a=[1,2,3,4];

我们说a是一个数组，在a中角标为0的元素是1。可以说这很简单。
接下来我们来尝试把之前的JSON放入数组中：

//我是注释
/*我也是注释*/
var students = [
    {id: 1,name: "张三",age: 18},
    {id: 2,name: "李四",age: 18},
    {id: 3,name: "王五",age: 19}
];
document.write(students[0].id);
document.write(students[0].name);
document.write(students[0].age);
document.write("<br>");//这个是html的换行的意思
document.write(students[1].id);
document.write(students[1].name);
document.write(students[1].age);
document.write("<br>");
document.write(students[2].id);
document.write(students[2].name);
document.write(students[2].age);

2.5 运算符

逻辑运算符

名称	运算符	描述
与	&&	要求表达式左右两边的表达式同为true，整体结果才为true
或	\|\|	要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非	！	将布尔值取反操作

关系运算符

名称	运算符
等于	==
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

var a=1;
var b=2;
//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false
//这里三个等于“===”和两个等于“==”区别：
//前者相当于比较两个引用，后者相当于比较两个值。
//当比较两个值得时候，不考虑数据类型。
//也就是说1=="1"是true的。

单目运算：自增自减

名称	运算符	描述
自增	++	变量的值每次加1，再赋给变量
自减	--	变量的值每次减1，再赋给变量

双目运算符

名称	运算符
加	+
减	-
乘	*
除	/
求余	%
赋值	=
加等	+=
减等	-=
除等	/=
乘等	*=
求余等	%=

三目运算符： ?:

var kk=100;	
document.write(kk>100?true:false);

2.7 循环结构

for循环

break与continue关键字

- break用于结束循环
- continue用于结束本次循环

while循环

var a=0;
var i=1;
while(i<=100){
   a+=i;
   i++;
}
document.write(a);
//上述代码是对1~100求和。

do-while循环

var a=0;
var i=1;
do{
    a+=i;
  	i++;
}while(i<=100);
document.write(a);
//上述代码是对1~100求和。

break与continue关键字

break用于结束循环

continue用于结束本次循环

2.8 函数*

函数定义：用function关键字来声明，后面是方法名字，参数列表里不写var。整个方法不写返回值类型。

function functionName(parameters){
    //执行的代码
}

方法的定义与调用举例：

function add(a,b){
    return a+b;
}
var c=1;
var d=2;
var e=add(1,2);
document.write(e);
//上述代码运行结果是3
//这里定义了一个add方法，参数是两个，与Java不同，参数的数据类型并没有。
//因为就算是写，全都是var，为了保证语法的简洁性，全写var索性就设计成全都不用写了。
//返回值也是同样的道理，区别是，如果你写了返回值，那么有返回值，如果没写return，就没有返回值。

2.9 常见弹窗函数

alert弹框：这是一个只能点击确定按钮的弹窗

alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

alert("你好");

confirm弹框：这是一个你可以点击确定或者取消的弹窗

confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

confirm("你好");

prompt弹框：这是一个你可以输入文本内容的弹窗

第一个参数是提示信息，第二个参数是用户输入的默认值。

当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null。

prompt("你爱学习java？","yes");

2.10 事件

事件名称	描述
onchange	HTML 元素内容改变
onclick	用户点击 HTML 元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	表单提交

2.11 正则表达式

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法：

var patt=new RegExp(pattern,modifiers);

var patt=/pattern/modifiers;

var a=new RegExp("\\w+");
var a=/\w/;

修饰符：用于执行区分大小写和全局匹配；

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有)。
m	执行多行匹配。

方括号：用于查找某个范围内的字符。

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符：是拥有特殊含义的字符。

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。

量词：用于表示重复次数的含义。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n{X}	前面的模式 n 连续出现X 次时匹配
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。

RegExp对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

支持正则表达式的S听对象的方法

方法	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

案例1：

<script type="text/javascript">
			var word = "atoday is a good day to study!";

			/*var reg =/goo/;*/
			/* []单个字符串的模式匹配 */
			/* [gd] 字符串匹配到 g或者d的字母都为true,只要有1个字母能匹配到就为true */
			/*var reg=/[gd]/;*/
			var reg = /[gz]/;
			document.write(reg.test(word));
			document.write("<hr/>");
			/* /^[goodt]/ ^这个符号代表以[字母]为开头的,就为true */
			var reg2 = /^[goodt]/;
			document.write(reg2.test(word));
			document.write("<hr/>");
			/* /[goodty!]$/$ 以[字符]为结尾即为true */
			var reg3 = /[goodty!]$/;
			document.write(reg3.test(word));
			document.write("<hr/>");

			var word2 = "java";
			var word3 = "javascript";
			var word4 = "JAVA";
			//			var reg4 = /java/;
			/* /^[jvx]av[awp]$/; [jvx]看作1个字符  */
			var reg4 = /^[jvx]av[awp]$/;
			document.write(reg4.test(word2) + " ");
			document.write(reg4.test(word3) + " ");
			document.write(reg4.test(word4));
			document.write("<hr/>");

			var word5 = "1";
			/* 0到9加上9 2个数值 */
			var reg5 = /[0-9]9/;
			document.write(reg5.test(word5) + " ");
			document.write("<hr/>");
			var reg6 = /[a-zA-Z]/;
			document.write(reg6.test(word4) + " ");
			document.write("<hr/>");

			var word7 = "135";
			var word8 = "136";
			var word9 = "137";
//			var reg7 = /^13[0-9]/;
			/* ()中的字符串视为1个整体来匹配,有多个字符串需要匹配时使用|来分割 */
			var reg7 = /(135|136|139)/;
			document.write(reg7.test(word7) + " ");
			document.write(reg7.test(word8) + " ");
			document.write(reg7.test(word9) + " ");
			document.write("<hr/>");
		</script>

案例2：

<script type="text/javascript">
			var word = "java";
			//直接匹配有aa这个字符串的存在
			var reg = /aa/;
			//正则表达式.test(要检验的字符串)==>true false
			document.write(reg.test(word));
			//对象创建方式 
			var reg2 = new RegExp("va");
			document.write(reg2.test(word) + "<hr/>");

			var word2 = "Java";
			/* /ja/i i代表前面的正则表达式要忽略大小写 */
			var reg3 = /ja/i;
			document.write(reg3.test(word2)+ "<hr/>");

			var word3 = "today is a \n good day to study!";

			var reg4 = /od/g;
			
			//document.write(reg4.test(word3));
			//字符串.match(正则表达式)  返回比配到的文字
			document.write(word3.match(reg4));
						
		</script>

案例3：

<script type="text/javascript">
			/* 只要是前面2个字母大小写不限后面是数字一共3个字符 */
			var word="aA$";
			var reg = /[a-zA-Z][a-zA-Z][0-9]/;
			document.write(reg.test(word)+"<hr/>");
			/* \w A-Za-z0-9_ */
			/* \W 除上面那些意外的字符符号 如$%^这些 */
			var reg2 = /\w\w\W/;
			
			document.write(reg2.test(word)+"<hr/>");
			// 15字符串
			var reg3 = /\w\w\w/;
		</script>

案例4：

<script type="text/javascript">
			var word="abxabxabxabcbcd";
			/* +前面模式匹配1-N个 */
			/*var reg = /[a]+/;*/
			/* *前面模式匹配0-N个 */
			//var reg = /[a]*/;
			/* *前面模式匹配0-1个 */
			/*var reg = /[a]?/;*/
			/* 匹配前面的模式2次 */
		/*	var reg = /[b]{2}/;
			/* + */
//			var reg = /[b]{2,}/;
			/* + */
			var reg = /(ab){2,3}/;
			document.write(reg.test(word));
			
			
		</script>

永旗狍子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的基础知识以及基本语法

一.JavaScript1.1JavaScript简介JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。1.2 JavaScript组成部分ECMAScript语法文档对象模型（DOM Document Object Model）浏览器对象模型(BOM Browser Object Model) 1.3 J
复制链接

扫一扫