JavaScript入门干货

最新推荐文章于 2024-04-20 14:08:05 发布

Eternal_yys

最新推荐文章于 2024-04-20 14:08:05 发布

阅读量649

点赞数

分类专栏： Java前端文章标签： JavaScript

本文链接：https://blog.csdn.net/eternal_yangyun/article/details/103063446

版权

Java前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. Js概述

JavaScript是⼀种弱类型脚本语⾔，都是使⽤ var 定义变量，在js中没有类的概念，只有对象，所以要掌握js的几大内置对象；

1. js的引用方式

内部方式

head标签体中引入script标签

JS的表单验证是重点！！⭐

2. JS的由来（为什么需要JS）

在这里插入图片描述

在1994年还没有JavaScript的时候，网络宽带只有7到10kb，这种网速下执行上面的操作是很费时的；

而之后，出现了一家公司：网景公司，开发了一款浏览器叫做领航者浏览器，这个浏览器植入了livescript，这个就是JavaScript的前身；
这个出现解决了如下问题：

解决了用户体验问题；
减轻了服务器压力；
在浏览器端通过js引擎来进行内部校验，如果用户信息都符合正则表达式，整个用户信息才能被提交到后台；

由于公司的纷争，由livescript衍生出JavaScript（一般浏览器所用）和Jscript（微软IE浏览器所用），但这两种其实基本差不多，它们的特性如下：

基础语法：变量、数据类型、函数定义、内置对象等都是差不多的；
BOM编程：基于浏览器对象模型编程；
- 了解四个对象
DOM编程：（重点⭐⭐）
- Document Object Model：基于文档对象模型编程
- 具体应用场景：
  - 定时弹出广告
  - 轮播图（也要用到定时器）
  - 省市联动

3. BOM和DOM编程

Js中分为两种编程模式：

BOM（基于浏览器对象模型编程）
DOM（重点）

1. BOM编程（了解即可）

BOM编程需要了解如下四个对象：

js引擎在解析html页面的时候，将html页面主要分为以下四个对象：

窗口对象：window ，所有BOM编程的顶级对象
- 如打开资源文件的方法：open（）；
- 定时器相关的方法；
- 和弹框相关的方法： ⭐
  - alert（“消息对话框”）：弹出的框框只有确定按钮
  - confirm（”确认提示框“）：弹出的框框有确定和取消两种按钮
  - prompt（”输入提示“）：弹出的框框有个文本输入框，可以进行文本输入，下面有个确认按钮；
地址栏对象：location
- href属性：更改页面地址（页面跳转）
历史记录对象：history
屏幕对象：screen

1. Js基础语法

1. JS基础语法和数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var a = 10;
			var a = 20;
			document.write("a的值为："+ a +"&nbsp;&nbsp;&nbsp;数据类型为："+typeof(a)+"<br/>");
		</script>
	</head>
	<body>
	</body>
</html>

运行会在页面上输出：a的值为：20 数据类型为：number

在js中，用var来定义任何类型；
使用var定义变量，同一个变量可以定义多次，后面的会覆盖前面的，这是js是一个弱类型语言的一个体现；
输出语句：document.write（）；
查看数据类型的函数：typeof（）；

js中数据类型的分类：

number类型
- 无论是整数还是小数，number类型在浏览器中都会被默认转换为Number（js内置对象） ；
- 在JavaScript中，一切皆对象，例如：var a = 10，在底层对应的就是：var a = new Number（10）；
string 类型
- 无论是字符还是字符串，在底层都是转化为String这个js内置对象；
- 例如：var c = ‘A’等价于：var c = new String（“A”）；
boolean 类型 （不用详细介绍）
- boolean对应js中的Boolean这个内置对象；
object 类型 （即所有的对象都是这个类型）
- 同样的，对应Object这个内置对象；

2. js的类型转换函数

在Java中，可以进行类型的转换，比如将String类型转换为整数对应的就是：parseInt（）这个方法；

同样的，在js中，也能实现类型的转换：
（js中还有一个parseFloat（）方法）

		<script>
			var a = "100";
			document.write("a的值为："+ a +"&nbsp;&nbsp;&nbsp;数据类型为："+typeof(a)+"<br/>");
			var a = parseInt(a);
			document.write("a的值为："+ a +"&nbsp;&nbsp;&nbsp;数据类型为："+typeof(a)+"<br/>");
		</script>

页面输出：
a的值为：100 数据类型为：string
a的值为：100 数据类型为：number

与Java不同的是，如果a中除了数字外还有字母的话，Java会抛出异常，而js中，遇到非数值类型的字符串停止转换；

3. js中的运算符

这个就无需多讲述了，加减乘除而已；
需要注意的是：

js中的true使用1来代替；
js中也能使用三元运算符，跟Java中的使用规则一样；

