靡语IT：JavaScript_概述、基础

一、JavaScript 概述

javaScript 语言主要是完成页面的数据验证，因此它运行在客户端， 需要运行浏览器来解析执行 JavaScript 代码。js 是网景公司 （Netscape）的产品，最早取名为 LiveScript 最后借 java 的热度 改为 javaScript。

JS 是弱类型（类型可变）JAVA 是强类型（确定好的变量类型，类型不可变）

编写第一个 JavaScript

二、JavaScript 特点

  1. js 是脚本语言，采用小程序端的方式实现编程

  2. js 是解释性语言，根据代码顺序逐一解释，其中某一行有错，js 就会卡在此处无法进入下一步。

  3. Js 是一种基于对象的语言

  4. js 是一种安全性语言，具有 web 安全特性不允许访问本地 硬盘，也不允许对网络文件进行修改，只能通过浏览器进行浏览或者动态交互。

  5. js 跨平台性

JS 注释

1.单行注释以 // 开头。

2.多行注释以 /* 开始，以 */ 结尾

三、js 基本语法

1、区分大小写

2、分号为每一行的结束符

3、注释，单行注释以//开头，/*多行注释*/

4、命名规范

命名规范指的就是标识符，就是变量，函数的名字或者函数的 参数名，变量名命名方法常见的有匈牙利命名法、驼峰命名法 和 帕斯卡命名法。

驼峰法命名规范(包括函数名，变量等):

  1. 名字中可以有字母、下划线或者美元符号、数字

  2. 必须以字母、下划线或者美元符号开始，不能数字开头，也不能使用特殊符号。

  3. 命名不能是系统的关键字：比如 new ,if,class...... 区分大小写

  4. 命名最好用有意义的名称。比如说 name,people......

四、输出输入工具

4.1.输出弹窗

弹出带有一条指定消息和一个确定按钮的警告框

语法: alert(对话框中显示的纯文本)

4.2.输出到页面，会以HTML的语法解析里面的内容

语法: document.write(参数 1,参数 2,参数 3,...) ；

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和 HTML。

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write()，整个 HTML 页面将被覆盖。

4.3.输入弹窗

显示可提示用户进行输入的对话框

语法: prompt( 对话框中显示的纯文本,默认的输入文本 );

两个参数均为可选。

4.4.控制台输出

console.log("我是日志信息")；

在控制台上输出的信息,浏览器按下 F12 打开控制台,Console即控制台 可以接受任何字符串、数字和 js 对象，可以看到清 楚的对象属性结构,不会阻塞程序的执行.

五、DOM的堵塞

js 对 DOM 树的阻塞

  1. DOM: js 操作网页的接口，全称为“文档对象模型”(Document Object Model)。可以简单理解成页面中的元素

  2. DOM 树:元素和元素之间的关系,可以简单理解成页面中的元素

  3. js 的执行会阻塞页面结构的加载,此时 DOM 树是不完整的，这

样在调用一些 js 代码时就可能报错

  1. 防止阻塞的两种方法:

（1）把所有 js 代码放在 body 区域的最后

（2）添加 window.onload 事件,表示网页加载完毕后(包括图片、css 文件等等)执行的操作

六、JS的阻塞

js 代码有错误时，从此处代码开始以后的代码都不会被执行

检查错误代码方法：

  1. 看控制台信息

  2. 使用 alert()语句确定错误范围，再逐一查错。

七、嵌入JavaScript代码的三种方式

  1. 内部引入 写在<script>标签中

<script type=”text/javascript”>...........</script>

  1. 以外部文档形式连接到 HTML 文档中

<script type="text/javascript" src="one.js"></script>

  1. 直接在 HTML 标签中的 js 代码

<a href="javascript:alert('我是在 html 标签里的 js 代码 ')">提示框</a>

▶ 引入区域

  • js 可以引入文档中的任何区域，js 都可以正确执行

  • js 通常写在 head 区域或者 body 区域

▶ 执行顺序

  • 代码在执行过程中，另一段代码想要执行就必须等当前代码执行完成后才可以进行

  • JS 是按照语句出现的先后顺序执行,和引入方式无关

八、常量

常量是从始至终不能被改变的数据，常量通常用来表示固定不变的量，比如圆周率，万有引力常量。

