初始JavaScript

news2024/12/22 23:37:35

  JavaScript 的作用

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

1.4 HTML/CSS/JS 的关系

HTML/CSS标记语言--描述类语言

  • HTML决定网页结构和内容(决定看到什么),相当于人的身体。
  • CSS决定网页呈现给用户的模样(决定好看不好看),相当于给人穿衣服,化妆。 

JS 脚本语言--编程类语言

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

1.4浏览器执行JS简介

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

  • 渲染引擎: 用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
  • JS 引擎:也称为JS 解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的v8 

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

1.5 JS的组成

 1.ECMAScript

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

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

2.DOS-文档格式模型

文档格式模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOS提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)

3.BOM--浏览器对象模型

DOM 是指浏览器对象模型,他提供了独立于内容的,可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框,控制浏览器跳转,获取分辨率等。

1.6JS初体验

JS有三种书写方式,分别为行内,内嵌和外部。

1.行内式JS

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

   2.内嵌式JS

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

3.外部JS文件

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

 3.JavaScript输入输出语句

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

1.变量

1.1什么是变量

        白话:变量就是一个装东西的盒子

        通俗: 变量是存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。

1.2变量在内存中的存储

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

类似我们酒店的房间,一个房间就可以看作是一个变量。

 2.变量的使用

        变量在使用时分两步:1.申明变量  2.赋值

               1.申明变量

//声明变量

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

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

        2.赋值

age = 10;  // 给age 这个变量赋值为10;

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

         3.变量的初始化

var  age = 18;  //声明变量同时赋值为18 

 声明一个变量并赋值,我们称之为变量的初始化。

1.4变量语法扩展

        1.更新变量

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

        2.同时声明多个变量

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

        3.声明变量的特殊情况

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

1.5变量的命名规范

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

变量的小结

  • 为什么需要标量?      因为一些数据需要保存,所以需要变量
  • 变量是什么?             变量就是一个容器,用来存放数据的,方便我们以后使用里面的数据
  • 变量的本质是什么?   变量是内存里面的一块空间,用来存储数据
  • 变量怎么使用?           我们使用变量的时候,一定要声明变量,然后赋值  声明变量的本质是去内存申请空间
  • 什么是变量的初始化? 声明变量并赋值我们称之为变量的初始化
  • 变量的命名规范           变量命名尽量要规范,见名知意--驼峰命名法
  • 交换两个变量的思路? 画图 转换为代码 

数据类型

        1.1为什么需要数据类型

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

简单的说,数据类型就是数据的类别型号。比如姓名 ‘张三’,年龄18,这些数据的类型是不一样的。

1.2变量的数据类型

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

在代码运行时,变量的数据类型是由js引擎根据 = 右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。

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

1.3数据类型的分类

        js把数据类型分为两类:

  •  简单数据类型(Number,String,Boolean,Undefined,Null)
  • 复杂数据类型(object) 

简单数据类型

简单数据类型说明默认值
Number数字型,包含 整数值和浮点数值 如:21,0.210
Boolean布尔数据类型 true false false
String字符串类型“”
Undefinedvar a; 声明了变量a 但没有给值,此时a=undefinedundefined
Nullvar a = null; 声明变量a 为空置null

 1.数字进制

最长常见的进制有二进制, 八进制,十进制,十六进制。

在js 中八进制前面加上0,十进制前面加上0x;

2.数值型范围

JavaScript中数值的最大和最小

3.数值型三个特殊值

alert(Infinity);

alert(-Infinity);

alert(NaN);

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

2.2数字型NUmber

4.isNaN()

        用来判断一个变量是否为非数字类型,如果是返回true如果不是返回false

2.3字符串类型String

字符串类型可以是引号中的任意文本,其语法为单引号和双引号。

因为HTML标签里面的属性使用的是双引号,js这里推荐使用单引号。

JS字符串可以单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)

2.字符串转义符

类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义字符。

转义字符都是\开头,常用的转移字符及其说明如下:

转义符解释说明

\n

