JavaScript（一）—— 初识JavaScript/注释/输入输出语句/变量/数据类型

最新推荐文章于 2023-06-06 22:59:25 发布
最新推荐文章于 2023-06-06 22:59:25 发布
阅读量602 收藏 8
点赞数 3
分类专栏： JavaScript 文章标签： javascript html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46331050/article/details/120226908
版权

本篇为 JavaScript 系列笔记第一篇，将陆续更新

文章目录

一、初识 JavaScript

 

1. JavaScript 是什么

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

  • JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由 js 解释器（js 引擎）逐行来进行解释并执行
  • 现在也可以基于 Node.js 技术进行服务器端编程
     

2. JavaScript 的作用

  • 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)
     

3. HTML、CSS 和 JS 的关系

HTML、CSS 标记语言–描述类语言

  • HTML 决定网页结构和内容，相当于人的身体
  • CSS 决定网页呈现给用户的样式，相当于给人穿衣服、化妆
    在这里插入图片描述

JS 脚本语言–编程类语言

  • 实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作
     

4. 浏览器执行 JS简介

浏览器分成两部分：渲染引擎 和 JS引擎

  • 渲染引擎：用来解析 HTML 与 CSS，俗称内核。例如，chrome 浏览器的 blink
  • JS 引擎：也称为 JS 解释器，用来读取网页中的JavaScript代码，对其处理后执行。例如，chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时 逐行解释每一句源码（转换为二进制机器语言），然后由计算机去执行，所以 JavaScript 语言归为 脚本语言，会逐行解释执行。
 

5. JS 的组成

在这里插入图片描述
1. ECMAScript

ECMAScript 是由 ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
在这里插入图片描述

  • ECMAScript：ECMAScript 规定了JS 的 编程语法 和 基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

2. DOM——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以 对页面上的各种元素进行操作（大小、位置、颜色等）。

2. BOM——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
 

6. JS 初体验

JS 有 3 种书写位置，分别为 行内、内嵌 和 外部

1. 行内式

<body>
    <input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
  • 注意单双引号的使用：在 HTML 中我们推荐使用双引号, JS 中我们 推荐使用单引号
  • 可读性差， 在 HTML 中编写 JS 大量代码时，不方便阅读
  • 引号易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用

2. 内嵌 JS

<head>
    ...
    <script>
        alert('JavaScript!')
    </script>
</head>
  • 可以将多行 JS 代码写到 <script> 标签中
  • 内嵌 JS 是学习时常用的方式

3. 外部 JS 文件

<head>
    ...
    <script src="my.js"></script>
</head>
  • 利于HTML页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS 文件的 <script> 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况
     

二、JavaScript 注释

1. 单行注释

为了提高代码的可读性，JS 与 CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释 和 多行注释

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来
  • // 用来注释单行文字（ 快捷键 ctrl + / ）

2. 多行注释

/*
	获取用户年龄和姓名
  	并通过提示框显示出来
*/
  • /* */ 用来注释多行文字（ 默认快捷键 alt + shift + a ）
  • 快捷键修改为： ctrl + shift + /
  • vscode修改快捷键方法: 首选项按钮 => 键盘快捷方式 => 查找 原来的快捷键 => 修改为新的快捷键 => 回车确认

 

三、JavaScript 输入输出语句

为了方便信息的输入输出，JS 中提供了一些输入输出语句，其常用的语句如下：
在这里插入图片描述

  • 注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息

示例

...
    <script>
        // 输入框
        prompt('请输入您的年龄');
        // 警示框
        alert('计算的结果是');
        // 控制台输出
        console.log('展示给程序员');
    </script>
...

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
 

四、变量

1. 变量概述

变量是用于存放数据的容器，我们通过变量名获取数据，甚至修改数据

本质：变量是程序在内存中申请的一块用来存放数据的空间
 

2. 变量的使用

变量在使用时分为两步：

  1. 声明变量
  2. 赋值