4. js中的流程控制语句

（1）：顺序结构语句；
（2）：选择结构语句；
- if、else结构
- switch语句
  - 这里和Java稍微有一点区别，js里面case后面的内容可以是常量、变量、表达式，而Java中case后面只能跟常量；
- 循环结构
  - 跟Java里面的没啥区别；

5. js中的for - in 语句

js中的for-in语句，类似于java中的增强for循环语句，目的是：

简化数组和对象属性的遍历；

js中的for - in语句格式为：

for(var 变量名 in 数组对象/自定义对象){
	输出这个变量即可；
}

可以看到可以是数组对象或者自定义的对象；

下面看一个实操代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js之for-in语句</title>
<script>
	//js中数组--->Array
	var arr = [10,20,30,40] ;
	//普通for循环的方式
	for(var i = 0 ; i < arr.length ; i ++){
		document.write(arr[i]+"&nbsp;&nbsp;")
	}
	//打印一条分割线
	document.write("<hr/>") ;
	//用for -in语句来实现遍历
	for(var i in arr){
		document.write(arr[i]+"&nbsp;&nbsp;");
	}
	document.write("<hr/>") ;
	//自定义一个Person对象,注意js中方法的形参不能带类型，否则报错；⭐⭐
	function Person(name,age){//this代表当前对象的地址在引用
		this.name =name ;
		this.age = age ;
	}
	//创建一个对象
	var p = new Person("Bob",20) ;
	//将Person对象的属性遍历出来：for-in :对象名[变量]
	for(var i in p){
		//输出对象的属性
		document.write(p[i]+"<br/>") ;
	}
</script>
	</head>
	<body>
	</body>
</html>

网页输出：
10 20 30 40

10 20 30 40

Bob

20

2. js内置对象

所谓js内置对象就是js中提供的一些已有对象，它们包含大量的方法来供我们操作；

1. Date对象

作用就是：获取系统时间年份/月份/时分秒

在Java中，获取系统时间需要使用Date类；具体操作如下：

在js中，获取系统时间的具体操作为：

		<script>
		var data = new Date();
		document.write(data);
		</script>

页面输出：
Wed Nov 13 2019 12:06:00 GMT+0800 (中国标准时间)

但这个格式不是我们想要的格式，这时就需要用到Date对象的一些内置方法；

		<script>
		var data = new Date();
		document.write(data.getFullYear() + "年");
		document.write(data.getMonth() + "月");
		document.write(data.getDay() + "日");
		</script>

输出：
2019年10月3日

类似还有获取时分秒的方法，这里就不再详述；

1. 网页时钟的实现

要实现网页时钟，我们需要如下步骤：

创建日期对象；
拼接时间字符串；
获取span标签对象 id = “spanTip”；
设置span标签对象innerHTML属性或者innerText属性；
设置定时器

具体完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页时钟</title>
<script>
	function genDate(){
		//1. 创建date对象
		var date = new Date() ;
		//2. 拼接时间字符串
		var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
					+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+"-"+date.getMinutes()+"-"+
					date.getSeconds() ;
	
		//3. 获取span标签对象
		var spanTip = document.getElementById("span_tip") ;
		//4. 设置span标签对象的innerHTML属性
		spanTip.innerHTML = dateStr ;
	}


//定时器:网页定时器
/**
 * window.setTimeout("任务()",毫秒) ;//经过多少毫秒后执行一次任务
 * window.setInterval("任务()",毫秒);//每经过多少毫秒重复执行任务
 */
window.setInterval("genDate()",1000) ;
</script>
	</head>
	<body>
当前系统时间是：<span id="span_tip"></span>
	</body>
</html>

网页输出会输出对应时间，而且每秒更新一次；

2. String 对象（字符串对象）

3. Array 对象（数组对象）

1. 语法规则

js中数组的特点：

js数组可以存放任意类型的数据；
js中不存在数组越界；

三种定义方式：

arrayObj = new Array（）； ————不指定数组长度

  <script>
  		var arr = new Array();
  		arr[0] = 1;
  		arr[1] = false;
  		arr[2] = "hello";
  		alert(arr.length);
  		for(var i=0; i<arr.length; i++) {
  			document.write(arr[i]+"<br/>");
  		}
  		</script>


> **网页输出：** 
> 先弹出一个提示框，内容为：3
> 然后输出那三个内容；

arrayObj = new Array（[size]） ————指定数组长度
- 这种方式下，就算下标越界，也不存在错误，在js中，是不存在数组越界这种情况的；

arrayObj = new Array（[element0[, element1[…]]]）； ————最常用⭐

  <script>
  		var arr = [1,"hello",false,new Object()];
  		for(var i=0; i<arr.length; i++) {
  			document.write(arr[i]+"<br/>");
  		}
  		</script>


