JAVA保姆式上手教程之JAVAWEB day01-js基础

Posted 2023-03-07 云和数据张老师

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JAVA保姆式上手教程之JAVAWEB day01-js基础相关的知识，希望对你有一定的参考价值。

javascript概述

JavaScript简介

一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了

javaScript的发展史

**起源：**上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态html，还想要有动态效果，比如：在前端处理表单验证。
**动手：**有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
**竞争：**看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

JavaScript的功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript特点

js源码不需要编译，浏览器可以直接解释运行
js是弱类型语言，js变量声明不需要指明类型

现代js https://zh.javascript.info/

JavaScript组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OtBmpfl-1677607165221)(asseits/20190815201321445.jpg)]

组成部分	作用
ECMA Script	构成了JS核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

JavaScript基础语法

HTML引入JS

内部js

定义script标签，标签体内容就是js代码

<script>
  
</script>

注意事项

<script>标签可以写在任意位置，推荐写在<body>的尾部。浏览器在执行时，是从下往下依次执行！

外部js

定义

<script src="js/文件名.js"></script>

总结：

script标签不能自闭合
如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码

JS三种输出数据方式

浏览器弹框输出字符

<script>
    alert('浏览器弹框输出字符');
</script>

输出html内容到页面

<script>
    document.write('输出html内容到页面');
</script>

输出到浏览器控制台

<script>
    console.log('输出到浏览器控制台');
</script>

3.3 JS注释

单行注释

// 注释内容

多行注释

/*注释内容*/

JS变量声明

java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。

js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。

语法

定义变量

let 变量名 = 值;
var 变量名 = 值;

定义常量
```
const 常量名 = 值;
```

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 使用let关键字 定义字符串
			let str1 = "你好JS!";
			
			// 使用var关键字 定义字符串
			var str2 = "你好JavaScript!";
			
			console.log(str1);
			console.log(str2);
			
			// 定义整数
			let num = 1314;
			console.log(num);
			
			// 定义浮点数
			let score = 99.9;
			console.log(score);
			
			// 定义boolean类型
			let flag = true;
			console.log(flag);
			
			// 定义常量
			const PI = 3.1415926;
			
			// 常量定义之后值不能改变
			// PI = 1;
			console.log(PI);
			
			// 定义变量a并末赋值，能不能使用?
			let a;
			console.log(a);  // undefined 表示变量末定义类型
		</script>
	</head>
	<body>
	</body>
</html>

注意事项

ECMAScript6之前定义变量使用var 但是会有很多坑，所以ECMAScript6之后开始推出let声明变量，const声明常量
在js中，末赋值的变量，也是可以使用的，但是这个值是undefined,末定义的变量

JS数据类型

js与java一样，数据类型分为基本数据类型(原始数据类型) 和引用数据类型

属性	描述
number	数字类型,不区别整数和小数
string	字符串类型，不区别单双串
boolean	true/false
object	对象(function、null)
undefined	未定义

类型判断

typeof 判断数据类型

语法： typeof 变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 使用let关键字 定义字符串
			let str1 = "你好JS!";
			let str2 =  'a';
			console.log(typeof str1);
			console.log(typeof str2);
			
			// 定义整数
			let num1 = 1314;
			let num2 = 13.14;
			console.log(typeof num1);
			console.log(typeof num2);
						
			// 定义boolean类型
			let flag = true;
			console.log(typeof flag);
			
			// 末定义类型
			let a;
			console.log(typeof a); 
			
			// 引用数据类型
			let obj = new Object();
			console.log(typeof obj); 
			
		</script>
	</head>
	<body>
	</body>
</html>

输出结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tD0lr0RD-1677607165223)(assets/image-20210127142737311.png)]

JS运算符

JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同