1. 声明变量

var age; 	// 声明一个名称为 age 的变量
  • var 是一个 JS 关键字，用来声明变量（variable 变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间
  • age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2. 赋值

age = 10; 	// 给 age 变量赋值为 10
  • " = " 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

3. 变量的初始化

var age  = 18;   // 声明变量同时赋值为 18
  • 声明一个变量并赋值， 我们称之为 变量的初始化

案例一
在这里插入图片描述
案例二

在这里插入图片描述
在这里插入图片描述

3. 变量的语法扩展

1. 更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

var age = 18;
age = 81;   	// 最后的结果就是 81， 因为 18 被覆盖掉了

2. 同时声明多个变量

同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开

var age = 10,  name = 'zs', sex = 2;

3. 声明变量特殊情况
在这里插入图片描述

4. 变量的命名规范

  • 由字母（A - Z，a - z）、数字（0 - 9）、下划线（_）、美元符号（$）组成，如：usrAge，num01， _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能以数字开头。 18age 是错误的
  • 不能是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写，如 myFirstName
  • 推荐翻译网站： 有道 爱词霸

案例
在这里插入图片描述
 

五、数据类型

1. 数据类型简介

为什么需要数据类型？
 
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着 不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;        	 // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串
  • 在代码运行时，变量的数据类型是由 JS 引擎 根据等号右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

JavaScript 拥有动态类型，同时也意味着 相同的变量可用作不同的类型：

var x = 6;           // x 为数字
x = "Bill";      	 // x 为字符串

 

2. 数据类型分类

JS 把数据类型分为两类：

  • 简单数据类型 （ Number，String，Boolean，Undefined，Null ）
  • 复杂数据类型 （ object )

JavaScript 中的简单数据类型及其说明如下：

简单数据类型说明默认值
Number数字型，包含整型值和浮点型值0
Boolean布尔值型，包含 true 和 falsefalse
String字符串型，如 “张三”“”
Undefined未赋值的变量，var a;undefined
Null声明空值，var a = null;null

2.1 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存浮点数（小数）

var age = 21;       // 整数
var Age = 21.3747;  // 小数
  1. 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

在这里插入图片描述

  • 八进制数字序列范围：0~7
  • 十六进制数字序列范围：0 - 9 以及 A - F
  • 在JS中八进制前面加 0，十六进制前面加 0x
  1. 数字型范围

JavaScript 中数值的最大和最小值
在这里插入图片描述

  • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  • 最小值：Number.MIN_VALUE，这个值为：5e-324
  1. 数值型三个特殊值

在这里插入图片描述

  • Infinity，代表无穷大，大于任何数值
  • -Infinity，代表无穷小，小于任何数值
  • NaN，Not a number，代表一个非数值

isNaN()：判断是否为数字型

在这里插入图片描述

2.2 字符串型 String

  1. 字符串引号嵌套

字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

  • 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号
  • 如果需要 引号嵌套，可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)，var strMsg = '我是"高帅富"程序猿'; 或 var strMsg2 = "我是'高帅富'程序猿";
  1. 字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。常用的转义符及其说明如下：

在这里插入图片描述

  1. 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

在这里插入图片描述

  1. 字符串拼接

多个字符串之间可以 使用 " + " 进行拼接 ，拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
在这里插入图片描述

案例：输出年龄
在这里插入图片描述
在这里插入图片描述

2.3 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）

  • 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0
    在这里插入图片描述

2.4 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加时，注意结果）
在这里插入图片描述
一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null）
在这里插入图片描述
 

3. 获取变量数据类型

typeof 可用来获取检测变量的数据类型

在这里插入图片描述

  • 通过 prompt 所取的值是字符型的
    在这里插入图片描述

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

  • 数字字面量：8, 9, 10
  • 字符串字面量：‘黑马程序员’, “大前端”
  • 布尔字面量：true，false

 

4. 数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

我们通常会实现 3 种方式的转换：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

