JavaScript笔记 01：基础知识

最新推荐文章于 2023-02-17 10:01:19 发布
最新推荐文章于 2023-02-17 10:01:19 发布
阅读量180 收藏 1
点赞数
分类专栏： JavaScript笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/109263164
版权

常用方法

向body中输出内容

document.write("大河之剑天上来！");

弹出一个提示框，框中带有文本输入框

var input = prompt("请输入内容：");
console.log(typeof input); //string
console.log(input); //输入内容

计时器

// 开启一个计时器，传入的参数作为计时器的名字
console.time("timer1");
// 停止计时器
console.timeEnd("timer1");

confirm弹出框

// 参数为提示语句，点击确定返回true，点击取消返回false
var result = confirm("确认删除吗？");
console.log(result);

JS代码编写的位置

写在标签的属性中

  • 这种方式结构与行为耦合，不方便维护，不推荐使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS代码编写的位置</title>
</head>
<body>
	<!-- 可以将代码编写到标签的onclick属性中，点击后代码执行 -->
	<button onclick="alert('大河之剑天上来！');">戳我！</button>
	<!-- 也可以将代码编写到超链接的href属性中，点击后代码执行 -->
	<a href="javascript:alert('长枪一动白龙吟！');">点我！</a>
	<!-- 可以采取这种方式阻止超链接的自动跳转行为 -->
	<a href="javascript:;">再点我！</a>
</body>
</html>

写在script标签中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS代码编写的位置</title>
<script type="text/javascript">
	alert("这是script标签中的代码！");
</script>
</head>
<body></body>
</html>

写在外部的js文件中

  • 通过script标签引入
  • 引入外部文件的script标签内部的代码不会执行，如果想要在内部编写代码，需要再加一个script标签，执行顺序就是代码的编写顺序
  • 外部文件可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS代码编写的位置</title>
<script type="text/javascript" src="dudu.js"></script>
<script type="text/javascript">
	alert("这是script标签中的代码！");
</script>
</head>
<body></body>
</html>

数据类型

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

  • String 字符串
  • Number 数值
  • Boolean 布尔值
  • Null 空值
  • Undefined 未定义
  • Object 对象

使用 typeof 来检查一个变量的类型

var a = 123;
var b = "hello";
// 返回值是一个字符串
console.log(typeof a);// number
console.log(typeof b);// string

JS可以表示的数值范围

// 最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 0以上的最小值
console.log(Number.MIN_VALUE);// 5e-324

InInfinity

// Infinity表示 超过最大数值的数字 即正无穷
console.log(Number.MAX_VALUE * 6);
// Infinity 的类型
console.log(typeof Infinity);//number
//可以当做字面量使用
var a = Infinity;
console.log(a);

NaN

// 表示 Not A Number
var a = "abc" * "bcd";
console.log(a);// NaN 
// 可以当做字面量来使用
var b = NaN;
console.log(b); // NaN
// NaN 的类型
console.log(typeof b);// number

如果使用JS进行浮点数运算，可能得到一个不精确的结果

null

// null 用来表示一个为空的对象
var a = null;
console.log(a);
// null 的类型
console.log(typeof a); //object

undefined

// undefined 用来表示未定义
var a; // 声明变量但是不赋值
console.log(a); // undefined
// undefined 的类型
console.log(typeof a); // undefined

强制类型转换

将其他的数据类型转换成 String

  • 方式一：toString()
    console.log((123.45).toString()); //123.45
console.log(true.toString()); //true
//console.log(null.toString()); //报错
//console.log(undefined.toString()); //报错
//注意：null 和 undefined 没有 toString() 方法
  • 方式二：String()
    console.log(String(123.45)); //123.45
console.log(String(false)); //false
console.log(String(null)); //null
console.log(String(undefined)); //undefined

将其他的数据类型转换成 Number

  • 字符串转数字
    //纯数字的字符串：直接转换即可
console.log(Number("123.45")); //123.45
//字符串中有非数字的内容：转换为 NaN
console.log(Number("12a3.4b5")); //NaN
//字符串是空串或全是空格的字符串：转换为 0
console.log(Number("    ")); //0
console.log(Number("")); //0
  • 布尔转数字
    console.log(Number(true)); //1
console.log(Number(false)); //0
  • Null转数字
    console.log(Number(null)); //0
  • Undefined转数字
    console.log(Number(undefined)); //NaN
  • parseInt() 与 parseFloat()
    // 从字符串的第一位开始读，读到不是数字为止
console.log(parseInt("123px"));//123
console.log(parseInt("12.3px"));//12
console.log(parseFloat("1a2.3px"));//1
console.log(parseFloat("12.3.4px"));//12.3
// 如果是非String使用上述函数，会先将其转换为String然后再操作
console.log(parseInt(true));//NaN
  • 数字进制
    /*
十六进制以 0x 开头
八进制以 0 开头
二进制数字以 0b 开头，但兼容性不好
*/
console.log(0x10);//16
console.log(010);//8
console.log(0b10);//2
// 这种字符串有些会被当成八进制解析
console.log(parseInt("070"));// 70 or 56
// 指定数字的进制
console.log(parseInt("070", 8));// 70

