小李学的JavaScript之JS_01

最新推荐文章于 2022-11-23 10:17:55 发布
最新推荐文章于 2022-11-23 10:17:55 发布
阅读量309 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44171009/article/details/111067767
版权
本文介绍JavaScript的基础知识，包括如何在网页中输出信息、基本语法、数据类型及其转换等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

输出Hello World

  • 利用Alert()输出一个弹窗信息
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<!--JS代码需要编写到SCript标签内-->
		<script type="text/javascript">
			//控制浏览器弹出一个警告框
			alert("这是我的第一行JS代码");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • 利用document.wirte()向页面输出一个内容，作为body的内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<!--JS代码需要编写到SCript标签内-->
		<script type="text/javascript">
			//利用计算机在页面中输出一个内容
			document.write("你看我出不出来");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • 向控制台输出一个内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello world</title>
		<!--JS代码需要编写到SCript标签内-->
		<script type="text/javascript">
//			向控制台输出一个内容
			console.log("你猜我这次会出现在哪里");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • 将JS代码编写到button上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS书写位置</title>
	</head>
	<body>
		<!--可以将JS代码编写到button上-->
		<button onclick="alert('你点我干啥！')">点我一下</button>
	</body>
</html>

在这里插入图片描述
很明显点击一下就会有弹出，onclick是单击的意思

  • 还可以将Js代码写到a标签内部
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS书写位置</title>
	</head>
	<body>
		<!--可以将JS代码编写到button上-->
		<button onclick="alert('你点我干啥！')">点我一下</button>
		<!--还可以将js代码写到a标签的href属性中，这样点击a标签时就会执行-->
		<a href="javascript:alert('没想到身为a标签的我也能弹窗吧')">我能点击你信不信</a>
	</body>
</html>

在这里插入图片描述

  • 利用外部引用js文件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS书写位置</title>
		<!--还可以使用外部引用的javascript方式			
		这样的话利用了浏览器的缓存机制-->
		<script type="text/javascript" src="js/JS_02.js">			  </script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

基本语法

1.JS中严格区分大小写
2.JS每条语句以分号结尾，如果不写分号，浏览器会自己添加但是会消耗系统资源
3.JS会忽略多个空格或者换行

字面量和变量

字面量：字面量都是一下不可改变的值,例如1,2,3,4,5,6
变量：变量可以保存字面量,也可以任意改变，所以在开发中用变量来保存字面量
声明变量：var a;
为变量赋值：a=123;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字面量和变量</title>
		<script type="text/javascript">
			var a;
			a=1;
			console.log(a);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
在控制台会输出变量a的值

标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符
例如：变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则：

  1. 标识符中可以含有字母、数字、_、$
  2. .标识符不能以数字开头
  3. 标识符不能是ES中的关键字或保留字
  4. 标识符一般都采用驼峰命名法 helloWorld xxxYyyZzz

关键字这里是引用
保留字符
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var 锄禾日当午 = 789;
			console.log(锄禾日当午);						
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
可以使用中文作为变量名，但是千万不要这么用

数据类型

数据类型指的是字面量的类型
在JS中一共有六种数据类型

  1. String 字符串

  2. Number 数值

  3. Boolean 布尔值

  4. Null 空值

  5. undefined 未定义

  6. Object 对象

其中String Number Boolean Null Undefined属于基本数据类型
Object属于引用数据类型

  • String字符串
    在JS中字符串需要使用引号引起来
    使用双引号或单引号都可以，但是不要混着用
    引号不能嵌套，双引号不能放双引号，单引号不能放单引号

  • 转义字符
    在字符串中我们可以使用\作为转义字符，
    当表示一些特殊符号时可以使用\进行转义

     	 		\" 表示 "
 	 		\' 表示 '
 	 		\n 表示换行
 	 		\t 制表符
 	 		\\ 表示\

  • Number类型
    在JS中所有的数值都是Number类型，包括整数和浮点数