4.1 转换为字符串

方式说明
toString()转成字符串
String()强制转换转成字符串
加号拼接字符串和字符串拼接的结果都是字符串

在这里插入图片描述

  • 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换

4.2 转换为数字型

方式说明
parseInt(string)函数将string类型转换成整数数值型
parseFloat(string)函数将string类型转成浮点数数值类型
Number()强制转换函数将string类型转换成数值型
隐式转换 - * /利用算术运算隐式转换为数值型
  • parseInt() 会下取整 和 去掉后面单位
    在这里插入图片描述
  • 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型。但是注意不能是加号，而是减号、乘号、除号
    在这里插入图片描述

4.3 转换为布尔型

方式说明
Boolean()其他类型转成布尔值
  • 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
  • 其余值都会被转换为 true
imByte
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js解析引擎执行js代码的步骤
weixin_46376652的博客
04-08 335
浏览器包括渲染引擎和解析引擎，解析引擎主要负责解析js代码 一、语法分析 js解析引擎首先会先扫描所有的代码，查看代码是否存在语法错误，如果代码存在语法错误，程序立即报错，不会继续执行；如果未发现语法错误，则进入代码正式处理中的预解析（预编译）阶段； 二、代码正式处理 1、预编译阶段 全局执行代码： ①、创建全局对象GO，建立一个存放全局变量的仓库； ②、找到变量申明，提升变量申明，将变量存储在全局仓库中； ③、找到函数申明，提升函数申明； js是单线程的语句，会解释一行执
优秀的js引擎MathJax – 搞定数据公式LaTeX、MathML、AsciiMath
飞哥专栏
08-24 2568
MathJax MathJax 支持数学公式LaTex、MathML、AsciiMath，可编辑，支持浏览器，MathJax是最好的插件。输出格式支持Html、SVG等 MathJax官网：https://www.mathjax.org/ Github：https://github.com/mathjax/MathJax MathJax支持Wordpress、Drupal等流行软件，也支持Markdown和嵌入到自己的网站系统里。 使用文档： <!DOCTYPE html> ..
JavaScript引擎
最新发布
m0_60909419的博客
06-06 262
JavaScript引擎就是能够“读懂”JS代码，并准确地给出JS代码运行结果的一段程序。简单点说，就是负责整个 JavaScript 程序的编译及执行过程。一个 JavaScript 引擎一般需要包括以下几个部分：编译器：负责语法分析及代码生成等脏活累活，主要工作是将源代码编译成抽象语法树。解释器：在某些引擎中，解释器主要是接收字节码，解释执行这个字节码，同时也依赖垃圾回收机制等。JIT 工具：提高 js 的执行速度，将字节码或者抽象语法树转换成本地代码。
JAVA执行javascript方法
weixin_34327761的博客
04-02 967
之前在一次机缘巧合的情况下，需要时用JAVA执行js方法，查阅了一些文档，找到了相关解决方法，这里和大家分享一下。 在JDK1.6中为我们提供了一个ScriptEngineManager类，ScriptEngineManager 为 ScriptEngine 类实现一个发现和实例化机制，还维护一个键/值对集合来存储所有 Manager...
变量的基础概念
zkfgyx的博客
03-18 830
变量的基础概念
JavaScript学习笔记.zip_文章/文档_JavaScript_
08-10
JavaScript学习笔记JavaScript是一种基于对象和事件驱动的、具有安全性能的脚本语言；由ECMScript、DOM、BOM组成。script语句可以包含在文档中任何地方，只要保证代码在被使用前已读取并加载到内存即可。一般放在...
ss.zip_JavaScript/JQuery_Java_
08-11
一个简单小程序求素数，比较经典的，下面是代码及注释
javascript中for/in循环及使用技巧
10-23
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的，本篇文章给大家介绍javascript中for/in循环及使用技巧 ，需要的朋友可以参考下
详解JavaScript的变量和数据类型
10-23
主要介绍了详解JavaScript的变量和数据类型，需要的朋友可以参考下
JavaScript数据类型和变量_动力节点Java学院整理
01-19
在JavaScript中定义了以下几种数据类型： Number JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型： 123; // 整数123 0.456; // 浮点数0.456 1.2345e3; // 科学计数法表示1.2345x1000...
一次性搞懂JavaScript正则表达式之引擎
weixin_33901843的博客
11-15 255
本文是『horseshoe·Regex专题』系列文章之一，后续会有更多专题推出 GitHub地址：github.com/veedrin/hor… 博客地址(文章排版真的很漂亮)：veedrin.com 如果觉得对你有帮助，欢迎来GitHub点Star或者来我的博客亲口告诉我 我们说正则表达式是语言无关的，是因为驱动正则表达式的引擎是相似的。鉴于正则表达式是一种古老的语法，它的引擎也在历史长河中...
平凡前端之路_16.变量的解构赋值
jun266a的博客
09-08 369
解构赋值是对赋值运算符的扩展。 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 方便了复杂对象中数据字段获取，能够大大简化代码编写过程。 提高代码可读性和可维护性。
java 正则表达式 和 js正则表达式
weixin_41102181的博客
07-27 2047
java正则表达式和js正则表达式基本相同，在这里做个详细记录，方便查找和参考。
JavaScript学习笔记
天道酬勤的专栏
04-27 1013
一、JavaScript基础 什么是JavaScript 　　JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安全性能的脚本语言。它与HTML（超文本标记语言）一起，在一个Web页面中连接多个对象，与Web客户实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的...
3 种实现 JavaScript 模板引擎的方法
web前端开发
11-29 194
英文 |https://javascript.plainenglish.io/interviewer-can-you-implement-a-javascript-template-engine-me-crap-fcd1dd6a3889翻译 | 杨小爱小伙伴们，相信即使你是经验丰富的开发者，也未必能很快的解决这道面试题。如果您想质疑这一说法，请继续阅读下去。最近，我的好朋友南希遇到了一个让她发疯...
前端ES6变量结构赋值
qq_40148581的博客
05-27 88
// 1,数组的结构赋值，方便了很多，不需要一个个去赋值了 const F4 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]; let [A, B, C, D, E] = F4; console.log(A);//a console.log(B);//b console.log©;//c console.log(D);//d console.log(E);//e // 2.对象的解构,这样调用对象内的方法，就不需要 (对象.函数) 这样调用了 const zhao
V8引擎解析JavaScript原理
m0_60899441的博客
02-02 1144
所有V8引擎就实现了，延迟解析的方案，它的作用就是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析会在函数被调用时才会及进行。这是因为并不是所有的JavaScript代码 在一开始都会被执行 如果对所有JavaScript代码进行解析必然会影响网页的运行效率。第一部分： 在代码执行前 在parser转成AST过程中，会将全局定义的变量，函数放入到GO中但是不会赋值，生成AST树后，会被Ingitiom转成字节码，之后的过程就是代码的执行过程。
第一章
m0_54680860的博客
03-01 165
JavaScript基础 #1.2 什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(object)和事件驱动(Event Driven)的,并具有安全性能的脚本语言。 总结其特点: 1.JavaScript主要用来在HTML页面中添加交互行为。 2.JavaScript是一种脚本语言,语法和Java类似。 3.JavaScript一般用来编写客户端的脚本。 4.JavaScript是一种解释性语言,边执行边解释。 1.2.1 JavaScript的组成 1. ECMASc
如何在 SCSS 使用 JavaScript 变量/scss全局变量
05-17
在 SCSS 中使用 JavaScript 变量有多种方法，下面介绍其中两种常用的方法： 1. 使用 `:export` 导出 JavaScript 变量作为 SCSS 变量 在 JavaScript 文件中定义变量并使用 `:export` 导出，如： ``` // variables....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

imByte

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值