1_js基本简介数据类型变量的使用

1. 编程语言简介

1.1 计算机编程语言

  • 计算机编程语言是程序设计的最重要的工具，它是指计算机能够接受和处理的、具有一定语法规则的语言。从计算机诞生，计算机语言经历了机器语言、汇编语言和高级语言几个阶段。

    • 高级语言：JavaScript，Java，C，C++，C#，Python，go，Scala

  • 计算机编程语言是指用于人与计算机之间通信的语言，是人与计算机之间传递信息的媒介，因为它是用来进行程序设计的，所以又称程序设计语言或者编程语言。

  • 计算机语言是一种特殊的语言。因为它是用于人与计算机之间传递信息的，所以人和计算机都能“读懂”。具体地说，一方面，人们要使用计算机语言指挥计算机完成某种特作，就必须对这种工作进行特殊描述，所以它能够被人们读懂。另一方面，计算机必须按计算机语言描述来行动，从而完成其描述的特定工作，所以能够被计算机“读懂”。

  • 站在人和计算机的角度来看待数字：

1.2 编译器

    简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (object code) → 链接器 (Linker) → 可执行程序 (executables)

1.3 编程语言和标记语言区别
语言说明
编程语言编程语言有很强的逻辑能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令，语法是非常灵活的。
标记语言（HTML）标记语言的语法是固定的，主要是用来做格式显示

2. 计算机基础

2.1 计算机组成

2.2 数据存储

  • 在计算机中使用二进制0和1来表示数据

  • 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的

2.3 数据存储单位
大小关系：bit < byte < kb < GB < TB<.....

  • 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）

  • 字节(Byte)：1B = 8b

  • 千字节(KB)：1KB = 1024B

  • 兆字节(MB)：1MB = 1024KB

  • 吉字节(GB): 1GB = 1024MB

  • 太字节(TB): 1TB = 1024GB

2.4 程序运行过程

  • 软件运行的大概过程：

    • 打开某个程序时，先从硬盘中把程序的代码加载到内存中

    • CPU执行内存中的代码

  • 案例：01.编程语言入门.html

3. 初始JavaScript

3.1 JavaScript 是什么

  • JavaScript 是世界上最流行的编程语言之一，是一种运行在浏览器的脚本语言 （Script 是脚本的意思）

    • 1995年发布，已经有了17年历史。

  • 脚本语言：不需要编译，运行过程中由浏览器内置引擎解释并逐行进行执行

  • 官方解释：JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。

3.2 JavaScript的作用

  • 表单动态校验（密码强度检测）

  • 网页特效

  • 服务端开发(Node.js)

  • 控制硬件-物联网(Ruff)

  • 游戏开发(cocos2d-js)

3.3 HTML/CSS/JS 的关系

3.4 浏览器如何执行JavaScript代码

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

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

3.5 JavaScirpt的组成（非常重要）

  • ECMAScript

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

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

  • DOM：文档对象模型

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

  • BOM：浏览器对象模型

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

3.6 JavaScript入门案例

  • JS和CSS样式一样有3种书写位置，分别为行内、内嵌和外部。

  • 行内式（了解就可以了）

<input type="button" value="点我试试" onclick="alert('Hello World')" />

  • 内嵌式

    • 学习过程中使用较多，实际开发中也会用到

<script>
    alert('Hello  World~!');
</script>

  • 外部JS文件

    • 主要用于实际开发

<script src="haha.js"></script>

  • 案例：02.js的三种引入方式.html

4. JavaScript注释

4.1 单行注释

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

// 注释内容不会被执行
4.2 多行注释

  • 多行注释的注释方式如下：

/*
 * 注释内容 
*/
/* 注释内容 */

  • 案例：03.JS的注释.html

5. JavaScript输入输出语句

  • 在写代码的时候为了方便查看结果，所以需要将内容输出

  • JS中提供了一些输入输出语句，其常用的语句如下：

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

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info)浏览器弹出输入框，用户可以输入浏览器

  • 案例：04.JS的基本输出形式.html

6. 变量的概念

6.1 什么是变量

  • 变量：指值可以变化的量

    • 通俗：变量是用于关联数据的容器，我们可以通过变量名称获取，修改内存中的数据。

6.2 变量在内存中的存储

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

  • 案例：05.变量的定义.html

  • 案例：06.变量的小案例.html

7. 变量的应用

7.1 声明变量
//  声明变量
var name; //  声明一个 名称为name的变量

  • var 是JS的关键字，用来声明变量( variable 变量的意思 )，使用该关键字声明变量后，计算机会自动为变量分配内存空间。

  • name是程序员定义的变量名称，可以通过变量名称访问对应的内存空间。

7.2 赋值

  • = 用来把右边的值赋给左边的变量，值会存储在name变量对应的内存中。