JS中可以表示的数字的最大值：
Number.MAX_VALUE =0.7976931348623157e+308
JS中可以表示的数字的最小值：
5e-324
如果使用Number表示的数字超过了最大值，则会返回一个变量：
Infinity 表示正无穷
-Infinity 表示负无穷

  • 运算符 typeof
    可以使用一个运算符 typeof来检查一个变量的类型
    语法：typeof 变量
    检查字符串时，会返回string
    检查数值时，会返回number
    ！！！！如果使用JS进行浮点运算，可能得到一个不精确的结果，所以千万不要使用JS进行对精确度要求比较高的运算
  • Boolean类型
    布尔值只有两个，主要用来做逻辑判断
    true表示真，false表示假
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var bool = false;			
			console.log(typeof bool);
			console.log(bool);			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • NUll与Undefined
    Null（空值）类型的值只有一个，就是null
    null这个值专门用来表示一个为空的对象
    Undefined（未定义）类型的值只有一个，就undefind
    当声明一个变量，但是并不给变量赋值时，它的值就是undefined
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a = null;		
			var b = undefined;			
			console.log(typeof b);
			console.log(typeof a);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

强制类型转换

指将一个数据类型强制转换为其他的数据类型
类型转换主要指，将其他的数据类型，转换为String Number Boolean

  • 转换为String类型
    ①调用被转换数据类型的toString()方法
    ！！！null和undefined不能被toString强转
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a = 123;
			a = a.toString();
			console.log(typeof a);
			console.log(a);
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

②调用String()函数，并将被转换的数据作为参数传递给函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			a = true;
			a = a.toString();
			console.log(typeof a);
			console.log(a);
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • 转换为number
    ①使用Number()函数
    字符串 --> 数字
    布尔 --> 数字
    null --> 数字 0
    undefined --> 数字 NaN
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a = "123";
			a = Number(a);
			console.log(typeof a);
			console.log(a);
			b = false;
			b = Number(b);
			console.log(typeof b);
			console.log(b);
			c = null;
			c = Number(c);
			console.log(typeof a);
			console.log(a);
			d = undefined;
			d = Number(d);
			console.log(typeof a);
			console.log(a);			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
②parseInt()函数
这种方式专门用来对付字符串
parseInt() 把一个字符串转换为一个整数
parseFloat() 把一个字符串转换为一个浮点数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			e = "123567a567px";
			e= parseInt(e);
			console.log(typeof e);
			console.log(e);
			f = "123.456.789px";
			f = parseFloat(f);		
			console.log(typeof f);
			console.log(f);
			g = true;
			g = parseInt(g);
			console.log(typeof g);
			console.log(g);
			j = 198.23;
			j = parseInt(j);
			console.log(typeof j);
			console.log(j);
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

  • 转换为boolean
    将其他的数据类型转换为Boolea
    使用Boolean()函数
    数字 —> 布尔 除了0和NaN，其余的都是true
    字符串 —> 布尔 除了空串，其余的都是true
    null和undefined都会转换为false
    对象也会转换为true