将其他的数据类型转换成 Boolean

  • 数字转布尔
    // 除了 0 和 NaN 其余的都是 true
console.log(Boolean(123));//true
console.log(Boolean(-123));//true
console.log(Boolean(0));//false
console.log(Boolean(Infinity));//true
console.log(Boolean(NaN));//false
  • 字符串转布尔
    // 除了空串，其余的都是 true
console.log(Boolean("hello"));//true
console.log(Boolean(""));//false
console.log(Boolean("    "));//true
  • Null 和 Undefined
    console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
  • 对象也会转换为 true

运算符

算术运算符

  • 当对非 Number 类型的值进行运算时，会将这些值转换为 Number，然后再进行运算
  • 任何值和 NaN 做运算结果都是 NaN

一元运算符

  • 可以使用 + 来将其他类型的值转换成 Number

逻辑运算符

  • 如果对非布尔值进行非运算，会先将其转换为布尔值再运算
  • 如果对非布尔值进行与或运算，会先将其转换为布尔值再运算，然后返回原值
    // 如果第一个值为true，则必然返回第二个值
console.log(1 && 2); // 2
// 如果第一个值为false，则直接返回第一个值
console.log(0 && NaN); // 0

// 如果第一个值为true，则直接返回第一个值
console.log(1 || 2);// 1
// 如果第一个值为false，则直接返回第二个值
console.log(0 || NaN);// NaN

关系运算符

  • 对于非数值进行比较时，会将其转换为数字然后再比较
  • 任何值和 NaN 做任何比较都是 false
  • 如果符号两侧的值都是字符串，不会将其转换为数字进行比较，而会分别按位比较字符串中每个字符的Unicode编码
    // 在JS中使用Unicode编码，其中2680是十六进制数字
console.log("\u2680");

    <!-- 在页面中使用Unicode编码，其中9856是十进制数字 -->
<h1 style="font-size: 100px;">&#9856;</h1>

相等运算符

  • 如果两个值的类型不同，则会自动进行类型转换，将其转换为相同的类型（一般情况下都会转换为 Number）
    console.log("1" == 1); // true
console.log("1" != 1); //false
  • null 不会转换为数值
    console.log(null == 0); // false
  • undefined 衍生自 null，因此这两个值做相等判断时会返回 true
    console.log(null == undefined); // true
  • NaN 不和任何值相等，包括它本身
    console.log(NaN == NaN); // false
  • 可以通过 isNaN() 函数来判断一个值是否为 NaN
    console.log(isNaN(NaN));// true

三元运算符

  • 如果条件表达式的计算结果是一个非布尔值，会将其转换为布尔值，然后再运算