换行符,n是newline 的意思
\\斜杠 \
\'’ 单引号
\'''' 双引号
\ttab 缩进
\b 空格,b是blank的意思

 2.3字符串型String

        3.字符串长度

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

        4.字符串的拼接

  • 多个字符串之间可以使用+进行搜索,其拼接方式为 字符串+任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串,在拼接成一个新的字符串 

2.4字符串型 String

5.字符串拼接加强

  • 我们经常将字符串和变量来拼接,因为变量是可以很方便地修改里面的值
  • 变量是不能添加引号的,因为加引号的变量会变成字符串
  • 如果变量两侧都有子字符串拼接,口诀"引引加加",删掉数字,变量写加中间

 2.5布尔型 Boolean

布尔类型有两个值:true和false,其中true 表示为真,而false 表示为假。
布尔类型和数字型相加的时候,true为1,false 的值为 0;

2.6 Undefined 和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)

一个声明变量给nulll值,里面存的值为空。

3.获取变量数据类型

3.1获取检测变量的数据类型

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

3.2字面量

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

  • 数字字面量:8,9,10
  • 字符串字面量; "大前端"
  • 布尔字面量:true  false

4.数据类型转换

使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型

我们通常会实现三种方式转换:

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

4.2转换为字符串

方式说明案例
toString()转成字符串var num=1;alert(num.toString());
String()转换成字符var num=1; alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num + "我是字符串");
  •  toString() 和 String() 使用方式不一样
  • 三种转换方式,我们跟喜欢用第三中加号拼接字符串的方式,这种方式也称之为隐式转换

4.3 转换为数字型(重点)

方式说明案例
parselnt(string)函数将String类型转换成整数数值型parselnt('78')
parseFloat(string)函数将string类型转换成浮点数数值类型parseFloat('78.21')
Number()强制转换函数将string类型转换为数值型Number('12')
js 隐式转换( - * /)利用算数运算隐式转换为数值型'12' - 0
  •  注意 parseInt 和 parseFloat 单词的大小写,这两个是重点
  • 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型

 4.4转换为布尔型

方式说明案例
Boolean其他类型转换成布尔值Boolean('true')
  • 代表 空,否定的值会被转换为false,如" ,0,NaN,null,undefined
  • 其余值都会被转换为true 

1.解释型语言和编译型语言

1.概述

        计算机不能直接解除任何机器语言以外的语言,所以必须要把程序员缩写的程序语言翻译成机器语言才能够执行程序。程序语言翻译成机器语言的工具,被称为翻译器。

  • 翻译器翻译的方式有两种: 一个是编译,另一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行解释编译,生成中间代码文件
  • 解释器是在运行时进行及解释,并立即执行(当编译器以及解释方式运行的时候,也称之为解释器) 

2.执行过程

 

 2.标识符,关键字,保留字

1.标识符

标识符:就是指开发人员为变量,属性,函数参数取的名字。

标识符不能够是关键字或者是保留字。

2.关键字

关键字:是指JS本身已经使用了的字,不能在用他们充当变量名,方法名。

包括: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等。

3.保留字

保留字:实际上就是预留的‘关键字’,意思是现在虽然还不是关键字,但是未来也可能会成为关键字,同样不能使用他们当变量名或方法名。

包括: Boolean,byte,char, class,const,debugger,double,enum,export,extends,fima, float,goto,implements,import,int 等等

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

chatgpt赋能python:Python如何将字符串首字母大写

Python 如何将字符串首字母大写 在编程中&#xff0c;字符串操作是不可避免的&#xff0c;而往往需要将字符串的首字母大写&#xff0c;例如在处理用户名、标题等信息时&#xff0c;这样做可以提高可读性和美观性。Python作为一种高效、易学易用的编程语言&#xff0c;有很多内…

webpack零基础入门

一、什么是webpack Webpack 是一个现代的 JavaScript 应用程序静态模块打包器 (module bundler)。 它是一个开源的前端工具&#xff0c;可以将各种资源文件&#xff08;JS、CSS、图片、字体等&#xff09;打包成一个或多个包&#xff0c;并且能够通过配置选项来实现各种构建需…

基于SpringBoot+Vue的招聘信息管理系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

Final-v2

算法的定义和特征 什么是算法&#xff1f; 算法是求解某一特定问题的一组有穷规则的集合&#xff0c;它是由若干条指令组成的有穷符号串。 算法的五个重要特性&#xff1a; 确定性&#xff1a;每一条指令都必须有确切的含义。不存在二义性&#xff0c;只有一个入口和出口。可…

基于SpringBoot+Vue的考研资讯平台设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

2023智源大会议程公开丨视觉与多模态大模型论坛

6月9日&#xff0c;2023北京智源大会&#xff0c;将邀请AI领域的探索者、实践者、以及关心智能科学的每个人&#xff0c;共同拉开未来舞台的帷幕&#xff0c;你准备好了吗&#xff1f;与会知名嘉宾包括&#xff0c;图灵奖得主Yann LeCun、OpenAI创始人Sam Altman、图灵奖得主Ge…

元组的学习笔记

列表 [] 单身什么是字典 {} 二人世界 python内置的数据结构之一&#xff0c;与列表一样是一个可变序列(可以增删改操作的) 以键值对的方式存储数据&#xff0c;字典是一个无序的序列 -> hash(key) 通过哈希函数来计算存储位置,key一定是不可变的字典的创建 使用花…

国内免费的ChatGPT镜像网址(ChatGPT国内镜像网站大盘点)

ChatGPT 以其强大的信息整合和对话能力惊艳了全球&#xff0c;在自然语言处理上面表现出了惊人的能力。这么强大的工具我们都想体验一下&#xff0c;那么今天就分享几个ChatGPT国内的镜像网址&#xff0c;大家可以直接使用&#xff01; 1.AiChat 网址入口 多角色多功能可玩性高…

IIC协议——OLED屏幕

1.IIC协议介绍 IIC全称Inter-Integrated Circuit (集成电路总线) 简称I2C 是由PHILIPS公司在80年代开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备。IIC属于半双工同步通信方式 特点 简单性和有效性 由于接口直接在组件之上&#xff0c;因此IIC总线占用的空…

超好用万能提示词框架,ChatGPT效率翻三倍!

前几天写了几篇自己的AI实践&#xff1a; 《程序员&#xff0c;如何借力ChatGPT&#xff1f;》 《普通人&#xff0c;如何借力ChatGPT&#xff1f;》 《我认为&#xff0c;最好用的AI工具是它》 《如何借力AI工具做PPT》 很多朋友在后台留言&#xff0c;问我应该如何写高质量的…

云原生Docker网络管理

Docker网络 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c; Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是每个容器的默认网关。 …

redis整合通过QQ邮箱发送验证码

目录 1.QQ开启服务 2.java中配置 2.1.导入依赖 2.2.yml配置 2.2.1 mail配置 2.2.2 redis配置&#xff08;与mail同级&#xff0c;在spring下一级&#xff09; 2.3.conroller层 2.3.1 在controller类上加上 2.3.2 生成验证码方法 2.3.3发送邮件接口 2.3.4 用户登录接口&…

【事件驱动微服务架构】专家组:事件驱动的大规模架构

赖斯&#xff1a;欢迎来到我们关于架构的专题小组&#xff0c;你们一直想知道轨道。该专题小组称为事件驱动的大规模架构。当您思考事件驱动架构时&#xff0c;您会想到什么&#xff1f;这是规模、性能和灵活性的好处吗&#xff1f;也许你想到了一个你可能经历过的特殊问题。也…

Web Audio API实现简单变声效果

前言 想在网页中实现实时音频变声效果该如何实现呢&#xff0c;之前遇到这种处理音视频的需求&#xff0c;可能会想到需要借助C代码实现。但是现在随着浏览器性能的提升、web API的丰富&#xff0c;通过浏览器原生的API也可以操作音频数据实现很多复杂的效果&#xff0c;为web音…

mitt用100行实现发布-订阅模式还收获了9k的Star

我们先了解什么是发布-订阅模式&#xff0c;发布-订阅模式它是一种对象间一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖它的对象都将得到状态的通知。 发布-订阅模式流程如下&#xff1a; 订阅者将自己想订阅的事件注册到调度中心&#xff1b;…

快手 Flink 的稳定性和功能性扩展

摘要&#xff1a;本文整理自快手技术专家刘建刚&#xff0c;在 Flink Forward Asia 2022 生产实践专场的分享。本篇内容主要分为四个部分&#xff1a; 1. 快手 Flink 平台 2. 稳定性保障和智能运维 3. 复杂场景下的功能扩展 4. 批处理的定制优化 Tips&#xff1a;点击「阅读原文…

maven添加指定仓库和镜像

maven历史版本下载地址&#xff1a;https://archive.apache.org/dist/maven/maven-3/ maven版本和java版本的关系&#xff1a;https://maven.apache.org/docs/history.html 项目中添加仓库 有两种方式 1.在pom.xml中添加&#xff08;优先级高&#xff09; 2.在setting.xml中添…

【已解决】-Mac/Mac mini/Macbook上修改鼠标指针大小

问题&#xff1a; MacOS默认的鼠标指针太小了&#xff0c;平时很容易找不到在哪里。 解决办法&#xff1a; 在 Mac 上&#xff0c;点击苹果菜单 >“系统偏好设置”&#xff0c;然后点按“辅助功能” 。 点击“显示”&#xff0c;然后点击“指针”。 设定以下任一选项…

【SQL】Oracle实现远程访问

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…

CDN和Web加速器之间的区别

在数字时代&#xff0c;网站、社交媒体、电子商务、内容流平台和超个性化网络体验激增。因此&#xff0c;需要实时可靠地为最终用户提供大量生成的内容&#xff0c;而不会出现延迟或崩溃&#xff0c;无论其位置、网络、设备或浏览器如何。为此&#xff0c;使用CDN和web加速器就…