day16学习 前端JavaScript 基础

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量307 收藏
点赞数
文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cosumerD/article/details/125772487
版权

JavaScript基础

JS (JavaScript) 控制网页的行为

JS是互联网中最流行的脚本语言， 网页、小程序、app等

  1. JS是脚本语言

  2. JS是轻量级的编程语言

  3. JS是可插入HTML页面的编程代码

  4. 所有现代浏览器均可执行JS代码

JS代码可以借助<script>标签放到<head>或者<body>标签中

JS是由三部分组成：JS语法、文档对象（DOM）、浏览器对象（BOM）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 第一种js引入方式 -->
		<script type="text/javascript">
			// js代码注释（单行注释）
			/*
			js代码注释的多行注释
			*/
		   // document --> 指代HTML
		   // write --> 写入
		   document.write("<h1>这是一个标题</h1>")
		   document.write("<p>这是一个段落</p>")
		</script>
		
		<!-- 第二种引入js方式 -->
		<script type="text/javascript" src="js/demo1.js"></script>
	</body>
</html>

分支结构

  • 语法1：
    if(条件语句){
    代码块
    }else{
    代码块
    }

  • 语法2：
    if (条件){
    代码块
    }else if(条件){
    代码块
    }else if(条件){
    代码块
    }else{
    代码块
    }

分支结构：else可以省略不写

  • 三目运算符：
    • python版：结果1 if 条件 else 结果2
    • java、c、js版：条件?结果1:结果2 - 条件成立，结果1；反之，结果2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 定义变量
			// 变量名 = 变量值（全局变量）
			num = 1
			// consol：控制台
			// log：日志
			console.log(num)
			
			// var 变量名 = 值（函数中的局部变量）
			var age = 18
			console.log(age)
			
			// let 变量名 = 值（{}中的局部变量）
			let gender = '男'
			console.log(gender)
			
			// const 变量名 = 值（常量）
			const stu_id = 'python001'
			console.log(stu_id)
			
			// 2. 运算符：
			// 1）数学运算符：+、-、*、/、%、**
			console.log(1 + 1)
			console.log(2 / 3)
			console.log(2 % 3)
			
			// 2）比较运算符：>、<、>=、<=、==、!=、===、!==
			console.log(10 > 20)	// false
			// 两边的元素转化成字符串以后是否相等
			console.log(5 == 3)
			console.log('5' == 5)		// true
			// 两边的元素转化成字符串以后是否不相等
			console.log('5' != 5)		// false
			// === 直接判断两边数据是否相等
			// !== 直接判断两边数据是否不相等
			
			// 3）赋值运算符：=、+=、-=、*=、/=、**=、%=
			num_1 = 3
			num_2 = 6
			num_1 += num_2
			// 和python同理
			console.log(num_1)
			
			// 逻辑运算符：&&（逻辑与）、||（逻辑或运算）、!（逻辑非运算）
			console.log(4 > 3 && 4 < 5)
			console.log(4 > 3 && 4 > 5)
			console.log(4 > 3 || 4 > 5)
			console.log(!(4 > 3 || 4 > 5))
		  
		  
		  age = 18
		  if (age >= 18){
			  console.log('成年')
		  }else{
			  console.log('未成年')
		  }
		  
		  console.log(age >= 18?'成年':'未成年')
		  
		  year = 2000
		  if(year % 4 === 0 && year % 100 !== 0){
			  console.log('闰年')
		  }else if(year % 400 === 0){
			  console.log('闰年')
		  }else{
			  console.log('平年')
		  }
		  
		  weight = 60
		  height = 1
		  if (18.5 <= weight/(height ** 2) && weight/(height ** 2) <= 24.9){
		  	console.log(true)
		  }else{
		  	console.log(false)
		  }
		</script>
	</body>
</html>

循环

  1. for-in循环
    for(变量 in 序列){代码块}

  2. while
    while(条件语句){代码块}

  3. 传统for循环
    for(表达式1;表达式2;表达式3){代码块}

  4. 传统for循环改while循环
    表达式1

    while(表达式2){

    ​ 代码块

    ​ 表达式3

    }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>		
			// 计算1到100的和
			// while循环
			i = 1
			total = 0
			while (i <= 100){
				total += i
				i += 1
			}
			console.log(total)
			// 传统for循环
			total = 0
			for (i=0;i<=100;i+=1){
				total += i
			}
			console.log(total)
			
			// for-in循环取的是序列中每个元素的下标
			// 通过 序列[下标] 的形式再将元素取出
			list1 = [10, 20, 30, 40]
			for (i in list1){
				console.log(list1[i])
			}
			
			// document.cookie ----  获取用户的账号密码信息的cookie		
			str1 = 'abc123'
			for (i in str1){
				console.log(i)
			}
		</script>
	</body>
</html>

函数

函数：将重复的代码封装起来，以便重复调用。

作用：

  1. 降低代码的冗余度。
  2. 将执行某一功能的代码封装起来，更容易让人理解

在JavaScript中如何封装函数

  1. 定义函数
    function 函数名(形参列表){函数体}
  2. 调用函数
    函数名(实参列表)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		   
		   // 计算1~N的值
		   function num_total(n){
			   total = 0
			   for (i=1;i<=n;i+=1){
				   total += i
			   }
			   console.log(total)
		   }
		   
		   num_total(100)
		   num_total(50)
		   
		   // 练习：计算10和20的和
		   // 计算100和30的和
		   function num_sum(a, b){
			   console.log(a + b)
		   }
		    
			num_sum(10, 20)
			num_sum(100, 30)
		</script>
	</body>
