Web前端学习笔记:day03(JavaScript day01)

最新推荐文章于 2024-07-19 12:58:53 发布

ℳ๓₯㎕℡ 桜

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量259

点赞数

分类专栏： Web 文章标签： javascript js html

本文链接：https://blog.csdn.net/qq_44786543/article/details/104842233

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript

1.JavaScript概述

1、JavaScript是一种脚本语言，它的出现使HTML不再是一种纯静态的网页，它增加了HTML页面的交互性
2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在的。

2.HTML嵌入JS的方式

第一种：内联嵌入

1、语法：在事件句柄后编写JS代码
	onclick="window.alert('hello js')"
2、怎么使用JS代码弹出消息框？
	在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
	window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
3、JS代码规范			
	JS中的字符串可以使用双引号，也可以使用单引号。
	JS中的一条语句结束之后可以使用分号“;”，也可以不用。

实例

<!-- window. 可以省略。-->
<input type="button" value="hello" onclick="alert('hello zhangsan') alert('hello lis') alert('hello wangwu')"/>

第二种：脚本块的方式

1、语法<script type="text/javascript">JS代码</script>
2、暴露在脚本块当中的程序，在页面打开的时候自上而下依次执行

实例

<!--第二种方式：脚本块的方式-->
<script type="text/javascript">

	/*
	暴露在脚本块当中的程序，在页面打开的时候执行，
	并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）
	*/
	window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
			
	// JS代码的注释，这是单行注释。
	/*
		JS代码的多行注释。和java一样。
	*/
	window.alert("Hello JavaScript!");

</script>

第三种：引入外部独立的js文件

1、语法<script type="text/javascript" src="js/1.js"></script>
	src中写js文件地址
2、引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
3、同一个js文件可以被引入多次。

实例

<!--在需要的位置引入js脚本文件-->
<script type="text/javascript" src="js/1.js">
</script>

3.JS变量

1、javascript当中的变量？
怎么声明变量？
	var 变量名;
	怎么给变量赋值？
	变量名 = 值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
	var i = 100;
	i = false;
	i = "abc";
	i = new Object();
	i = 3.14;	
变量申明阶段没有赋值，默认赋undefined
重点：javascript是一种弱类型编程语言。
2、java语言是一种强类型语言，强类型怎么理解？
	java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。
	编译期强行固定变量的数据类型。称为强类型语言。	
重点：数据类型转换只是将变量的值转换了数据类型，变量类型依旧没变；

4.JS函数初步

1、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
	语法格式：
		第一种方式：
		function 函数名(形式参数列表){
		函数体;
		}
		第二种方式：
		函数名 = function(形式参数列表){
		函数体;
		}				
JS中的函数不需要指定返回值类型，返回什么类型都行。
2、java中的方法有重载机制，JS中的函数能重载吗？
	JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）	
重载的含义：
	方法名或者函数名一样，形参不同（个数、类型、顺序）

实例一

<script type="text/javascript">
			
	function sum(a, b){
	// a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
		alert(a + b);
	}
		   
	// 函数必须调用才能执行的.
	//sum(10, 20);
			   
	// 定义函数sayHello
	sayHello = function(username){
		alert("hello " + username);
	}
			   
	// 调用函数
	//sayHello("zhangsan");
			   
</script>
<input type="button" value="hello" onclick="sayHello('jack');" /> 
<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />

实例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS函数初步</title>
	</head>
	<body>
		<script type="text/javascript">
		   function sum(a, b){
			   return a + b;
		   }
		   
		   // 调用函数sum
		   var retValue = sum(1, 2);
		   alert(retValue);
		   
		   var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
		   alert(retValue2); // jackundefined
		   
		   var retValue3 = sum();
		   alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
		   
		   var retValue4 = sum(1, 2, 3);
		   alert("结果=" + retValue4); // 结果=3
		   
		   function test1(username){
			   alert("test1");
		   }
		   
		   /*
		   在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
		   */
		   function test1(){
			   alert("test1 test1");
		   }
		   
		   test1("lisi"); // 这个调用的是第二个test1()函数.
		   
		</script>
	</body>