准确的来说，在JavaScript中，确实没有定义常量的具体语法，我们可以使用标识符大写的方式来当作定义了常量

var PAI = 3.14;
var UPPER_BOUND = 100;

九、变量

变量：从字面上看，变量是可变的的量，从编程角度讲，变量是用于存储数据的容器

实例

var x;
var x = 5;
var x = "John";

注：变量不仅可存放具体值，还可以存放运算结果

实例

var x;              // x 为 undefined
var x = 5;          // 现在 x 为数字
var x = "John"      // 现在 x 为字符串

注：JavaScript 拥有动态类型。这意味着相同的变量可用作不同 的类型，同一个变量可以多次赋值，后赋的值会覆盖前面的值

练习 1

使用 js 提供的输入款，获取用户输入的信息，名字，年龄，地址，电话号码，

使用 js 语法输出在页面的 div 中。

练习 2

交换两个变量的值,a=22,b=33,使用控制台输出 a=33,b=22

十、数据类型

字符串（String）、

数字(Number)、

布尔(Boolean)、

数组(Array)、

对象(Object)、

空（Null）、

未定义（Undefined）。

10.1.Number:数值类型

整数和小数（js 的浮点数的运算能力很差，所以不建议使用 js 做浮点数的运算）

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

实例

var x1 = 34.00;         // 使用小数点来写
var x2 = 34;            // 不使用小数点来写

  1. Js 中整数和小数统称为 number 类型

var a = 120;
var b = 0.120;

  1. js 中的数值最大值和最小值

Console.log(Number.MAX_VALUE);      // 1.7976931348623157e+308 Console.log(Number.MIN_VALUE);      // 5e-324

  1. 数字型三个特殊值

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

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

  • NaN Not a Number 代表一个非数值

  1. isNaN()

用来判断一个变量是否为非数值类型，返回 true/false

10.2.String:字符串类型

只要是引号括起来的都是字符串类型

可以在字符串中使用引号，只要不匹配包围字符串的引号即可

实例

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

  1. 字符串引号嵌套

Js 使用引号规则：外双内单，外单内双

var strMsg='我是"IT老王"我在欣知大数据'

  1. 字符串转义字符

转义符解释说明
\n换行符，n 是 newline 的意思
\\斜杠 \
\'' 单引号
\"" 双引号
\ttab 缩进
\b空格，b 是 blank 的意思

  1. 字符串长度

字符串是由若干个字符组成的，这些字符数量就是字符串的长度。

通过字符串的 length 属性可以获取字符串长度

var strMsg = "我是帅气多金的程序猿！！！" 
alert(strMsg.length);       // 13

  1. 字符串拼接

多个字符串之间可以使用+进行拼接，拼接方式为 字符串+任意类型=新的字符串

拼接前会把字符串相加的任何类型转为字符串，在拼接起来

//1.字符串相加 
Console.log(“hello”+” ”+”world”);       //hello world 
//2.数值字符串相加 
Console.log(“12”+” ”+”12”);             //1212 
//3.数值字符串+数值 
Console.log(“12”+” ”+12);               //1212

10.3.Boolean:布尔类型

只有两个值 false/true（常用在条件测试中，运算中 flase=0/true=1）

10.4.Undefined:空变量

表示变量没有值

10.5.null:空对象指针

是一个只有一个值的数据类型（可以将变量设置为 null 来清空变量）

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars = null;
person = null;

10.6.Object:对象

由花括号分割，对象的属性以名称和值对的形式定义（name:value）来定义

JavaScript 数组属于对象

实例

var cars = ["Saab","Volvo","BMW"];

JavaScrip 对象

实例

var person={ firstname : "John", lastname : "Doe", id : 5566 };

对象属性有两种寻址方式：

实例

name = person.lastname;
name = person["lastname"];

10.7.获取变量数据类型

typeof: 可以使用 typeof(变量名)查询数据类型

10.8.数据类型的相互转化

  1. 转换为字符串类型

方式说明案例
toString()转成字符串var num = 1; alert(num.toString());
String()强制转换转成字符串var num = 1; alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num + "我是字符串");

  • toString() 和 String() 使用方式不一样。

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

  1. 转换为数值型（重点）

