JavaScript学习笔记（1）

最新推荐文章于 2024-05-30 13:59:14 发布
最新推荐文章于 2024-05-30 13:59:14 发布
阅读量175 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42204713/article/details/112912412
版权

文章目录

一、JavaScript的背景

Web前端有三层：

  • HTML：从语义的角度，描述页面结构
  • CSS：从审美的角度，描述样式（美化页面）
  • JavaScript：从交互的角度，描述行为（提升用户体验）
    JavaScript是世界上用的最多的脚本语言

1、发展历史

JavaScript诞生于1995年，网景公司的布兰登艾奇发明的JavaScript，起初命名为LiveScript，后来由于SUN公司的介入，才更名为JavaScript。（JavaScript和Java不能说是一模一样，可以说是毫无关系）。

2、JavaScript和ECMAScript的关系

ECMAScript是一种由ECMA国际（欧洲计算机制造商协会）制定和发布的脚本语言规范。简单来说，ECMAScript不是一种语言，而是一种标准。

ECMAScript在2015年6月，发布了（es6），语言的能力更强（也包含了很多新特性），但是浏览器厂商不会那么快去追上这个标准，需要时间，所以有一些浏览器不能兼容es6的新特性。

es5是2009年发布的，es6是2015年发布的，间隔6年，两个版本之间的变化比较大，所以es6比较出名。其实现在已经有es10了，只不过es10与es6版本的变化很小，所以很少被提起。

二、JavaScript介绍

1、JavaScript入门易学性

  • JavaScript对初学者比较友好。
  • JavaScript是有界面效果的（C语言只有白底黑字）
  • JavaScript是弱变量类型的语言，变量只需用var来声明。而Java中变量的声明要根据变量的类型来定义。
  • JS不用关心其他一些事情（比如内存的释放、指针等），更关心自己的业务。

2、浏览器工作的原理