age = 20;
7.3 改变变量的值和声明多个变量

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

var age = 20;
age = 21;   // 最后的结果就是21

  • 同时声明多个变量

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

    var age = 20,  name = 'bw', gender = 'male';

  • 声明变量特殊情况如下：

    情况说明结果
    var age ; console.log (age);只声明不赋值undefined
    console.log(age)不声明不赋值直接使用报错

  • 案例：07.变量的语法扩展.html

7.4 变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成

    • 正确的规范：userName，user_name，18aaa是错误的

    • 错误的规范：username

  • 严格区分大小写

    • var name 和 var Name是两个变量

  • 不能是关键字、保留字

    • 例如：var、for、while

  • 变量名必须有意义

  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写

    • 正确：userNameAndPassword

    • 错误：usernameandpassword

  • 案例：08.交换两个变量值.html

8. 数据类型

8.1 数据类型简介

  • 为什么需要数据类型

    • 不同的数据所需占用的存储空间是不同的，为了便于把数据分类充分利用存储空间，可以根据不同的数据类型进行选择。

  • 变量的数据类型

var age = 22;        // 这是一个数字型
var name = '张三';    // 这是一个字符串，字符串会加上单引号或者双引号

  • 在代码运行时，变量的数据类型是由JS引擎根据变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript是弱类型的语言，也就意味着同一个变量可以赋值为不同的类型。

var a = 2;     // a 为数字
a = "aa";      // a 为字符串

  • 数据类型的分类

    • 简单数据类型：Number，String，Boolean，Undefined，Null

  • 复杂数据类型 ：object

  • 案例：09.变量的数据类型.html

8.2 基本数据类型

  • the default value of a variable in JavaScript is null or undefined（JavaScript 中变量的默认值为 null 或 undefined）

  • 数字型：Number

    • 数字类型既可以保存整数，也可以保存浮点数

var age = 21;       // 整数
var Age = 21.3747;  // 小数

  • 数字型范围

    • JavaScript中数值的最大和最小值

    • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

    • 最小值：Number.MIN_VALUE，这个值为：5e-32

    • Infinity：代表无穷大，大于任何数值

    • -Infinity：代表无穷小，小于任何数值

    • NaN：Not a number，代表一个非数值

  • 如何判断类型是否为数字

    • isNaN：用来判断一个变量是否为非数字的类型

      • 不是数字返回 true，是数字返回false

     var usrAge = 21;
 var isOk = isNaN(userAge);
 console.log(isNum);
 var usrName = "andy";
 console.log(isNaN(userName));

  • 案例：10.数字型Number.html

  • 字符串型：String

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

var strMsg = "aaabbb~";  // 使用双引号表示字符串
var strMsg2 = 'aaabbb~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = aaabbb;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

  • 字符串引号嵌套

    • JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var str1 = 'aa"bb"cc';   // 可以用''包含""
var str2 = "aa'bb'cc";  // 也可以用"" 包含''
var str3 = 'acb?"; // 报错，不能 单双引号搭配

  • 案例：11.字符串型.html

  • 案例：12.字符串拼接.html

  • 布尔型Boolean

    • 布尔类型有两个值：true 和 false

    • 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

    console.log(true + 1);  // 2
console.log(false + 1); // 1

    • 案例：13.布尔型Boolean.html

  • Undefined和 Null

    • 声明后没有被赋值的变量会有一个默认值undefined

    var variable;
console.log(variable);           // undefined
console.log('xx' + variable);  // xxundefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

var name = null;
console.log(name);  //null是一个值
Null这个类型的唯一的值就是null
8.3 获取变量数据类型

  • 检测变量的数据类型

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

  • 案例：14.获取变量数据类型.html

8.4 数据类型转换

  • 其它类型转换为字符串（重点）

    • 案例：15.数字类型转换为字符型.html

  • 字符串转换为Number（重点）

    • 案例：16.其它类型转换为Number.html

    • 案例：17.类型转换案例1.html

    • 案例：18.类型转换案例2.html

    • parseInt 和 parseFloat是重点

  • 转换为布尔型

    console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

  • 案例：19.其它类型转换为布尔型.html

9. 解释型语言和编译型语言的区别（了解）

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同

  • 编译器是在代码执行之前进行编译，生成中间代码文件

  • 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

10. 关键字和保留字（掌握）

10.1 关键字

  • 关键字：指JS本身已经使用过的单词，不能再用它们当做变量名、方法名。

    • 错误的：var if = 123;

    • 自定义变量名称，方法名称等要避免使用。

break、case、catch、continue、default、delete、do、else、finally、for、
function、if、in、instanceof、new、return、switch、this、throw、try、
typeof、var、void、while、with 等。
10.2 保留字

  • 保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

    • 自定义变量名称，方法名称等要避免使用。

