Web Day4

最新推荐文章于 2024-07-24 23:00:08 发布

丨陈墨瞳丨

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量131

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_51944132/article/details/132817073

版权

Web

day4_2023.9.11

JavaScript

基本概念： js是一门客户端脚本语言，运行在客户端浏览器中的，每个浏览器都有一个js的解析引擎，JS
是一个弱类型的语言。
**脚本语言：**不需要编译的，直接可以被浏览器解析执行
功能： 用来增强用户和html页面的交互，也可以用来控制html元素

1992 nombase 开发第一个脚本语言专门用来做表单验证命名 C-- ScriptEase

1995 网景 netscape LiveScript 同年Java发布 -> JavaScript

1996 微软开发 Jscript 搭载ie浏览器

1997 ECMA（欧洲计算机制造协商会），指定标准，统一了脚本语言

JavaScript ： ECMAScript + JavaScript特有的东西（BOM+DOM）

JS在HTML中的用法

1，行内写法，将js代码写在html标签中

2，文档内部写法，将js代码写在一对

3，外部引入js文件，将js代码，单独写在一个文件中，使用

alert("你好，这是外部引入的js代码！")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 外部引入方式 -->
	<script src="js/test.js"></script>
	<body>
		<button onclick="javascript:alert('按钮被点击了')">按钮</button>
	</body>
	<!-- 内部引入方式 -->
	<script>
		alert("弹出弹框");
	</script>
</html>

JS中的常用内容

注释：和Java中一样

单行： //

多行 : /* */

输出内容
1,弹出弹框 alert()
2,网页上输出 document.write()
3,控制台输出 console.log()
4,通过dom展示到标签中 document.getElementById(“id值”).innerHTML = “展示内容”

JS中数据类型

1，原始数据类型
Number ：整数、小数、NaN(not a number) 非数字
String ：双引号或者单引号引起来的
Boolean ： true 或 false
Null ：null
Undefined ：undefined

JS中的变量

变量的概念：程序运行的过程中，用来存储数据的一个名称，是可以改变的，本质上其实是内存的一个空间
Java是强类型语言，js是弱类型语言，声明变量的区别
强类型：开辟空间的时候，指定数据类型，将来空间中只能存放指定的类型
弱类型：开辟空间的时候，不指定具体的存放类型，可以存放任意类型的数据

语法： var 变量名 = 值; let 变量 = 值 ; const 常量名 = 值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		// 变量的声明
		// int a = 10;
		var a = 10;
			a = "abc";
			a = true;
			a = undefined;
		console.log(a);
			b = 100;
		console.log(b);
		
		//Number类型
		var num1 = 10;
		var num2 = 100.12;
		var num3 = NaN;
		console.log(num1);
		console.log(num1+num2);
		console.log(typeof(num1));
		//字符串
		var s1 = "abc";
		var s2 = 'abc';
		var s3 = s1 + num1;
		console.log(s3);
		//boolean
		var b1 = true;
		
		//Null
		var s4 = null;
		var s5 = undefined;
		var s6 ;
		console.log(s4);
		console.log(s5);
		console.log(s6);
		
		
		
		//作用域问题
		function fun(){
			var name = 'jack';  //全局作用域
			age = 20;   //局部作用域
			let gender = '男'; //局部作用域
		}
		
		console.log(name);
		// console.log(age);
		console.log(gender);
	</script>
</html>

JS中的运算符

赋值运算符： =

算数运算符： + - * / %

js中除法会返回小数

比较运算符： > < >= <= == ===

== : js中的==是判断值是否相同，不同类型，值相同也返回true

=== ： js中的=== 判断值和类型是否都相同，如果都相同，则返回true

逻辑运算符：&&，|| ，！

!取反，在js中可以完成数据隐式的转换


  	var num4 = -100;
		var num5 = "100";
		console.log(num4 == num5);  //值相等
		console.log(num4 === num5); //false
		
		// console.log( 3 < 5 && num4++ < 200);
		//非0数字加上取反默认被当做布尔值中的true，0被当做false
		console.log(!num4);  
		//非空的字符串遇到!取反，也会被当做布尔值中的true,空字符是false
		console.log(!num5);

一元运算符： ++ –

++a ,先将a+1 ，再将a参与表达式的计算

a++ ,先将a参与表达式运算，再给a+1

二元运算符： += ，-= ，*= ，/=

三源运算符：

变量 = 表达式？值 1 ：值2 ；

如果表达式的结果为true ，那么变量的最终结果是值1

如果表达式的结果是false，那么变量的最终结果是值2

JS中的流程控制语句

if - else 和Java完全相同

switch- case ：和Java中语法格式相同

JS中的循环语句

for循环：和Java中相同

for–in循环：js中for-in循环一般用来遍历数组、对象等内容属性…

while 循环: 和Java中一样

do - while循环：和Java中一样