> **输出：** 
> 1 
> hello 
> false 
> [object Object]

2. 常用内置函数

join（）函数：拼接字符串；

		<script>
		var arr = ["php","C++", "java", "python"];
		var str = arr.join("、");
		document.write(str);
		</script>

输出：
php、C++、java、python

reverse（）函数：反转数组中的元素；

4. 其他内置对象

js中还有一些其他的内置对象：如Math、

5. Js的原型属性：prototype

作用是：为内置对象追加自己定义的方法；

（此时就需要使用js的原型属性来解决这个问题，注意：更改源码也不能追加自己的方法哟）
追加的格式为：

内置对象.prototype.追加方法名 = function() {}

下面看个栗子：

		<script>
		var arr =[1,2,3];
		//为所有的Array对象追加searchIndex这个方法；
		Array.prototype.searchIndex = function(target) {
			for(var i=0; i<this.length; i++) {
				if(this[i] == target) {
					return i;
				}
			}
			return -1;
		}
		var index = arr.searchIndex(3);
		document.write(index);
		</script>

网页输出：
2

3. js自定义对象

自定义对象有四种定义方式，分别如下；

1. 有参构造

分两个步骤：

		（1）定义对象：function 对象(属性){...}
		（2）创建对象：var 对象名 = new 对象(实际参数);

具体案例：

		<script>
		function Person(name, age) {
			//追加属性
			this.name = name;
			this.age = age;
			//追加方法
			this.print = function() {
				document.write(name + "&nbsp&nbsp" + age);
			}
		}
		//创建对象
		var per = new Person("yy", 20);
		//调用对象方法
		per.print();
		</script>

输出：
yy 20

2. 无参构造

		<script>
		function Person() {
			
		}
		var p = new Person();
		//追加属性
		p.name = "李四";
		p.age = 20;
		//追加方法
		p.print = function() {
			document.write(p.name + "&nbsp&nbsp" + p.age);
		}
		p.print();
		</script>

输出：
李四 20

3. 利用Object对象（最常用⭐）

		<script>
            //直接将Object对象看成你想要的任意对象，之后你追加属性和方法即可；
		var p = new Object();
		//追加属性
		p.name = "李四";
		p.age = 20;
		//追加方法
		p.print = function() {
			document.write(p.name + "&nbsp&nbsp" + p.age);
		}
		p.print();
		</script>

输出：
李四 20

4. 字面值的方式：json格式⭐

json的格式为： （{}内的东西就叫json对象）

		{"key" : value(Object)}

简单的格式：(简单或复杂都是由基本格式而来)

		{"name":"张三", "age":20, "password":"123456"}

复杂的格式（json里面嵌套json）：

		{"key":{
            "key":value
		}
		}

具体使用：

		<script>
		var p = {
			"name" : "YY",
			"age" : 20,
			"print" : function() {
				document.write(p.name + "&nbsp&nbsp" + p.age);
			}
		};
		p.print();
		</script>

网页输出：
YY 20

json的使用解决了前后端交互的一些问题，例如后台给前端返回List/Map这类集合数据的时候，前端是无法直接处理的；我们应该将List/Map转化为json对象再传给前端；

4. Js中的函数

在js中，定义函数的格式为：

function 函数名(形式参数列表) {
    具体业务;
}

注意点：

（1）：形式参数中不能加上数据类型（var），否则报错；

		<script>
		function add(var a, var b) {
			var s = a+b;
			document.write(s);
		}
		add(10,30);
		</script>

运行上面后将会报错；

（2）：在js中，不存在方法重载的概念，后面同名的函数将会覆盖前面的函数；
（3）：在js中，不需要写返回值，但可以有return语句；
（4）：无论形式参数个数大于还是小于实际参数，函数都会被调用；
（5）：函数中默认存在一个数组：arguments，作用是：将函数中实参和形参一一绑定；

js中，函数的调用分为单独调用和赋值调用:

单独调用：即直接调用函数；（如 add(10,30); ）

赋值调用：把函数调用的结果赋值给一个变量；

		<script>
		function add(a, b) {
			var s = a+b;
			return s;
		}
		var res = add(10,30);
		document.write(res);
		</script>

Eternal_yys

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门干货

文章目录1. Js概述1. js的引用方式JS的表单验证是重点！！⭐2. JS的由来（为什么需要JS）3. BOM和DOM编程1. BOM编程（了解即可）1. Js基础语法1. JS基础语法和数据类型2. js的类型转换函数3. js中的运算符4. js中的流程控制语句5. js中的for - in 语句2. js内置对象1. Date对象1. 网页时钟的实现2. String 对象（字符串对象）...
复制链接

扫一扫