</html>

5.JS局部变量和全局变量

全局变量：
	在函数体之外声明的变量属于全局变量
	全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
	能使用局部变量尽量使用局部变量。
局部变量：
	在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
	局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
	局部变量生命周期较短。
重点：当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.

6.JS中的数据类型

JS中数据类型有：原始类型、引用类型。
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类

ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol

JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。

typeof运算符的语法格式：
	typeof 变量名
	typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
		"undefined"
		"number"
		"string"
		"boolean"
		"object"
		"function"

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS中的数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
		  
		  var i;
		  alert(typeof i); // "undefined"
		  
		  var k = 10;
		  alert(typeof k); // "number"
		  
		  var f = "abc";
		  alert(typeof f); // "string"
		  
		  var d = null;
		  alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"
		  
		  var flag = false;
		  alert(typeof flag); // "boolean"
		  
		  var obj = new Object();
		  alert(typeof obj); // "object"
		  
		  // sayHello是一个函数.
		  function sayHello(){
			  
		  }
		  alert(typeof sayHello); // "function"
		  
		   
		</script>
	</body>
</html>

Undefined类型

Undefined类型只有一个值，这个值就是 undefined
当一个变量没有手动赋值，系统默认赋值undefined
或者也可以给一个变量手动赋值undefined。

 var i; // undefined
 var k = undefined; // undefined
		   
 alert(i == k); // true
		   
 var y = "undefined"; // "undefined"
 alert(y == k); // false

Number类型

1、Number类型包括哪些值？
	-1 0 1 2 2.3 3.14 100 .... NaN Infinity
	整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
2、isNaN() : 
	结果是true表示不是一个数字，结果是false表示是一个数字。
3、parseInt()函数
	可以将字符串自动转换成数字,并且取整数位.
4、parseFloat()函数
	可以将字符串自动转换成数字.
5、Math.ceil() 函数
	Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number类型</title>
	</head>
	<body>
		<script type="text/javascript">
		   var v1 = 1;
		   var v2 = 3.14;
		   var v3 = -100;
		   var v4 = NaN;
		   var v5 = Infinity;
		   
		   // "number"
		   alert(typeof v1);
		   alert(typeof v2);
		   alert(typeof v3);
		   alert(typeof v4);
		   alert(typeof v5);
		   
		   // 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)
		   // 什么情况下结果是一个NaN呢？
		   // 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
		   var a = 100;
		   var b = "中国人";
		   alert(a / b); // 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
		   
		   var e = "abc";
		   var f = 10;
		   alert(e + f); // "abc10"
		   
		   // Infinity (当除数为0的时候，结果为无穷大)
		   alert(10 / 0);
		   
		   // 思考:在JS中10 / 3 = ?
		   alert(10 / 3); // 3.3333333333333335
		   
		   // 关于isNaN函数？
		   // 用法：isNaN(数据) ,结果是true表示不是一个数字, 结果是false表示是一个数字.
		   // isNaN : is Not a Number 
		   function sum(a, b){
			   if(isNaN(a) || isNaN(b)){
				   alert("参与运算的必须是数字！");
				   return;
			   }
			   return a + b;
		   }
		   sum(100, "abc");
		   alert(sum(100, 200));
		   
		   // parseInt():可以将字符串自动转换成数字,并且取整数位.
		   alert(parseInt("3.9999")); // 3
		   alert(parseInt(3.9999)); // 3
		   
		   // parseFloat():可以将字符串自动转换成数字.
		   alert(parseFloat("3.14") + 1); // 4.14
		   alert(parseFloat("3.2") + 1); // 4.2
		   
		   // Math.ceil()
		   alert(Math.ceil("2.1")); // 3
		   
		</script>
	</body>
</html>

Boolean和Null类型