boolean、byte、char、class、const、debugger、double、enum、export、extends、
fimal、float、goto、implements、import、int、interface、long、mative、
package、private、protected、public、short、static、super、synchronized、
throws、transient、volatile 等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/259617.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Flink Table API 与 SQL 编程整理

Flink Table API 与 SQL 编程整理

Flink API总共分为4层这里主要整理Table API的使用 Table API是流处理和批处理通用的关系型API&#xff0c;Table API可以基于流输入或者批输入来运行而不需要进行任何修改。Table API是SQL语言的超集并专门为Apache Flink设计的&#xff0c;Table API是Scala和Java语言集成式…
阅读更多...
Android Studio: 解决Gradle sync failed 错误

Android Studio: 解决Gradle sync failed 错误

文章目录 1. 前言2. 错误情况3. 解决办法3.1 获取gradle下载地址3.2 获取gradle存放目录3.3 替换并删除临时文件3.4 触发Try Again 4. 执行成功 1. 前言 今天调试项目&#xff0c;发现新装的AS&#xff0c;在下载gradle的过程中&#xff0c;一直显示连接失败&#xff0c;Gradl…
阅读更多...
【MyBatis学习笔记】MyBatis基础学习

【MyBatis学习笔记】MyBatis基础学习

MyBatis基础 MyBatis简介MyBatis特性MyBatis下载和其他持久化层技术对比 核心配置文件详解默认的类型别名 搭建MyBatis开发环境创建maven工程创建MyBatis的核心配置文件创建mapper接口创建MyBatis的映射文件通过junit测试功能加入log4j日志功能 MyBatis获取参数值的两种方式&am…
阅读更多...
欧美电商平台Depop如何入驻？

欧美电商平台Depop如何入驻？

对标美国二手闲鱼平台Mercia,PoshMark、东南亚Etsy&#xff0c;Depop是英国的一个面向创意人群的二手时尚市场&#xff0c;类似于Instagram&#xff0c;但更专注于买卖二手服装、配饰和艺术品。 有研究显示,由于购物预算减少,高达65%的受访者表示乐意在圣诞节购买或收到二手礼…
阅读更多...
【⭐️大厂干货】阿里程序员私藏提效IntelliJ IDEA插件大放送️ ~

【⭐️大厂干货】阿里程序员私藏提效IntelliJ IDEA插件大放送️ ~

️ ❗文末有&#x1f308;&#x1f95a;&#xff08;彩蛋&#xff09; 要问对后端程序员最重要的软件是哪个&#xff1f;IntelliJ IDEA说第二&#xff0c;估计没有其他软件可以称第一。在工作过程中我发现对于这么重要的软件&#xff0c;有些开发同学竟然把它“打扮”的甚是简…
阅读更多...
AI日报：信用公司转型人工智能的长采访...或许能给你一些启发

AI日报：信用公司转型人工智能的长采访...或许能给你一些启发

欢迎订阅专栏 《AI日报》 获取人工智能邻域最新资讯 文章目录 总览什么是FICOFICO的转型如何转型人工智能平台功能 构建人工智能平台中遇到的问题关于生成式人工智能银行客户的反馈内部情况 一些社会问题 总览 FICO软件执行副总裁Stephanie Covert加入人工智能商业播客&#x…
阅读更多...
MongoDB的原子操作findAndModify和findOneAndUpdate

MongoDB的原子操作findAndModify和findOneAndUpdate

本文主要介绍MongoDB的原子操作findAndModify和findOneAndUpdate。 目录 MongoDB的原子操作一、findAndModify二、findOneAndUpdate MongoDB的原子操作 MongoDB的原子操作指的是在单个操作中对数据库的数据进行读取和修改&#xff0c;并确保操作是原子的&#xff0c;即要么完全…
阅读更多...
linux实现shell脚本监控磁盘内存达到阈值时清理catalina.out日志

linux实现shell脚本监控磁盘内存达到阈值时清理catalina.out日志

想在服务器上写一个shell脚本&#xff0c;在磁盘使用率达到80%时&#xff0c;自动清理掉一些没有用的日志文件&#xff0c;根据这个想法&#xff0c;在生产环境上写了一个以下脚本&#xff0c;按照该流程&#xff0c;可实现在linux环境做一个定时任务来执行shell脚本&#xff0…
阅读更多...
Pixel Nerf代码阅读

Pixel Nerf代码阅读

Input&#xff1a; 图像的 分辨率是 300*400&#xff1b; 每个场景里面有 49张 Training 的图像。 SB&#xff1a; scene batch 场景的个数&#xff1b; 4 NV&#xff1a; number input &#xff0c;每个场景的视角&#xff0c;也就是图像的数量&#xff1b; 49 每条光线首先…
阅读更多...
JS逆向实战——开发者工具检测

