22-javaScript基础(前端)

VIP文章王宇辉

已于 2022-02-26 09:43:49 修改

阅读量537

点赞数

分类专栏： java知识体系文章标签： javascript 前端 html

于 2021-12-25 13:42:34 首次发布

本文链接：https://blog.csdn.net/weixin_42688085/article/details/122141599

版权

感谢你的路过，希望学生的笔记能给你一点微不足道的参考
Java基础思维导图，完整Java体系的链接
在这里插入图片描述

目录标题

一，概述

1.1什么是JavaScript？

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译），一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。很容易入门。

1.2JavaScript的作用？

1、为网页添加各式各样的动态功能,
2、为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.3JavaScript的历史（了解）？

   1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
   2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
   3. 1996年，微软抄袭JavaScript开发出JScript语言
   4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

二，JavaScript的用法

2.1HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，放在最后也可以，对位置要求不严格。
有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js脚本位置-html页面中</title>		
		<script>
			alert("hello JavaScript1-1");
		</script>
		<script>
			alert("hello JavaScript1-2");
		</script>
	</head>
	<body>
		<script>
			alert("hello JavaScript2-1");
		</script>
		<script>
			alert("hello JavaScript2-2");
		</script>
	</body>
</html>
<script>
	alert("hello JavaScript3-1");
</script>
<script>
	alert("hello JavaScript3-2");
</script>

2.2外部的JavaScript

   可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
   外部 JavaScript 文件的文件扩展名是 .js。
   当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：
      外部脚本不能包含 script 标签。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>引用外部文件</title>
		<script type="text/javascript" src="js/myScript.js" ></script>
		<script>
			fun1();
		</script>
	</head>
	<body>
	</body>
</html>

2.3标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js脚本位置-标签内部</title>
	</head>
	<body>
		<a href="javascript:alert('hello js');">行内的js</a>
	</body>
</html>

三，JavaScript显示数据

   使用window.alert()弹出框
      PS：这里的window可以省略，等价于alert(“hello world”);
   使用document.write()将内容写入到html文档
   使用innerHTML写入到html元素
   使用console.log写入到浏览器控制台
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js显示数据的方式</title>
		<script>
			//方式1：弹框输出
			alert("hello js");
			//方式2：在页面输出
			document.write("hello world1");			
		</script>
	</head>
	<body>
		<div id="div1">div1</div>
		<script>
			//方式3：要注意的问题，先加载完页面元素才能获取页面元素，即getElementById函数要在被获取的标签加载完毕才能使用
			document.getElementById("div1").innerHTML="hello world2";
			//方式4：输出内容到控制台
			console.log("hello world3");
		</script>
	</body>
</html>

四，JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。 JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

4.1JavaScript变量

   声明变量的关键字：var
   语法：var 变量名称；
   变量的命名规则：
      变量必须以字母开头
      变量也能以 $ 和 _ 符号开头
      变量名称对大小写敏感（y 和 Y 是不同的变量）
      不能使用关键字保留字
   变量的命名规范：见名知意。
      例如：breadPirce,userService等，避免无意义的a,b,c等
      推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>变量</title>
		<script>	
			var myCompany;     //声明变量
			myCompany='开课吧'; //赋值
			var x=5;//声明的同时赋值
			var y=6;
			var z=x+y;//变量也可以存储表达式	
			console.log(z);
		</script>	
	</head>
	<body>
	</body>
</html>

4.2JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构，语法与java类似，一般一行只写一条语句，每句结尾编写分号结束。

五，JavaScript的数据类型

5.1基本类型

   字符串String
   数字Number
      JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
   布尔Boolean
      只能有两个值：true 或 false。
   空Null
   未定义Undefined
      表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。共有4中情况会出现undefined的值：
      1、变量声明且没有赋值；
      2、获取对象中不存在的属性时；
      3、函数需要实参，但是调用时没有传值，形参是undefined；
      4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。
   Symbol
      Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

5.2引用数据类型：

   对象(Object)、数组(Array)、函数(Function)
   JavaScript拥有动态类型
      这意味着相同的变量可用作不同的类型，不推荐这种写法。尽量开始声明变量的时候就确定好将要盛放什么类型的值，以后尽量不随意改变。
   JavaScript中的运算符
      算数运算符：+ - * / % 、 ++ 、 –
      赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=
      字符串的连接符：+
      逻辑运算符： && || ！
      条件运算符：？:
      比较运算符： == 、！= 、 > 、= 、 <=
      以上运算符的运算规则与java一样，在这里不再赘述。接下来强调两个新的比较运算符：
         比较运算描述
            === 绝对等于（值和类型均相等）
            !== 不绝对等于（值和类型有一个不相等，或两个都不相等）
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据类型</title>
		<script>
			//1、字符串类型
			var gameName = "英雄联盟";
			var hairstylist = 'tony';
			//PS：注意引号嵌套
			var message1 = '我的发型师是"tony"老师';
			var message2 = "我的发型师是'tony'老师";
			//2、数字 Number
			var breadPrice = 15.9;
			var gameLevel = 66;
			//极大或极小的数字可以通过科学计数法来书写：
			var myMoney1 = 666e5; //66600000
			var myMoney2 = -666e-5; //-0.00666
			//3、布尔类型  Boolean
			var isUnderstand = true;
			var isSingle = false;
			//4、空 null
			var email = null;
			//5、未定义 undefined
			var obj;
			alert(obj); //obj值为undefined
			alert(obj.name); //报错信息： "Uncaught TypeError: Cannot read property 'name' of undefined"
			function printNum(num) {
     
				alert(num);
			}
			var result = printNum(); //调用函数未传递参数，执行函数的时候num的值是undefined
			alert(result); //result的值也是undefined，因为printNum()没有返回值
		</script>

	</head>
	<body>
	</body>