1、 JS中的布尔类型永远都只有两个值：true和false （这一点和java相同。）
2、在Boolean类型中有一个函数叫做：Boolean()。
	语法格式：
		Boolean(数据) 
	Boolean()函数的作用是将非布尔类型转换成布尔类型。
3、Null类型只有一个值,null

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean类型</title>
	</head>
	<body>
		<script type="text/javascript">
		   // var username = "lucy";
		   var username = "";
		   
		   /*
		   if(Boolean(username)){
			   alert("欢迎你" + username);
		   }else{
			   alert("用户名不能为空！");
		   }
		   */
		  
		  /*
		   if(username){
			   alert("欢迎你" + username);
		   }else{
			   alert("用户名不能为空！");
		   }
		   */
		  
		  // 规律:“有"就转换成true,"没有"就转换成false.
		  alert(Boolean(1)); // true
		  alert(Boolean(0)); // false
		  alert(Boolean("")); // false
		  alert(Boolean("abc")); // true
		  alert(Boolean(null)); // false
		  alert(Boolean(NaN)); // false
		  alert(Boolean(undefined)); // false
		  alert(Boolean(Infinity)); // true
		   
		   /*
		   while(10 / 3){
			   alert("hehe");
		   }
		   */
		   
		   for(var i = 0; i < 10; i++){
			   alert("i = " + i);
		   }
		   
		   // Null类型只有一个值,null
			alert(typeof null); // "object"
			
		</script>
	</body>
</html>

String类型

1、在JS当中字符串可以使用单引号，也可以使用双引号。
	var s1 = 'abcdef';
	var s2 = "test";
2、在JS当中，怎么创建字符串对象呢？
两种方式：
	第一种：var s = "abc";
	第二种（使用JS内置的支持类String）： var s2 = new String("abc");
需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
3、无论小string还是大String，他们的属性和函数都是通用的。
4、关于String类型的常用属性和函数？
常用属性：
	length 获取字符串长度
常用函数：
	indexOf			
		获取指定字符串在当前字符串中第一次出现处的索引
	lastIndexOf		
		获取指定字符串在当前字符串中最后一次出现处的索引
	replace			
		替换
	substr			
		截取子字符串
	substring
		截取子字符串
	toLowerCase	
		转换小写
	toUpperCase	
		转换大写
	split	
		拆分字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>String类型</title>
	</head>
	<body>
		<script type="text/javascript">
		   // 小string(属于原始类型String)
		   var x = "king";
		   alert(typeof x); // "string"
		   
		   // 大String(属于Object类型)
		   var y = new String("abc");
		   alert(typeof y); // "object"
		   
		   // 获取字符串的长度
		   alert(x.length); // 4
		   alert(y.length); // 3
		   
		   alert("http://www.baidu.com".indexOf("http")); // 0
		   alert("http://www.baidu.com".indexOf("https")); // -1
		   
		   // 判断一个字符串中是否包含某个子字符串？
		   alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
		   
		   // replace (注意：只替换了第一个)
		   alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
		   
		   // 继续调用replace方法,就会替换第“二”个.
		   // 想全部替换需要使用正则表达式.
		   alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
		   
		   // 考点:经常问 substr和substring的区别？
		   // substr(startIndex, length)
		   alert("abcdefxyz".substr(2,4)); //cdef
		   // substring(startIndex, endIndex) 注意:不包含endIndex
		   alert("abcdefxyz".substring(2,4)); //cd
		   
		</script>
	</body>
</html>

Object类型

Object类型：
1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
2、Object类包括哪些属性？
	prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
	constructor属性
3、Object类包括哪些函数？
	toString()
	valueOf()
	toLocaleString()
4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
换句话说，自己定义的类中也有prototype属性。
					
5、在JS当中怎么定义类？怎么new对象？
定义类的语法：
	第一种方式：
	function 类名(形参){
										
	}
	第二种方式：
	类名 = function(形参){
										
	}