Hacker white
关注
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1683
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
南北极之间
08-08 1万+
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
Python--输入及数据类型转换
weixin_59427585的博客
06-07 1055
Python 输入输出、输出格式化、数据类型转换
Python中判断input()输入的数据的类型
热门推荐
m0_55034727的博客
11-26 2万+
在pyhton中，经常会用到input()语句，但是input()语句输入的内容只能时字符串类型，而我们经常要输入int类型的数据等，那么就需要用到int()方法给输入的内容强制转换为int类型： a = int(input()) 但是这样就会有一个问题，一旦我输入的不是数字，而是字母、标点等，这样就会报错，因为字母灯是不能转成int类型的，所以我们就要判断一下，输入的内容为什么： str = input() if str.isdigit() : a = int(str) 这样就可以判断输入的是不是数
python类型转换 input函数
weixin_51727262的博客
10-21 479
''' int(x [,base ]) 将x转换为一个整数 float(x) 将x转换为一个浮点数 str(x) 将对象 x 转换为字符串 bool(x) 将对象x转换成为布尔值 ''' print(int("100")) # 100 将字符串转换成为整数 print(int(100.99)) # 100 将浮点数转换成为整数 print(int(True)) # 1 布尔值True转换成为整数是 1 print(int(.
Vue——input 将用户自动输入的值转换为数值类型
qq_43201350的博客
08-30 2702
<input v-model.number="age" type="number" />
python输入数据类型_python的输入输出及常用数据类型
weixin_33252423的博客
02-11 968
# 程序: 输入(键盘)------代码(java/python)-------输出(显示屏)#####输入######*** python2：- input:(只接受数值类型)```>>> help(input)>>> import getpass>>> num = getpass.getpass("请输入密码:")请输入密码:>&gt...
JavaScript小案例.zip
01-18
在当今快速发展的互联网世界中，JavaScript成为了构建动态网页和网络应用不可或缺的技术之一。它允许网页设计者和开发者通过在用户的浏览器中执行脚本来增强网页的交互性和功能性，从而提供更加丰富和流畅的用户体验...
JavaScript学习：函数
weixin_44828005的博客
06-02 494
问题导向 boolean布尔值是什么？如何使用？ 如果你都有了答案，可以忽略本文章，或去JS学习地图寻找更多答案 function函数 在JS中，函数是一种特殊的数据类型，它让JS动了起来，有了能力，它可以是一个方法，或者是一个功能，提供某种能力 它常用来 封装 一些方法，供应用重复调用 函数特点 具有特定功能/作用的 能够重复调用的 闭合状态的代码块 能够兼容代码变化的 参数 形参：函数声明时填的参数 实参：函数调用时填的参数 例子：使用function关键字声明一个函数 functio
JavaScript事件通信研究之自定义事件
小帅の技术博客
09-16 246
前言 公司前段时间开发A项目的时候，因为A项目涉及的模块比较多，而且好多又是具有相当独立性等特点的，比如编辑器模块、可视化编辑模块、动态表单自定义配置模块、导航栏及权限页面配置模块等。 而且，部分功能模块在B项目、C项目等中也有使用到，所以，综合考虑，这些模块还是作为单独组件模块开发比较合适，通过统一的包管理，如npm，可以方便其他人员和项目快速添加使用，避免重复劳动，也避免复制粘贴这种不易维护和稳定以及同步更新的麻烦~ 其中，有不少场景是需要跨组件模块传值的。而我们使用组件的常规方式基本是通过 impor
python input输入的内容是什么类型-python input 详解
weixin_37988176的博客
10-30 8403
解决问题：input 得到的数据到底是什么类型多个参数接收input的输入，是怎么解包的如果输入的个数不确定，怎么处理要判断输入的是不是float 类型要对输入的参数格式输出，规定参数只能是str或者int 或者float类型1__input 得到的数据到底是什么类型1.1在python 3 里，一切input的得到的东西，都是str类型In [1]: a = input('.....:')......
6、Python的输入和数据类型转换
pollybird的专栏
11-23 741
之前我们已经学习了Python的输入、运算和赋值。大家思考一下，如果编写程序时不知道需要使用什么数据，程序执行的时候才知道，那我们怎么办呢？那这一讲我们就要提到Python的输入了。
输入--转换数据类型
h_b_w的博客
08-18 407
在python中，程序接收用户输入的数据功能就是输出。 语法 input（“提示信息”） 输入的特点 1、当程序员执行到input，等待用户输入，输入完成后才能继续进行 2、在python中，input接收用户输入后，一般存贮到变量，方便使用 3、在python中，input会把接收到的任意用户输入的数据都当作字符串处理 ...
input值的比较——string转化为number类型的方法
樊小书生
01-19 1万+
input值的比较的一些问题分析和string类型转化为number类型的几种常用方法
python input输入的内容是什么类型-python3的输入、输出、变量、数据类型知识内容...
weixin_37988176的博客
10-31 8305
一、输入、输出、打印数据1、输入input一个程序要能实现人机交互功能，必须要能够接受从键盘上输入的数据。在python中，接收由键盘输入的数据的函数是 input()；sex = input("请输入你的性别：")print("你输入的性别是：",sex)例：让用户从键盘输入两个数字，然后计算出他们的和a = input("请输入第一个数字：&q...
python中isinstance 和 type 的区别
leifengchuan的博客
07-02 275
class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isinstance(B(), A) # returns True type(B()) == A # returns False ...
python常见input()输入形式
goodgoodstudy___的博客
02-21 7619
转自：python常见input输入单行多个数据，多行单个数据 python使用input输入变量，input输入的变量为字符串形式，可以通过其他方式转换为整型或其他类型。 （1）单行读入已知个数的字符串或数字 a=input("Hello World:") #单行读入字符串a,并给出一句输入提示 a,b=input().split()#单行读入含有一个空格的字符串,并按照空格分隔开,存进a,b中 b=int(input()) #单行读入单个整数b b=float(input())
input函数和类型转换
Jacques/CS的博客
05-31 4068
20.JavaScript和JQuery的区别
03-31
JavaScript是一种编程语言，用于创建动态的网页效果和交互式页面元素。JQuery是一种JavaScript库，它简化了JavaScript编程，并提供了许多可重用的代码片段和函数来处理HTML文档的操作和事件处理。 区别如下： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值