前端路线--JavaScript篇（day01）

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量231 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/122480519
版权

编程语言

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#box{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	<script>
		// HTML：结构层，提供网页的结构，提供网页中的内容。
		// CSS: 表示层，用来美化网页。
		// JavaScript：行为层，可以用来控制网页内容，给网页增加动态的效果，用于跟用户的交互。
		
		// java       是编译形语言
		// javaScript 解释型语言

		// javaScript 是一个脚本语言,可跨平台，支持面向对象


		// javaScript 一旦报错，后面的代码就不会再执行了

		//1、找到元素
		var box = document.getElementById('box');


		box.onclick=function(){

			alert('hello JavaScript');
			box.innerText = 'hello JavaScript';
		}
	</script>
</body>
</html>

JS引入–行内引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- // js的行内使用方式 -->
	<a href="javascript:;alert('hello world')">点我</a>

	<div onclick="alert('再次弹出')">再点我</div>
</body>
</html>

JS引入–内部引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// js的内部使用方式
		
		alert('内部使用方式弹出')
	</script>
</body>
</html>

JS引入–外部引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<!-- js的外部使用 -->
	<script src="04-js外部使用.js"></script>

	<!-- 总结：内部使用script标签不用加src属性、外部使用必须加上src引入外部文件 -->
</body>
</html>

JS外部使用

alert('外部使用方式弹出')

window对象的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<script>
			// window是浏览器的顶级对象----一个页签就有一个window对象

			console.log(window)
			// window是可以省略的，window下面的方法，书写时可以省略window

			// 警告框
			window.alert('弹出的内容');
			alert('弹出的内容222');

			// 确认框
			confirm('你确认要删除数据吗？');

			// 输入框、
			prompt('你多大了？');
	</script>
</body>
</html>

window对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<script>
			//日志信息
			window.console.log('打印出消息');

			// 错误信息
			console.error('错误信息提示');

			//警告信息
			console.warn('警告信息');

			// 普通信息
			console.info('普通信息');

			// 调试信息
			console.debug('调试信息');

			// dir打印对象的所有属性和方法
			console.dir(window)


			// 注意点：单套双。双套单。禁止双套双、单套单
	</script>
</body>
</html>

window对象的document.write()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<h1>输出到html文档</h1>

	<script>
		// 输入到文档

		/*多行注释
		多行注释*/
		
		document.write('输出到html文档');
		document.write('<h1>输出到html文档</h1>');
		document.write('<img src="../课件/media/neicun1.png" alt="">');
	</script>
</body>
</html>

定义变量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// js里面创建的变量可以保存任何类型：数字、文字、数组、对象

		// 使用关键字var 来声明变量
		var a;
		// 给变量进行赋值
		a = 100;

		var age = prompt('你今年多大了？');
		// console.log(age);

		// 变量：可以变化的量，存放数据的容器

		// 1、声明变量并且赋值
		var num1 = 100;

		// 2、通时声明多个变量
		var str1,str2,str3;
		str1 = 'abc';
		str2 = 'def';
		str3 = 'ghi';

		// 3、同时声明变量并且赋值
		var fun1 = 10,
			fun2 = 100;

		// 等价于 = 
		// var fun1 = 10;
		// var fun2 = 100;

		// 4、一个var同时声明和赋值(不建议)
		var age1 = age2 = 19;

		// 等价于
		// var age1 = 19,
		// 	age2 = 19;


		console.log(age2)
	</script>
</body>
</html>

变量的命名规则

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// 由大小写字母、数字、下划线和美元符号（$）组成。
		// A a 1 _ $
			// 1、不能以数字开头。
			// 2、严格区分大小写
			// var name 和 var Name  这是两个变量名
			// 3、不能使用JavaScript中的关键字和保留字命名。
			// 4、要尽量要做到“见其名知其意”。

		// 小驼峰式命名
			// backGroundColor
		// 大驼峰式命名
			// BackGroundColor
	</script>