创建对象的语法：
	new 构造方法名(实参); // 构造方法名和类名一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object类型</title>
	</head>
	<body>
		<script type="text/javascript">
		   function sayHello(){
			   
		   }
		   
		   // 把sayHello当做一个普通的函数来调用.
		   sayHello();
		   
		   // 这种方式就表示把sayHello当做一个类来创建对象.
		   var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.
		   
		   // 定义一个学生类
		   function Student(){
			   alert("Student.....");
		   }
		   
		   // 当做普通函数调用
		   Student();
		   
		   // 当做类来创建对象
		   var stu = new Student();
		   alert(stu); // [object Object]
		   
		   // JS中的类的定义,同时又是一个构造函数的定义
		   // 在JS中类的定义和构造函数的定义是放在一起来完成的.
		   function User(a, b, c){ // a b c是形参,属于局部变量.
			   // 声明属性 (this表示当前对象)
			   // User类中有三个属性:sno/sname/sage
			   this.sno = a;
			   this.sname = b;
			   this.sage = c;
		   }
		   
		   // 创建对象
		   var u1 = new User(111, "zhangsan", 30);
		   // 访问对象的属性
		   alert(u1.sno);
		   alert(u1.sname);
		   alert(u1.sage);
		   
		   var u2 = new User(222, "jackson", 55);
		   alert(u2.sno);
		   alert(u2.sname);
		   alert(u2.sage);
		   
		   // 访问一个对象的属性,还可以使用这种语法
		   alert(u2["sno"]);
		   alert(u2["sname"]);
		   alert(u2["sage"]);
		   
		   // 定义类的另一种语法
		   /*
		   Emp = function(a, b){
			   this.ename = a;
			   this.sal = b;
		   }
		   */
		  
		  Emp = function(ename,sal){
			  // 属性
			  this.ename = ename;
			  this.sal = sal;
		  }
		  
		  var e1 = new Emp("SMITH", 800);
		  alert(e1["ename"] + "," + e1.sal);
		  
		   Product = function(pno,pname,price){
			   // 属性
			   this.pno = pno;
			   this.pname = pname;
			   this.price = price;
			   // 函数
			   this.getPrice = function(){
				   return this.price;
			   }
		   }
		   
		   var xigua = new Product(111, "西瓜", 4.0);
		   var pri = xigua.getPrice();
		   alert(pri); // 4.0
		   
		   // 可以通过prototype这个属性来给类动态扩展属性以及函数
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // 调用后期扩展的getPname()函数
		   var pname = xigua.getPname();
		   alert(pname)

			// 给String扩展一个函数
		   String.prototype.suiyi = function(){
			   alert("这是给String类型扩展的一个函数，叫做suiyi");
		   }
		   
		   "abc".suiyi();
		   
		</script>
	</body>
</html>
<!--
	java语言怎么定义类，怎么创建对象？（强类型）
		public class User{
			private String username;
			private String password;
			public User(){
				
			}
			public User(String username,String password){
				this.username = username;
				this.password = password;
			}
		}
		User user = new User();
		User user = new User("lisi","123");
		
	JS语言怎么定义类，怎么创建对象？（弱类型）
		User = function(username,password){
			this.username = username;
			this.password = password;
		}
		var u = new User();
		var u = new User("zhangsan");
		var u = new User("zhangsan","123");
-->

null NaN undefined这三个值有什么区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined这三个值有什么区别</title>
	</head>
	<body>
		<script type="text/javascript">
			// == 是等同运算符
			alert(1 == true); // true
			alert(1 === true); // false
			
			// null NaN undefined 数据类型不一致.
			alert(typeof null); // "object"
			alert(typeof NaN); // "number"
			alert(typeof undefined); // "undefined"
			
			// null和undefined可以等同.
			alert(null == NaN); // false
			alert(null == undefined); // true
			alert(undefined == NaN); // false
			
			// 在JS当中有两个比较特殊的运算符
			// ==(等同运算符：只判断值是否相等)
			// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
			alert(null === NaN); // false
			alert(null === undefined); // false
			alert(undefined === NaN); // false
		</script>
	</body>
</html>