</html>

数组

  • js中的数组就是Python中的列表

  • 数组只有正向下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			list1 = ['Python', 'JavaScript', 'C', 'HTML']
			// 数组的增删改查
			// 增加：push - 向数组末尾添加新元素
			list1.push('C++')
			console.log(list1)
			
			// 删除：pop() - 删除数组中的最后一个元素
			list1.pop()
			console.log(list1)
			list1.pop()
			console.log(list1)
			
			// 修改
			list1[1] = 'Java'
			console.log(list1)
			
			// 删除：splice(下标,个数) - 从指定下标开始，删除指定个数的数据
			list1.splice(0,2)
			console.log(list1)  
			// ['C']
			
			// 查找：
			console.log(list1.length)
			// 1
			console.log(list1[1])
			// undefined 超出范围
		</script>
	</body>
</html>

字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 字符串：'' 或者 ""
			a = 'abcd'
			b = '1234'
			// 字符串的拼接
			console.log(a + b)
			// 字符串的重复（不可用）
			// console.log(a*2)   NaN
			// 字符串比较大小符合编码值比较大小规则
			console.log(a > b)
			//  true
			// 查看字符串的长度
			console.log(a.length)
			// 格式化输出
			age = 18
			name = '张三'
			str1 = `${name}今年${age}岁`
			console.log(str1)
		</script>
	</body>
</html>

字典

字典：{}表示容器

{key:value} – key:说明； value:值

  1. key:value

  • key:js中可以用引号引起来，也可以不使用引号；

  • python中key如果是字符串，必须使用引号

  1. 调用字典中的元素
    • 方法一：字典[key] - []中的key必须加引号（Python只能使用 字典[key]）
    • 方法二：字典.key - .key不需要加引号
  2. 字典的长度（字典是无序的，没有长度，JavaScript和python都一样）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			stu_info_dict = {name:'小红', age:20, score:100, weight:50,height:170}
			console.log(stu_info_dict)
			
			console.log(stu_info_dict['name'])
			console.log(stu_info_dict.name)
		
			// console.log(stu_info_dict.length)
			
			// 字典的实际应用
			stu = [
				{name:'李华', age:20},
				{name:'李刚', age:25},
				{name:'小明', age:17}
			]
			// 将成年的学生的名字打印出来
			for (x in stu){
				if (stu[x]['age'] >= 18){
					console.log(stu[x]['name'] )
				}
			}
		</script>
	</body>
</html>
奶盖er
关注
【前端开发基础】一篇文章速学JavaScript
等风来
01-08 2103
HTML 定义了网页的内容、CSS 描述了网页的布局，而 JavaScript 控制了网页的行为。HTML 中的 Javascript 脚本代码必须位于 与 标签之间，同时含有 Javascript 代码的可被放置在 HTML 页面的 和 部分中
前端 - JavaScript(基础语法)
旧时言的博客
04-24 5096
JavaScript 初识 JavaScript JavaScript 是什么 JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了. 当前 JavaScript 已经成为了一个通用的编程语言 JavaScript 的能做的事情: 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务
从JavaScript基础开始学习前端Day09
qq_46051366的博客
04-29 3531
1、初识JavaScript （JavaScript的历史等相关知识，百度百科都可以了解到，这里就不去浪费文字去重复阐述了） 2、 3、 4、 5、 6、 7、 8、
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 4015
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
day01-02前端基础
weixin_46164192的博客
06-04 1657
AJavaScriptAndXML，异步JavaScript和XML数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据异步交换：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等快速入门：访问官网、复制组件代码，调整。
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3102
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
前端学习 DAY06
Nancyuojuiivk的博客
07-14 640
前端学习DAY06。
前端学习Day26-Javascript
ITsheng_ge的博客
07-22 296
Javascript的基础知识
前端 之 JavaScript基础
Hello LinWoW~ ⊙o⊙
05-31 2508
JavaScript 简介 avaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 Javascript的引入方式 第一种：外部引入：js代码块出现在外部js文件中,需要通过script标签src属性进行链接。 <script type...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是...在头歌教学实践平台的Web前端开发课程中，这些基础知识的学习和实践将为你的编程技能打下坚实的基础。
前端 javascript es9语法学习
12-25
JavaScript是Web开发中不可或缺的一部分，特别是在前端领域。ES9，全称ECMAScript 2018，是JavaScript的一种版本，引入了许多新特性，增强了语言的功能性和表达力。本篇文章将深入探讨ES9中的关键语法，包括rest参数...
JavaScript基础练习_day11
10-26
### JavaScript基础练习_day11知识点解析 #### 一、变量声明与作用域 **知识点概述：** 本部分内容涉及JavaScript中的变量声明方式以及不同声明方式之间的区别。JavaScript中有多种声明变量的方式，每种方式都有其...
JavaScript基础练习_day13
02-28
### JavaScript基础练习_day13知识点总结 #### 一、JavaScript数据类型 1. **基本数据类型**：在JavaScript中，基本数据类型包括`number`、`string`、`boolean`、`null`、`undefined`、`bigint`、`symbol`。 - `...
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1224
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 258
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Vue根实例、实例总结
m0_54007573的博客
10-04 574
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1448
vue-live2d看板娘集成方案设计使用教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值