方式说明案例
parseInt(String) 函数将String类型转成整数数值型parseInt('78')
parseFloat(String) 函数将String类型转成浮点数数值型parseFloat('78.21')
Number() 强制转换函数将String类型转换为数值型Number('12')
js 隐式转换(- * /)利用算术运算隐式转换为数值型'12' - 0

  • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点

  1. 转化为布尔值

方式说明案例
Boolean()函数其他类型转成布尔值Boolean('true');

  • 代表空、否定的值会被转换成false，如''、0、NaN、null、underfined

  • 其余值都会被转换为true

Undefine 和 null 是不能转化成 String 类型的

Undefine（NaN）和 null（0）、true（1）、false（0）可转化成 number 类型

练习 3

  • 弹出一个输入框（prompt），让用户输入出生年月（用户输入）

  • 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）

  • 弹出警示框（alert），把计算的结果输出（输出结果）

十一、运算符

11.1.算术运算符

​

运算符描述例子x 运算结果y 运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模（余数）x=y%215
++自增x=++y66
x=y++56
--自减x=--y44
x=y--54

​

用于字符串的 +

  • 运算符用于把文本值或字符串变量加起来（连接起来）。

  • 要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

  • 如果把数字与字符串相加，结果将成为字符串

  • 除了加法字符串和数值相减，相除，求余...

  • 当字符串是纯数字，计算机会将字符串转为数值型进行减法计算

  • 当字符串不是纯数字或者无数值，则返回的值是 NAN

11.2.赋值运算符

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

11.3.比较运算符

  • 相等运算符 == ：判断两个操作数是否相等。不同的数据类型会自动转换为相等的数据类型再做比较。

  • 等同运算符=== ：全等（值和类型），严格意义的相等，两个操作数的值和他们的类型必须完全一致。

  • 不等于：!=

  • 不等同运算符： !==

  • 大于：>

  • 小于：<

  • 大于或等于：>=

  • 小于或等于：<=

11.4.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

  • && and(与)

  • || or(或)

  • ! not(非)

11.5.三元运算/三目运算/三元表达式/条件运算符

根据条件在两个语句中执行其中的一个，使用符号 ？：

语法如下：条件表达式？语句 1：语句 2

练习 4

输入框中输入一个数，与 18 比较，大于 18 则在页面显示成年小于则显示未成年

十二、运算符的优先级

优先级运算符说明结合性
1[]、.、()字段访问、数组索引、函数调用和表达式分组从左向右
2++ -- -~!delete new typeof void一元运算符、返回数据类型、对象创建、未定义的值从右向左
3*、/、%相乘、相除、求余数从左向右
4+、-相加、相减、字符串串联从左向右
5<<、>>、>>>左位移、右位移、无符号右移从左向右
6<、<=、>、>=、instanceof小于、小于或等于、大于、大于或等于、是否为特定类的实例从左向右
7==、!=、===、!==相等、不相等、全等、不全等从左向右
8&按位”与“从左向右
9^按位”异或“从左向右
10|按位”或“从左向右
11&&短路与（逻辑”与“）从左向右
12||短路或（逻辑”或“）从左向右
13?:条件运算符从右向左
14=、+=、-=、*=、/=、%=、&=、|=、^=、<、<=、>、>=、>>=混合赋值运算符从右向左
15,多个计算按优先级算，然后从右向左

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++多线程同步（上）

C++多线程同步（上）

多线程同步 引言总述详情互斥锁示例运行结果分析条件变量示例一实现分析优化运行结果示例二实现代码运行结果示例三实现代码运行结果读写锁示例实现代码注意分析运行结果附言实现运行结果运行结果个人心得引言 项目中使用多线程，会遇到两种问题，一种是对共享资源的访问时需要…
阅读更多...
关于运行flutter app 运行到模拟器出现异常提示

关于运行flutter app 运行到模拟器出现异常提示

Exception: Gradle task assembleDebug failed with exit code 1 解决方案&#xff1a; 1.讲当前文件的distributionUrl值改为 https://mirrors.cloud.tencent.com/gradle/gradle-7.4-all.zip
阅读更多...
超市售货|超市售货管理小程序|基于微信小程序的超市售货管理系统设计与实现(源码+数据库+文档)

超市售货|超市售货管理小程序|基于微信小程序的超市售货管理系统设计与实现(源码+数据库+文档)