</body>
</html>

变量的声明提升

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		console.log(age);
		var age = 10;

		// 变量声明的提升
		// 由于变量的声明会被提升到当前作用域的最顶端，而赋值不会被提升

		// 等价于
		var age;
		console.log(age);
		age = 10;
	</script>
</body>
</html>

基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// 五种基本数据类型

		// 1、布尔值类型 Boolean
				// 值分为：true  false

		//男
		var gender1 = true;

		// 女
		var gender2 = false;

		// 2、数值型 Number
		var num1 = 10;
		var num2 = 3.1415926;
		var num3 = -100;

		// 3、字符串类型  String
			// 特点：被单引号或者双引号包着的都是字符串
		var str1 = 'abc';
		var str2 = 'welcome to haogu';
		var str3 = '1234';
		var str4 = '1234!@#$$%%^';
		var str5 = '"red"blue';
		var str5 = 'false';
		var str6 = '';    //定义一个空字符串

		console.log(str5)
		console.log(str6)

		// 4、未定义  Undefined
		// 表示未赋值的变量
		var flag;
		console.log(flag)

		// 5、空的 Null   (空的对象、无效的或者失效的)
		var nullNum = null;
		console.log(nullNum)
	</script>
</body>
</html>

复合数据类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// 复合数据类型  -- 引用数据类型

		var person = {

			id:'001',
			name:'张三',
			age:19,
			gender:true

		}

		console.log(person)
	</script>
</body>
</html>

检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		
		var num = 100;
		var str = 'hello';
		var flag = true;
		var age;
		var nullVar = null;
		var person = {
			id:'001',
			name:'张三',
			age:19,
			gender:true
		}

		console.log(typeof(num))      //number
		console.log(typeof str)       //string
		console.log(typeof flag)      //boolean
		console.log(typeof age)       //undefined
		console.log(typeof nullVar)   //object
		console.log(typeof person)    //object
	</script>
</body>
</html>

数据类型转换布尔值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		
		// Boolean()  转换成布尔值
		var person = {
			id:'001',
			name:'张三',
			age:19,
			gender:true
		}
		// 以下几种类型会转换成true:
			// 非0的数字、非空的字符串、对象、true
		console.log(Boolean(123));      
		console.log(Boolean(123.456));
		console.log(Boolean(-1));
		console.log(Boolean('123'));
		console.log(Boolean(person));
		console.log(Boolean(true));
		// 以下几种类型会转换成false:
			// false、undefined、null、NaN、空字符串、0
		console.log(Boolean(false));
		console.log(Boolean(undefined));
		console.log(Boolean(null));
		console.log(Boolean(NaN));
		console.log(Boolean(''));
		console.log(Boolean(0));
	</script>
</body>
</html>

数据类型转换数值型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		
		// Number()  强制转换成数值型
		console.log(Number('123'));     //123
		console.log(Number('123abc'));  //NaN
		console.log(Number('abc123'));  //NaN
		console.log(Number(''));        //0
		console.log(Number(false));     //0 
		console.log(Number(true));      //1
		console.log(Number(null));      //0
		console.log(Number(undefined)); //NaN
		console.log(Number({myName: '李四'})); // NaN
		// NaN  是一种特殊的数字类型 not a number 这不是一个数字


		// parseInt()  转换成整数值 
		console.log(parseInt('123.456')); //123
		console.log(parseInt('123'));     //123
		console.log(parseInt('123abc'));  //123
		console.log(parseInt('abc123'));  //NaN
		console.log(parseInt(''));        //NaN
		console.log(parseInt(false));     //NaN
		console.log(parseInt(true));      //NaN
		console.log(parseInt(null));      //NaN
		console.log(parseInt(undefined)); //NaN
		console.log(parseInt({myName: '李四'})); // NaN

		// parseFloat()  转换成浮点型
		console.log(parseFloat('123.456')); //123.456
		console.log(parseFloat('123'));     //123
		console.log(parseFloat('123abc'));  //123
		console.log(parseFloat('abc123'));  //NaN
		console.log(parseFloat(''));        //NaN
		console.log(parseFloat(false));     //NaN
		console.log(parseFloat(true));      //NaN
		console.log(parseFloat(null));      //NaN
		console.log(parseFloat(undefined)); //NaN
		console.log(parseFloat({myName: '李四'})); // NaN
	</script>