JS逆向实战——开发者工具检测

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、背景 在JS逆向领域&#xff0c;Chrome开发者工具是核心&#xff0c;抓包、调试、看调用栈等都离不开它。可以说&#xff0c;逆向人…
阅读更多...
blast安装及简单使用

blast安装及简单使用

一、安装blast 1.Ubuntu环境 # 下载blast wget https://ftp.ncbi.nlm.nih.gov/blast/executables/blast/2.9.0/ncbi-blast-2.9.0-x64-linux.tar.gz # 解压blast压缩包 tar -xzvf ncbi-blast-2.9.0-x64-linux.tar.gz # 测试 ./bin/blastp -h 这里就代表安装成功了&#xff0c;…
阅读更多...
Android 架构 - 组件化

Android 架构 - 组件化

一、概念 组件化是对单个功能进行开发&#xff0c;使得功能可以复用。将多个功能组合起来就是一个业务模块&#xff0c;因此去除了模块间的耦合&#xff0c;使得按业务划分的模块成了可单独运行的业务组件。&#xff08;一定程度上的独立&#xff0c;还是依附于整个项目中&…
阅读更多...
如何免费搭建私人电影网站(三)

如何免费搭建私人电影网站(三)

接上一篇文章&#xff1a; 网站模版上传到空间后就进行安装网站了操作如下图&#xff1a; 打开链接地址&#xff1a; 输入前面设置好的FTP密码 进入安装界面 点同意后下一步 需要填入数据库的账号和密码 返回虚拟主机界面进行设置 如下图点初始化 修改数据库的密码 然后…
阅读更多...
Android Canvas状态save与restore，Kotlin

Android Canvas状态save与restore，Kotlin

Android Canvas状态save与restore&#xff0c;Kotlin private fun f1() {val bitmap BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val canvas Canvas(bitmap)val paint Paint(Paint.ANTI_ALIAS_FLAG)paint.color Color.RED…
阅读更多...
hyper-v ubuntu2204指定静态ip地址

hyper-v ubuntu2204指定静态ip地址

虚拟机静态IP设置 虚拟机每次重新启动&#xff0c;都会动态分配IP&#xff0c;这导致我们无法使用一个固定的ip连接到虚拟机内部。解决该问题的最直接有效的办法就是给虚拟机绑定2张网卡&#xff0c;一张用于连接外网、一张用于连接内网。 init 0 关机&#xff0c;也可以从管…
阅读更多...
C语言—每日选择题—Day57

C语言—每日选择题—Day57

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 下面程序段&#xff08;&#xff09; char *str[] {"ABC", "DEF", "GHI"}; puts(str[1]); A&#xff1a;A…
阅读更多...
day49_代码生成器EasyCode

day49_代码生成器EasyCode

IDEA安装插件 easycode插件 使用 修改模板 因为默认模板有些不适用自己项目,所以需要修改,以下是我的模板json文件 生成了Controller,Service,Dao,Entity没有前后端交互的R,需要自己导入 在磁盘新建一个EasyCodeConfig.json,将以下代码赋值粘贴进去, 然后在idea的easycode插…
阅读更多...
中央空调冷却塔循环水全自动加药装置PH电导率设备工作原理动画

中央空调冷却塔循环水全自动加药装置PH电导率设备工作原理动画

一&#xff1a;全自动加药装置【概述】 随着在给水、排水处理过程中&#xff0c;常常投加各类化学药剂作为阻垢、杀菌灭藻、混凝、絮凝用&#xff0c;以达到净化水的目的。这些药剂有固体颗粒、液体&#xff0c;在投加过程中必须溶解、稀释及按配比定量投加方能取得最佳效果&am…
阅读更多...
【SpringBoot快速入门】(2)SpringBoot的配置文件与配置方式详细讲解

【SpringBoot快速入门】(2)SpringBoot的配置文件与配置方式详细讲解

之前我们已经学习的Spring、SpringMVC、Mabatis、Maven&#xff0c;详细讲解了Spring、SpringMVC、Mabatis整合SSM的方案和案例&#xff0c;上一节我们学习了SpringBoot的开发步骤、工程构建方法以及工程的快速启动&#xff0c;从这一节开始&#xff0c;我们开始学习SpringBoot…
阅读更多...
Leetcode 45 跳跃游戏 II

Leetcode 45 跳跃游戏 II

题意理解&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。 还是从初始坐标i0的位置到达最后一个元素&#xff0c;但是问题不是能不能跳到&#xff0c;而是最少几步能跳到最后一个元素。 目标&…
阅读更多...
最新文章

Copyright @ 2022~2023