Alice_LMY
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript 第一讲 笔记：JavaScript基础
qq_49956121的博客
09-05 437
一、JS前世今生 1.什么是“解释性语言” 计算机不能直接理解任何除机器语言以外的语言，所以必须要 把程序员所写的程序语言翻译成机器语言，计算机才能执行程 序。将其他语言翻译成机器语言的工具，被称为编译器。 编译器翻译的方式有两种：一个是编译，一个是解释。当编译 器以解释方式运行的时候，称之为解释器。 解释性语言编写的程序不进行预先编译，以文本方式存储程序 代码。 常见解释性语言：HTML、XHTML、JavaScript、XML、 CSS、AJAX等。 2、JavaScript是什么 JavaScr
JavaScript基础知识_笔记_01
qq_43216593的博客
07-21 427
JS的特点: 解释型语言 动态语言 基于原型的面向对象 基本输出： alert(‘这是第一个js代码’);//弹出警告框 document.write(“啦啦啦啦啦啦啦”);//可以向body输出一个内容 console.log(“向控制台输出一个内容”);//控制台输出内容 基本语法： JS注释：多行注释，注释内容不会被执行，但是可以在源代码中查看。（养成良好的代码注释习惯）； JS中严格区分大小写； 每一条语句都以；结尾。（如果不添加分号，浏览器会自动添加，但那还是会消耗一些系统资源，有时.
JavaScript基础知识学习笔记
weixin_43739821的博客
01-05 740
引入方式 基础语法 书写语法 变量 数据类型和运算符 函数function 第一种定义格式 第二种定义格式 闭包 对象 基本对象 Array对象 String对象 自定义对象 JSON对象 BOM对象 Window对象 Location对象 DOM对象 DOM介绍 获取DOM对象 操作DOM对象 案例 javascript事件 javascript事件简介 javascript事件绑定 常见javascript事件 javascript事件案例
动态网站开发讲课笔记01：网页开发基础
howard2005的专栏
02-17 2370
1. 熟悉HTML标签的使用； 2. 掌握CSS样式的引用方式； 3. 掌握CSS选择器的常用属性； 4. 熟悉DOM与BOM的相关知识； 5. 掌握JavaScript的使用； 6. 熟悉Bootstrap框架的下载与使用； 7. 掌握BootStrap框架的常用组件；
JavaScript 基础笔记总结(全部)
热门推荐
IT_Holmes的博客
12-20 1万+
文章目录1.声明变量 var2.变量命名的规则3.数据类型以及注意事项4.代码注释5.其他类型转换为字符串6.数值类型转换7.布尔类型转换8.算数操作符9.一元运算符10.逻辑运算符11.比较运算符12.赋值运算符13.运算优先级14.流程控制15.JS中的数组15.1 数组格式15.2 获取数组中的元素15.3 遍历数组15.4 数组求和16. 函数16.1 函数的声明以及调用16.2 函数的形参和实参16.3 函数的返回值16.4 匿名函数16.5 函数做为参数16.6 函数作用域16.7 函数的作用域
javascript学习笔记（一）基础知识
10-25
总的来说，JavaScript的基础知识包括但不限于语法、变量、数据类型、运算符、流程控制和函数等，这些都是编写JavaScript程序的基础。通过深入理解和熟练掌握这些知识点，开发者可以构建出功能丰富的交互式网页和应用...
JavaScript李立超基础篇笔记.docx
02-02
总的来说，李立超的JavaScript基础篇教程涵盖了语言的基础知识，包括其历史、特点、基本语法、数据类型、变量和标识符的使用，以及代码编写的位置和方式，是学习JavaScript入门的宝贵资料。通过深入理解和实践这些...
李立超前端JavaScript基础个人总结笔记
05-25
源自于B站up主李立超老师的前端JavaScript基础知识视频课，根据199节视频课的内容，使用Typora笔记软件总结核心知识点，方便前端小白配合老师视频课使用，内含相关概念的定义和配套代码资源，其上传的初衷是为了方便...
JavaScript基础第01天笔记1
08-03
JavaScript是Web开发中不可或缺的一部分，尤其对于前端交互和动态网页有着至关重要的作用。在学习JavaScript的基础时，我们首先需要理解它的基本...深入理解这些基础知识，将有助于成为一个熟练的JavaScript开发者。
ASP外观专利图像检索平台(源代码+论文).rar
07-21
ASP外观专利图像检索平台(源代码+论文)
C++课程设计：电煤气管理系统【源码+文档】
07-21
C++课程设计：电煤气管理系统【源码+文档】 本程序是一个水电气管理信息系统，能够对高校的水电气费用进行管理, 包括了成员的基本信息，如学号、编号、姓名、成员水电气的用量等。程序的用途包括缴纳水电气费、查询一个同学水电气费用量、查看所有同学的缴费情况、增加学生信息、删除学生信息、退出系统等。在设计时也考虑到学生和教师在用水电气时的不同，学生可以免费使用一定额度的水电气，超过这个额度的以后必须付费，且付费部分水电气费的价格要高于教工的收费标准，该措施的实行是为了鼓励同学们节约资源，以免造成不必要的资源浪费。该软件主要是为了学校的管理人员提供便捷，以更快的完成水电气费用的收缴。该软件本着简洁明了，实用稳定为一体进行设计。 系统将实现以下功能： （1）实现对用户信息的录入； （2）实现水电煤气数据的录入； （3）实现计算并查询用户应缴费用，查询未缴纳费用的名单； （4）实现对人员的删除和添加；
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）.rar
07-21
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）
avaloniassification-mas笔记
07-21
avalonia
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文).rar
07-21
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文)
ASP+ACCESS在线教育系统设计(源代码+论文).rar
07-21
ASP+ACCESS在线教育系统设计(源代码+论文)
中国软件杯A8赛题.zip
07-21
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
配色识色器软件，易语言编写，非常好用
最新发布
07-21
配色识色器软件版本 编写语言：易语言 数据来源：网络 软件功能： 1、识取颜色并同时输出RGB、CMYK、16进制三种值，也可以RGB、CMYK互转； 2、可添加、导入EXCEL文件（XLS文件，配合附件中的导入工具用）的配色方案（表头：见图）； 3、可点选或搜索配色值进行配色。
java毕设&课设-ASP网络商城的设计与实现(源代码+论文).zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
JavaScript学习笔记：从基础到进阶
"JavaScript-学习笔记涵盖了JavaScript的基础和进阶知识，包括语言构成、语法要点以及实际应用中的关键概念。从JavaScript的起源和组成开始，介绍了JS书写的位置，强调了在HTML中嵌入脚本的重要性。接下来，详细讲解...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值