JS中使用for循环，写一个乘法口诀表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border-collapse: collapse;
			}
			td{
				border: 1px solid #000;
				padding: 10px;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
		document.write("<table>");
		for (var i = 1; i <= 9; i++) {
			document.write("<tr>");
			for (var j = 1; j <= i; j++) {
				document.write("<td>");
				document.write(j + "x" + i + "=" + (i*j) + "&nbsp;");
				document.write("</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
	</script>
</html>

JS中常用对象

JS中的数组

Js中的数组对象，可以使用单独的变量名，存储多个值，其实就是一个容器中，装了很多个元素，js数组中可以存放任意类型的数据

数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

Array 属性

属性描述

constructor 返回创建 Array 对象原型的函数。

length 设置或返回数组中元素的数量。

prototype 允许您向数组添加属性和方法。

Array 方法

方法	描述
concat()	连接两个或多个数组，并返回已连接数组的副本。
copyWithin()	将数组中的数组元素复制到指定位置或从指定位置复制。
entries()	返回键/值对数组迭代对象。
every()	检查数组中的每个元素是否通过测试。
fill()	用静态值填充数组中的元素。
filter()	使用数组中通过测试的每个元素创建新数组。
find()	返回数组中第一个通过测试的元素的值。
findIndex()	返回数组中通过测试的第一个元素的索引。
forEach()	为每个数组元素调用函数。
from()	从对象创建数组。
includes()	检查数组是否包含指定的元素。
indexOf()	在数组中搜索元素并返回其位置。
isArray()	检查对象是否为数组。
join()	将数组的所有元素连接成一个字符串。
keys()	返回 Array Iteration 对象，包含原始数组的键.
lastIndexOf()	在数组中搜索元素，从末尾开始，并返回其位置。
map()	使用为每个数组元素调用函数的结果创建新数组。
pop()	删除数组的最后一个元素，并返回该元素。
push()	将新元素添加到数组的末尾，并返回新的长度。
reduce()	将数组的值减为单个值（从左到右）。
reduceRight()	将数组的值减为单个值（从右到左）。
reverse()	反转数组中元素的顺序。
shift()	删除数组的第一个元素，并返回该元素。
slice()	选择数组的一部分，并返回新数组。
some()	检查数组中的任何元素是否通过测试。
sort()	对数组的元素进行排序。
splice()	从数组中添加/删除元素。
toString()	将数组转换为字符串，并返回结果。
unshift()	将新元素添加到数组的开头，并返回新的长度。
valueOf()	返回数组的原始值。

//数组的定义 
//1，使用new 关键字创建Array对象
var arr = new Array();
var arr1 = new Array(3);
// console.log(arr[3]);
// console.log(arr1[3]);
//2,使用new创建的时候，直接给数组赋值
var arr2 = new Array("1",2,"3");
console.log(arr2[0]);

//3,直接使用[] 声明数组
var arr3 = ["hello","world","java"];
console.log(arr3[2]);

//常见的数组操作
//添加
//1，直接通过下标赋值 
arr[0] = "hello";
arr[1] = "java";
arr[2] = "world";
console.log(arr);
//2,使用push方法
var num = arr.push("oralcle");
console.log(arr);
console.log(num);
//3,使用unshift()方法
var num1 = arr.unshift("mysql");
console.log(arr);
console.log(num1);

//删除数组中最后一个内容
var s1 = arr.pop();
console.log(arr);
console.log(s1);
//删除第一个
var s2 = arr.shift();
console.log(arr);
console.log(s2);
//splice() 可以同时删除、添加
arr.splice(1,2,"oracle","mysql","spring");
console.log(arr);


// 数组的遍历
		for (var i = 0; i < arr.length; i++) {
			console.log(arr[i]);
		}
		console.log("-------------------------")
		for(key in arr){
			console.log(arr[key])
		}
		console.log("-------------------------")
		arr.map(function(value,index){
			console.log(index + "--" + value);
		})


//其他的常用方法 
		//concat()
		var newArr = arr.concat(arr1,arr2);
		console.log(newArr);
		
		//filter() 
		var arr4 = [10,15,36,58,42,18];
		//将aar4中，比20大的数据过滤出来，放到新数组中
		var newArr2 = arr4.filter(function(num){
			if(num > 20){
				return num;
			}
		});
		console.log(newArr2);
		
		//join方法
		var newArr3 = arr.join();
		console.log(newArr3);
		
		//sort()
		
		var arr5 = [10,25,32,22,4,75,68,50];
		//默认的排序是按照第一个值排
		arr5.sort();
		console.log(arr5);
		// 从小到大
		arr5.sort(function(a,b){
			return b-a;
		})
		console.log(arr5);

JS中类型及转换

数字类型方法

toString() 将数字作为字符串返回。

toFixed() 返回带小数位数的数字。

类型转换相关

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

parseFloat() 解析字符串并返回浮点数。

parseInt() 解析字符串并返回整数。

var num = 10.0254152;
		console.log(num);
		var s = num.toString();
		console.log(s);
		
		
		//保留小数位
		console.log(num.toFixed());
		console.log(num.toFixed(2));
		console.log(num.toFixed(4));
		console.log(num.toFixed(6));
		
		//字符串转数字
		var str = "100";
		
		var n1 = Number(str);
		console.log(n1 + "--" + typeof(n1));
		
		console.log(parseInt("10"));
		console.log(parseInt("10.25"));
		console.log(parseInt("10 20 30"));
		console.log(parseInt("10abc"));
		
		
		console.log(parseFloat("10"));
		console.log(parseFloat("10.255165"));
		console.log(parseFloat("10.25 20 30"));
		console.log(parseFloat("10.12abc"));

丨陈墨瞳丨

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Day4

js是一门客户端脚本语言，运行在客户端浏览器中的，每个浏览器都有一个js的解析引擎，JS是一个弱类型的语言。**脚本语言：**不需要编译的，直接可以被浏览器解析执行用来增强用户和html页面的交互，也可以用来控制html元素1992 nombase 开发第一个脚本语言专门用来做表单验证命名 C-- ScriptEase1995 网景 netscape LiveScript 同年Java发布 -> JavaScript。
复制链接

扫一扫