</html

六，JavaScript对象

6.1JavaScript的String对象

String对象属性–长度属性：length
String对象方法 JavaScript中的String对象方法与java的String方法很多都类似甚至一样，这里不再一一赘述。

6.2JavaScript的Array对象

   Array 对象用于在变量中存储多个值，也就是数组。
   大家需要注意的length是数组的属性，不是方法，所以调用的时候没有括号。
   Array对象的方法方法比较多，这里不再给大家一一讲述，给大家一个表格参考表格。感兴趣的同学自行查阅。

6.3JavaScript的Date对象

   创建日期对象
      var date1 = new Date();
      var date2 = new Date(milliseconds);
      var date3 = new Date(dateString);
      var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);
   日期对象的常用方法
在这里插入图片描述

6.4JavaScript的Math对象

   Math常用属性
      var pi=Math.PI;//返回圆周率
   Math常用方法
      var num=Math.random();// 返回 0 ~ 1 之间的随机数。
      var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
      var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			/*js内置对象1：======字符串对象*/
			var str = "我喜欢看NBA,最喜欢的球员是\'小学生\'库里";
			//注意：字符串中出现的\'是一个字符，转义为一个单引号
			console.log(str);
			//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1			
			console.log("字符串的长度=" + str.length); //22
			/*js内置对象2：======Array对象*/
			//声明数组方式1：
			var names=new Array();
			for(var i=0;i<4;i++){
     
				names[i]="贾宝玉"+(i+1);
			}
			for(var i=0;i<names.length;i++){
     
				document.write(names[i]+"<br/>");
			}
			//声明数组方式2：
			var carNames=["保时捷","法拉利","玛莎拉蒂"];
			for(var i=0;i<carNames.length;i++){
     
				document.write(carNames[i]+"<br/>");
			}
			//声明数组方式3：
			var classNames=new Array("1班","海贼班","Superman班级");
			for(var i=0;i<classNames.length;i++){
     
				document.write(classNames[i]+"<br/>");
			}
			/*js内置对象3：======Date对象*/
			//创建日期对象：4个方法
			var date1=new Date();
			var date2=new Date(256942572525);
			var date3=new Date("2020-12-12 12:23:34");
			var date4=new Date(2020,1,4,12,34,45,19);
			
			console.log(date1.getFullYear());
			console.log(date1.getMonth());
			console.log(date1.getDate());
			console.log(date1.getDay());
			console.log(date1.getHours());
			console.log(date1.getMinutes());
			console.log(date1.getSeconds());
			console.log(date1.getMilliseconds());
			/*js内置对象4：======Math对象*/			
			var pi=Math.PI;//返回圆周率
			document.write("pi="+pi+"<br/>");
			var random=Math.random();
			document.write("random="+random+"<br/>");
			var max=Math.max(12,43.5,332,-454,211);
			document.write("max="+max+"<br/>");
			var min=Math.min(12,43.5,332,-454,211);
			document.write("min="+min+"<br/>");
		</script>
	</head>

	<body>
	</body>
</html>

七，JavaScript的函数

JavaScript的常用全局函。JavaScript中有个常用的全局属性NaN,即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。

7.1isNaN(param)

用于检查其参数是否是非数字值。是数值的返回false，不是数值返回true

7.2parseFloat(String)

   可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
   字符串中只返回第一个数字。
   开头和结尾的空格是允许的。
   如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

7.3parseInt(string,radix)

   可解析一个字符串，并返回一个整数.
      参数描述
      string 必需。要被解析的字符串。
      radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
   当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
   当忽略参数 radix , JavaScript 默认数字的基数如下:
      如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
      如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
      如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
   只有字符串中的第一个数字会被返回。开头和结尾的空格是允许的。如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。
代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>全局函数</title>
	</head>
	<body>	
	</body>

</html>
<script>
	//1、isNaN(param)
	console.log(isNaN(666)); //false
	console.log(isNaN(1 + 2)); //false
	console.log(

最低0.47元/天解锁文章

王宇辉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
22-javaScript基础(前端)

感谢你的路过，希望学生的笔记能给你一点微不足道的参考Java基础思维导图，完整Java体系的链接一，概述1.1什么是JavaScript？   JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译），一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。很容易入门。1.2JavaScript的作用？   1、为网页添加各式各样的动态功能,  &
复制链接

扫一扫