超市售货管理小程序目录 目录 基于微信小程序的超市售货管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;商品管理 &#xff08;2&#xff09;出入库管理 &#xff08;3&#xff09;公告管理 …
阅读更多...
CrossOver2024虚拟机软件的优缺点分别是什么？

CrossOver2024虚拟机软件的优缺点分别是什么？

CrossOver虚拟机软件的优缺点分别如下&#xff1a; 优点&#xff1a; 无需双系统&#xff1a;用户可以在Mac或Linux系统上直接运行Windows应用程序&#xff0c;无需安装双系统&#xff0c;从而节省了硬盘空间并避免了系统切换的麻烦。易于安装和使用&#xff1a;CrossOver具有…
阅读更多...
文件上传----＞生僻字解析漏洞

文件上传----＞生僻字解析漏洞

现在的现实生活中&#xff0c;存在文件上传的点&#xff0c;基本上都是白名单判断&#xff08;很少黑名单了&#xff09; 对于白名单&#xff0c;我们有截断&#xff0c;图片马&#xff0c;二次渲染&#xff0c;服务器解析漏洞这些&#xff0c;于是今天我就来补充一种在upload…
阅读更多...
RAW 编程接口 TCP 简介

RAW 编程接口 TCP 简介

一、LWIP 中 中 RAW API 编程接口中与 TCP 相关的函数 二、LWIP TCP RAW API 函数 三、LwIP_Periodic_Handle函数 LwIP_Periodic_Handle 函数是一个必须被无限循环调用的 LwIP支持函数&#xff0c;一般在 main函数的无限循环中调用&#xff0c;主要功能是为 LwIP各个模块提供…
阅读更多...
vscode【报错】yarn : 无法将“yarn”项识别为 cmdlet

vscode【报错】yarn : 无法将“yarn”项识别为 cmdlet

问题 CMD下载完yarn可以查看到yarn版本&#xff0c;但是进入到vscode控制台报错无法识别&#xff0c;报错内容如下&#xff1a; vscode【报错】yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff…
阅读更多...
ffmpeg for android编译全过程与遇到的问题

ffmpeg for android编译全过程与遇到的问题

编译前准备 编译环境&#xff1a;Ubuntu16&#xff0c;可自行下载VMWare最新版并百度永久许可证或在服务器上安装Ubuntu ffmpeg源码&#xff1a;ffmpeg4.2.2 NDK下载&#xff1a;Android NDK r21e 有条件的最好还是在Liunx平台下编译吧&#xff0c;Windows平台下编译坑更多…
阅读更多...
【计算机网络】数据链路层|封装成帧|透明传输|差错检测|PPP协议|CSMA/CD协议

【计算机网络】数据链路层|封装成帧|透明传输|差错检测|PPP协议|CSMA/CD协议

目录 一、思维导图 ​ 二、数据链路层功能概述 1.数据链路层概述 2.数据链路层功能概述——封装成帧 3.数据链路层功能概述——透明传输 4.数据链路层功能概述——差错检测 三、数据链路层重要协议 1.数据链路层重要协议&#xff1a;PPP协议 2.数据链路层重要协议&#x…
阅读更多...
js设计模式:备忘录模式

js设计模式:备忘录模式