运算符	说明
算数运算符	`+`、 `-` 、 `*`、 `/` 、 `%` 、 `++` 、 `--`
赋值运算符	`=` 、 `+=` 、`-=` 、 `*=` 、 `/=` 、 `%=`
比较运算符	`>` 、 `>=` 、 `<` 、 `<=` 、 `==` 、 `===(全等于,仅js)` 、 !=
逻辑运算符	`&&` 、 `
三元运算符	关系表达式 ? 值1 : 值2;

算数运算符

在js中数值可与字符串进行数学运算，底层实现隐式转换。

<script type="text/javascript">
    let str = "10";
    let num = 20;
    console.log(str + num); // 1020
    console.log(str - num); // -10 
    console.log(str * num); // 200
    console.log(str / num); // 0.5
</script>

输出结果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGIvpA12-1677607165224)(assets/image-20210127161617134.png)]

注意事项:

var a = 3;
var b = 4;
var c = "一燕";

alert(a/b);//js相除可以得到小数

alert(typeof(a+c)); // number类与字符串类型相加，字符串拼接

var d = 6;
var f = '4';
alert(d+f);//拼接的64

var a1 = 3;
var a2 = "4";
alert(a1-a2);//1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型

var b1 = 3;
var b2 = "abc";
alert(b1-b2);   //NaN  not a number ;

//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0
var bo1 = true;  
var bo2 = false;
alert(a+bo1);//4
alert(a+bo2);//3

比较运算符

== 、 ===(全等于)之间的区别？

== : 只比较内容是否相同  根本不比较数据类型 
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

<script type="text/javascript">
    let num = 100;
    let str = "100";
    console.log(num == str); // true
    console.log(num === str);// false
</script>

三元运算符

/*
三(目)元运算符？ 
格式：  表达式 ？ 结果1 ： 结果2 ；
如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回
*/
//定义一个变量为3
let a = 3;
//定义一个变量为4
let b = 4;
//页面输出
document.write(a>b ? a : b);

js特有转换

			/*
			  三(目)元运算符？ 
			  格式：  表达式 ？ 结果1 ： 结果2 ；			  
			  如果表达式运算的结果是true,把结果1返回
			  如果表达式运算的结果是false,把结果2返回
			  */			 
			 //定义一个变量为3
			 let a = 3;			 
			 //定义一个变量为4
			 let b = 4;			 
			 let c = 0;
			 
			 //页面输出
			 document.write( (a>b ? a : b) );
			 document.write("<hr>");
			 
			 //在js中表达式不必满足boolean   无意义--》false 
			 //如果满足的 非0 ,非空，非null， 非undefined 为true
			 //如果满足的 是0 ，为空，是null , 是undefined 为false
			 document.write( (c ? a : b) );

JS流程控制语句

js与java一样，也有三个流程控制语句：顺序结构选择结构循环结构

选择结构

if结构

<script type="text/javascript">
    if (条件表达式) 
        代码块;
     else if(条件表达式)
        代码块;
     else 
        代码块;
    
</script>

注意事项

JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。

JS中对各种数据类型作为布尔值有以下特点：

类型	用法
boolean	true为真、false为假
number	非0为true
string	除了空字符串(“”)，其他都是true
null&undefined	都是false
对象	所有对象都为true

总结：无意义的数据都为false 反之都为true

<script type="text/javascript">
    let obj = new Object();
    //if...elseif...else
    //if(true)
    //if("")//string只有空字符为假
    //if(0)number只有0为假
    //if(false)//booleanfalse为假true为真  //if(null)//objectnull为假
    //if(undefined)//undefined永为假
    //	if("undefined")  // 这不是undefined类型，而是字符串，内容是undefined
    if(obj)  // 对象
        console.log("满足条件");
     else 
        console.log("不满足条件");
    
</script>

switch结构

<script type="text/javascript">
 			var score = 90;//定义一个变量			
			/* parseInt 取整的一个函数（方法） */			
			/* 
		注意事项： 
			1、switch表达式一定会先找case,找到后一定要给break
			2、switch给位置没有关系，跟case有关
			3、如果找到后没有break，可以继续执行，直到找到break或都程序结束
			 */
			
			switch(parseInt(score/10))
				case 10:
				case 9:
					alert("学霸");
					// break;
				default:
					alert("学渣");
					// break;
				case 8:
					alert("优秀");
					// break;
				case 7:
					alert("还行");
					break;	
						
</script>

注意事项

* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
	case 值:
* 在JS中,switch语句可以接受任意的原始数据类型

循环结构

for循环

普通for循环

for(let 初始化语句; 条件表达式; 条件控制语句)
    循环体;

增强for循环

for(let 变量名 of 对象)
    需要执行的代码;

索引for循环是js特有

for(let 变量 in 对象)
    需要执行的代码;

代码演示

<script type="text/javascript">
    // 定义数组
  let arr = ["张三","李四","王五"];

    console.log("普通for循环");    
    for (let i = 0 ; i < arr.length ; i++) 
        console.log(arr[i]);
    
    console.log("for of循环");
    // for of循环
    for (let e of arr) 
        console.log(e);
    

    console.log("forin循环");
    // for in循环
    for (let index in arr) 
        console.log(arr[index]);
    
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hxwMRY46-1677607165225)(assets/image-20210129144907236.png)]

forof 与 forin之间的区别

forin可以遍历对象,forof不能遍历对象
forin遍历出数组中的索引,forof遍历出数组中的元素

while循环

<script>    
    		/* 
				for一般用在某一个范围中循环
				while一般用在一个确定范围中循环
				
				for中的var i = 1;这个只能在for循环中使用
				while中的var i = 1; 可以全局中使用
			 */
			
			for(let i = 1; i <= 10; i++)
				document.write(i);
				document.write("<br>");
			
			// document.write(i);		
			document.write("<hr>");
			
			let y = 1; 
			while( y <= 10)
				document.write(y);
				document.write("<br>");
				 y++;
			
			// document.write(y);
			
			document.write("<hr>");
			
			 //1 ~ 100 求和
			 let sum = 0;
			 let num = 1;
			 while(num <= 100)
				 sum += num;
				 num++;
			 			
			document.write(sum);
    </script>

doWhile循环

do…while循环就不再单独演示，跟java中的do…while循环用法是一致的！

	<script>			
			//定义了一个变量
			let a = 1;
			do
				//循环体，至少执行一次
				document.write(a)
				a++;
			while(a <= 10);//循环判断条件		
	</script>

循环总结

while 和Java一样 
do while 和Java一样
重点掌握:
	普通for 与 java一样
	forin：遍历出数组的索引 
		   遍历出对象中的属性名key
	forof: 遍历数组中的元素

JS函数(方法)

js函数是执行特定功能的代码块.也可以称为js方法。与java中的方法的功能是一样的。

语法

function 函数名(参数列表)
    函数体;
    [return 返回值;]

函数的第一种定义方式

<script type="text/javascript">
  			//1.无参无返回值的方法
			function demo()
				let a = 3;
				let b = 4;
				alert(a+b);
			
			//方法必须调用，不调用不执行
			demo();	
			//2.有参无返回值的方法
			function demo2(a,b)
				alert(a+b);
			
			demo2(4,6);			
			//3.无参有返回值的方法
			function demo3()
				return 4+4;
			
			let sum = demo3();
			alert(sum);
			//4.有参有返回值的方法
			function demo4(a , b , c)
				return a+b+c;
			
			let d =  demo4(2,3,4);
			alert(d);
			/* 
				到底什么是方法呢？
					就是完成某一个功能的代码块
			
				如何写一个方法？
					写方法要考虑参数列表
					是否要返回给调用者，如果要返回就必须给一个关键字 return
					
					【1、考虑参数列表，2、考虑返回值】				
				
				如何调用一个方法？
					确定方法名，以及方法参数列表
					如果有return，必须要接受方法返回的结果
			 
					【1、考虑参数列表，2、考虑返回值】
			 */
</script>

函数的第二种定义方式

		<script>
			/* 
				比较复杂，只需要了解，开发很少使用
			 */
			var demo = new function("a,b", "alert(a+b)");
			demo(4,4);
		</script>

3.匿名函数

		<script>			
			/* 匿名函数: 了解 */
			var demo  = function()
				alert(77);
						
			demo();			
		</script>

如何绑定一个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function demo()
				alert("我是小面包，你是谁啊？");
			
		</script>
	</head>
	<body>		
	<input type="button" value="你点我啊小饼干" onclick="demo()" />
	</body>
</html>

如何获取标签中的内容

		<script>
			function demo()
				//获取p标签
				var pid = document.getElementById("pid");
				
				//获取p标签中的内容
				// alert(pid.innerHTML);
				
				//修改标签中的内容
				pid.innerHTML = Maix Bit（K210）保姆级入门上手教程---环境搭建
 JAVA零基础小白入门上手教程之day22-JDK新特性
 git教程2--远程仓库中的操作（保姆级教程，好上手)
 张晨光-JAVA零基础保姆式技术教程之-事务
 git教程1--如何操作本地仓库（保姆级教程，好上手）
 IDEA 2022专业版创建Java Web项目（保姆式小白讲义，强烈建议入手！）

JAVA保姆式上手教程之JAVAWEB day01-js基础

javascript概述

JavaScript简介

javaScript的发展史

JavaScript的功能

JavaScript特点

JavaScript组成

JavaScript基础语法

HTML引入JS

内部js

外部js

JS三种输出数据方式

浏览器弹框输出字符

输出html内容到页面

输出到浏览器控制台

3.3 JS注释

单行注释

多行注释

JS变量声明

语法

定义变量

定义常量

代码演示

JS数据类型

JS运算符

算数运算符

比较运算符

三元运算符

js特有转换

JS流程控制语句

选择结构

if结构

switch结构

循环结构

for循环

代码演示

forof 与 forin之间的区别

while循环

doWhile循环

循环总结

JS函数(方法)

语法

函数的第一种定义方式

函数的第二种定义方式

3.匿名函数

如何绑定一个函数

如何获取标签中的内容