浏览器工作原理
1、User Interface 用户界面，我们所看到的浏览器
2、Browser 浏览器引擎，用来查询和操作渲染引擎
3、Rendering engine 用来显示请求内容，负责解析HTML、CSS
4、Networking 网络，复制发送网络请求
5、JavaScript Interpreter(解析者） JavaScript解析器，负责执行JS的代码
6、UI Backend UI后端，用来绘制类似组合框和弹出窗口
7、Data Persistence(数据持久化) ，是数据储存 cookie、HTML5中的sessionStorage
参考链接： https://www.2cto.com/kf/201202/118111.html

3、JS是前台语言

JS是前台语言，而不是后台语言。
JS运行在用户的终端网页上，而不是服务器上，所以我们称为“前台语言”。就是服务于页面交互效果、美化页面，不能操作数据库。
后台语言是允许在服务器上的，比如PHP、ASP等，这些语言能够操作数据库进行“增删改查”。Node.js除外。

4、JS的组成

JS基础分成三部分：

  • ECMAScript：JS的语法标准。包括变量、运算符、函数、表达式、if语句、for语句等。
  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

5、JS的特点

（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行。
（2）解释型语言：事先不需要编译为机器码再执行，而是逐行执行、无需进行严格的变量声明。
（3）基于对象：内置大量现成对象，编写少量程序可以完成目标。

6、JS代码的书写位置

（1）、内嵌：可以在<body>标签里嵌入<script type="text/javascript" > ...</script>
（2）、外链接：引入外部JS文件<script src=" "> </script>
（3）、调试运行：在浏览器console中直接运行

三、JS的语法规则

（1）、JS对换行、空格、缩进都不敏感。每条语句以分号结尾，如果不加上分号，浏览器会自动添加，但是会消耗系统资源。
（2）、所有的符号都必须是英文的。
（3）、严格区分大小写。

1、注释

（1）、多行注释 /* ……*/
（2）、单行注释 //……

2、JS的输出

（1）、原生弹框（尽量少用）

alert("")

（2）、控制台输出

var a ="今晚吃什么"
console.log(a)
console.error("错误！今晚不能吃东西")
console.warn("警告！该减肥了")

（3）、带确定和取消按钮的弹框

confirm("今晚确定吃鸡吗")

（3）、带输入的弹框

prompt("你是哪里人？")

作业：弹2个弹框，将第一个弹框的值与第二个弹框的值相加。将结果输出到页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>加法计数器</title>
</head>
<body>
	<script type="text/javascript">
		var num1=parseInt(prompt("请输入第一个数字"));
		var num2=parseInt(prompt("请输入第二个数字"));
		var sum=num1+num2;
		alert(sum);
	</script>
</body>
</html>

3、字面量：数字和字符串

“字面量”即常量，是固定值，不可改变。简单的字面量有2种：数字和字符串
（1）数字字面量直接写上去就行了
（2）字符串字面量要加双引号

4、变量

（1）变量的概念
变量：变量可以用来保存字面量，而且变量的值可以任意改变。

（2）变量的定义和赋值
在js种使用var关键字来声明变量。赋值直接使用=进行赋值

ps:在JS中，永远都是使用var来定义变量

（3）变量的命名规则

  • 建议使用驼峰命名法则
  • 变量名必须以字母或者下划线或者＄开头
  • 变量名长度不能超过255个字符
  • 变量名中不允许使用空格，首个字母不能为数字。
  • 不能使用脚本语言中保留的关键值作为变量名
  • 变量名区分大小写
  • 不建议使用拼音作为变量名
    （4）变量声明的提升
    JS在解释执行之前，有预编译的过程，会将变量声明提升到最前面，但不会将赋值提升。

5、标识符

标识符：在JS中所有可以由我们自主命名的都可以称为标识符。例如：变量名、函数名、属性名等

6、数据类型

  • 基本数据类型（值类型）：String字符串、Number数值、Boolean布尔值、Null空值、Undefined未定义。
  • 引用数据类型（引用类型）：Object对象

数据类型之间最大的差别：

  • 基本数据类型：参数赋值时，传数值。
  • 引用数据类型：参数赋值时，传地址。

String字符串类型

（1）在JS中，字符串需要使用引号引起来。使用单引号或双引号都可以，但不要混着用。
（2）引号不能嵌套：双引号里面不能放双引号，单引号里面不能放单引号。但单引号里面可以嵌套双引号。
（3）转义字符：在字符串里面我们可以使用\作为转义字符。

  • \ "表示"
  • \ n表示换行
  • \r表示回车
  • \t表示制表符
  • \b表示空格
  • \ \表示\

将其他数值转换为字符串有三种方式：

  • 拼串
  • toString()
  • String()

typeof运算符
typeof()表示获取数据的变量类型，返回的是小写。

返回结果：

  • typeof 数值的返回结果：number
  • typeof 字符串的返回结果：string
  • typeof 布尔型的返回结果：boolean
  • typeof undefined的返回结果：undefined
  • typeof null的返回结果：object

数值型：Number

在JS中所有数值都是Number类型，包括整数和浮点数（小数）。

** 数值范围：**

  • 最大值：Number.MAX_VALUE
  • 最小值：Number.MIN_VALUE

如果使用Number表示的变量超过了最大值，则返回Infinity。

  • 无穷大（正无穷）：Infinity
  • 无穷小（负无穷）：-Infinity

NaN和isNaN()函数：
（1）NaN：是一个特殊的数字，表示非数值。

浮点数的运算
在JS中，整数的运算基本可以保证精确，但是小数的运算，可能会的到一个不精确的结果。

连字符和加号的区别
如果加号两边都是数字，则表示加。否则就表示连字符。

NULL和undefined
NULL表示一个空对象。
undefined表示未赋值的变量。

Camille-Fan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript入门学习笔记
weixin_61370021的博客
04-27 4547
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
你好, 我在学java的博客
03-10 3851
前端js学习
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript学习笔记1-环境准备
Anthony_tester的博客
04-26 3915
好几天没有写文章了，最近在纠结一个问题：是学习Python爬虫呢还是继续选择一门新的脚本语言去学习。看到自动化测试工程师的招聘职位，很多公司提到了JavaScript。常用的脚本语言，主要有Python,Shell,Ruby,Perl,JavaScript。出于给自己增加一个脚本语言的技能，我觉得，还是有必要去学习一门新的脚本语言，所以这里就选择了JavaScript。       想好了要学习
学习笔记2 JavaScript
qwe121381122的博客
01-08 361
JavaScript新手入门学习笔记
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
javascript 学习笔记
Katios
05-25 7199
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
JavaScript入门到入土第一章变量JavaScript中变量的声明和使用 JavaScript学习笔记1
hjjshua的博客
04-17 1323
javaScript 中变量的声明和使用
20201106JavaScript学习笔记（1）
Li_black的博客
11-06 709
JavaScript学习笔记（1） 大家好我是小黑！！！很高兴能在这里分享自己学习JavaScript的经历。其实在大一的时候我有跟随课程学习过这门脚本语言，但是老师并没有深入来学习，只是一两节课就过去，导致现在要重新学习了。我会把每一次学习的笔记做成一个系列，如果其中有不对的地方，欢迎指出，谢谢！ 我是跟随菜鸟教程来学习的，如果有记录的不全面的地方也欢迎大家在私信或者在评论区中指出，谢谢！ JavaScript的基本用法： （1） ...
JavaScript学习笔记（7.0）
mez_Blog的博客
03-13 1465
Ajax允许通过与场景后面的web服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。这意味着可以更新网页的部分，而不需要重新加载整个页面。上述代码中点击button就从web服务器请求数据并显示它，这里读取的是Ajax_info.txt的文件内容。Ajax组合了浏览器内建的XMLHttpRequest对象（从web服务器请求数据）捕获：Windows=>document=>body=>outer=>Ajax的核心是XMLHttpRequest对象。
javascript学习笔记1
07-29
ｊａｖａｓｃｒｉｐｔ　数组　ＤＯＭ　ＢＯＭ简单学习总结
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Javascript学习笔记1 数据类型
01-19
代码类型只有一种形式就是function。 undefined：未定义，我们也可称之为不存在，typeof(undefined)=undefined. null:为空。undefined是不存在，而null是存在，但却无。typeof(null)=object,但null又不是object，这...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
【redis】Spring之RedisTemplate配置与使用
05-30 327
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1198
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
解决renren-fast地图使用echarts报错
最新发布
Start_t的博客
05-30 208
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 516
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. CSS样式： - 学习如何使用CSS来为网页添加样式 - 掌握CSS选择器和属性 - 学习如何设置文字样式、颜色、背景、布局等 3. JavaScript基础： - 理解JavaScript的基本概念和语法 - 学习如何操作DOM元素，实现网页交互 - 掌握常用的JavaScript函数和事件处理 4. 响应式设计： - 学习如何使用媒体查询和弹性布局创建响应式网页 - 掌握移动优先设计和流体网格布局 5. 前端框架和工具： - 了解流行的前端框架，如React、Angular、Vue等 - 学习使用前端构建工具，如Webpack、Gulp等 - 掌握前端调试工具和浏览器开发者工具的使用 这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值