作用: 封装的对象可以在对象触发行为时进行状态的记录与保存 也可以进行状态的回退,恢复之前的状态 示例: class Editor{constructor(){this.allText }edit(text){this.allText text}saveNow(){return new EditorText(this.allText)}backspacing(editorText){this.allText…
阅读更多...
护眼台灯哪个品牌更好用？五大好用护眼台灯大爆料！

护眼台灯哪个品牌更好用？五大好用护眼台灯大爆料！

护眼台灯相信大家都有所耳闻或者使用过,家里有小孩的可能了解更深,毕竟是孩子学习时需要使用的小家电。现在市面上的护眼台灯种类可以说是多到眼花缭乱,甚至有些劣质的产品掺杂在里面,或许有些宝妈已经踩过一些坑了&#xff0c;护眼台灯究竟哪个品牌更好用&#xff1f; &#x…
阅读更多...
这个春节，爽了

这个春节，爽了

四次医院 请了一周假&#xff0c;准备开始愉快的长假。 结果第一天小孩就发烧了&#xff0c;赶紧送医院拿药。回到家才发现&#xff0c;给医生看的验血报告是上一次的&#xff0c;那是好几个月之前的。 但是药已经吃了&#xff0c;这是吃错药了呀&#xff01;&#xff01; …
阅读更多...
GoLand 相关

GoLand 相关

goland 下载依赖 go mod tidy&#xff1a;保持依赖整洁 go mod tidy 命令的作用是清理未使用的依赖&#xff0c;并更新 go.mod 以及 go.sum 文件。 go mod tidy 和 go mod vendor 两个命令是维护项目依赖不可或缺的工具。go mod tidy 确保了项目的 go.mod 文件精简且准确&…
阅读更多...
ubuntu20.04安装实时内核补丁PREEMPT_RT

ubuntu20.04安装实时内核补丁PREEMPT_RT

参考&#xff1a; Ubuntu 18.04安装 RT-PREEMPT 实时内核及补丁【过程记录】_ubuntu18.04 preempt rt linux 5.6.19-CSDN博客 https://github.com/UniversalRobots/Universal_Robots_ROS_Driver/blob/master/ur_robot_driver/doc/real_time.md当前内核&#xff1a;5.15.0-94-ge…
阅读更多...
1.deeplabv3+网络结构及原理

1.deeplabv3+网络结构及原理

这里的网络结构及原理可以看这篇博客&#xff0c;DeepLabV3: 在DeepLabV3基础上引入了Decoder_matlab deeplabv3resnet101-CSDN博客该博客翻译原论文解释得很清楚。 一、引言 语义分割的目标是为图像中的每个像素分配语义标签。在这项研究中&#xff0c;考虑了两种类型的神经网…
阅读更多...
docker：Haoop集群

docker：Haoop集群

系列文章目录 docker&#xff1a;环境安装 docker:Web迁移 docker:Haoop集群 文章目录 系列文章目录前言一、宿主机选择二、环境准备1.前置技术2.网络环境1. docker网卡2. 分配IP 三、容器互联三、Jdk和Hadoop安装四、分发脚本五、启动Hadoop总结 前言 年前学习了docker的相关…
阅读更多...
https://registry.npm.taobao.org淘宝npm镜像仓库地址更新

https://registry.npm.taobao.org淘宝npm镜像仓库地址更新

在工作中有遇见获取淘宝的npm镜像存在问题&#xff0c;图示如下的报错&#xff1a; 根据报错的内容是说 https://registry.npm.taobao.org地址访问失败了&#xff0c;然后通过排查发现淘宝的npm镜像仓库地址有更新了。需要使用最新的地址 旧的淘宝镜像仓库&#xff1a;https://…
阅读更多...
数据结构2月19日

数据结构2月19日

题目&#xff1a;顺序表作业 代码&#xff1a; 功能区&#xff1a; #include <stdio.h>#include <stdlib.h>#include "./d2191.h"SeqList* create_seqList(){SeqList* list (SeqList*)malloc(sizeof(SeqList));if(NULL list){return NULL;}list->p…
阅读更多...
Linux系列讲解 —— 【Vim编辑器】在Ubuntu18.04中安装新版Vim

Linux系列讲解 —— 【Vim编辑器】在Ubuntu18.04中安装新版Vim

平时用的电脑系统是Ubuntu18.04&#xff0c;使用apt安装VIM的默认版本是8.0。如果想要安装新版的Vim编辑器&#xff0c;只能下载Vim源码后进行编译安装。 目录 1. 下载Vim源码2. 编译3. 安装4. 遇到的问题4.1 打开vim后&#xff0c;文本开头有乱码现象。4.2 在Vim编辑器中&…
阅读更多...
百面嵌入式专栏（经验篇）如何在面试中介绍自己的项目经验

百面嵌入式专栏（经验篇）如何在面试中介绍自己的项目经验

文章目录 1. 在面试前准备项目描述，别害怕，因为面试官什么都不知道2. 准备项目的各种细节，一旦被问倒了，就说明你没做过3.不露痕迹地说出面试官爱听的话4.一定要主动，面试官没有义务挖掘你的亮点5.一旦有低级错误，可能会直接出局6.引导篇：准备些加分点，在介绍时有意提到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023