</body>
</html>

isNaN

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// 用于检查其参数是否是非数字值（isNaN() 函数）
		// 在检查之前会进行数值型强制类型转换，在检查
		console.log(isNaN(10));        //false
		console.log(isNaN('10'));      //false
		console.log(isNaN(true));      //false
		console.log(isNaN(false));     //false
		console.log(isNaN(null));      //false
		console.log(isNaN('abc'));     //true
		console.log(isNaN('abc'));     //true
		console.log(isNaN(undefined)); //true
	</script>
</body>
</html>

转换成字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>

	<script>
		// String()   转换成字符串

		// 任何类型转换成字符串就是添加一个单引号或者双引号

		console.log(String(123))  
		console.log(123)
		console.log(String(undefined))
		console.log(undefined)

		// 'true'   'null'
	</script>
</body>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3920
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
前端 - JavaScript(基础语法)
旧时言的博客
04-24 4967
JavaScript 初识 JavaScript JavaScript 是什么 JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了. 当前 JavaScript 已经成为了一个通用的编程语言 JavaScript 的能做的事情: 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务
前端路线--Ajax（day01）
Yan9_9的博客
03-20 1186
计算机网络知识 JSON <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //Json对象的两种格式: /* JSON数据中的值的类型:null
前端路线--JS高阶（day02）
Yan9_9的博客
03-14 1375
实例成员和静态成员 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //构造方法 function Person (name,age) { this.name=
前端路线--Ajax（day03）
Yan9_9的博客
03-23 3546
同源策略和跨域 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p><input type="text"></p> <button>get请求</button> <div class="box">
day01-02前端基础
weixin_46164192的博客
06-04 940
AJavaScriptAndXML，异步JavaScript和XML数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据异步交换：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等快速入门：访问官网、复制组件代码，调整。
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3687
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
系统学习前端之CSS---day01
weixin_63522291的博客
12-24 1309
和
前端实用插件-日期处理工具Day.js
qq_38192105的博客
10-30 1362
day.js工具使用介绍，基础实用方法介绍
前端面试-基础篇
GarfieldEr007的专栏
02-02 4981
第一部分：基础篇 #一、HTML、HTTP、web综合问题 #1 前端需要注意哪些SEO 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；...
JavaScript Day_01
03-24
javascript学习第一天笔记
service-day-glow:前端顶点
05-18
文献资料技术领域 入门克隆Github存储库： $ git clone https://github.com/souperhost-3000/service-day-glow.git 浏览目录./service-day-glow并运行以下命令： $ npm install $ npm run build $ npm start 打开一...
vito的Web前端学习_JavaScript_Day1
03-04
vito的Web前端学习_JavaScript_Day1
Intermediate-JavaScript-Two-Day:这是为期两天的中级 JavaScript 课程的课程表
06-11
#中级 JavaScript ### DOM 选择 内部HTML 使用属性 处理事件 ### AJAX 使用对象和数组 使用 Handlebars 的前端模板 将事件与动态数据相结合
JavaScript Day_03
03-24
javascript学习第三天笔记
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 604
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1346
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 496
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 561
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
前端把2023-12-30转为Date格式
04-20
可以使用JavaScript中的Date()函数将日期字符串转为Date格式。代码示例如下： ``` var dateString = '2023-12-30'; //需要转化的日期字符串 var date = new Date(dateString); //将日期字符串转化为Date对象 ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值