前端开发_JavaScript基础

JavaScript介绍

JS是一种运行在客户端（浏览器）的编程语言，实现人机交互效果

作用：

  • 网页特效 (监听用户的一些行为让网页作出对应的反馈)

  • 表单验证 (针对表单数据的合法性进行判断)

  • 数据交互 (获取后台的数据, 渲染到前端)

  • 服务端编程 (node.js)

组成：

  • ECMAScript：规定了js基础语法核心知识。
  • Web APIs：
    • DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
    • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站

JavaScript书写位置

  1. 内部JavaScript

    直接写在html文件里，用script标签包住

    script标签写在上面，即html文件底部

    将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

  2. 外部JavaScript

    代码写在以.js结尾的文件里，通过script标签，引入到html页面中

    示例：<script src="my.js"></script>

    script标签中间无需写代码，否则会被忽略

    外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读

  3. 内联JavaScript

    代码写在标签内部（后面vue框架会用这种模式）

    示例：<button onclick="alert('test')">点我</button>

JS基本语法

注释

  1. 单行注释
    • //
    • 快捷键：ctrl+/
  2. 块注释
    • /* */
    • 快捷键：shift+alt+A

运算符

赋值运算符

=：将等号右边的值赋予给左边, 要求左边必须是一个容器

其他赋值运算符：+=、-=、*=、/=、%=

一元运算符

++和–，即自增和自减

前置自增：先自加再使用

后置自增：先使用再自加

比较运算符

> ： 左边是否大于右边

<： 左边是否小于右边

>=： 左边是否大于或等于右边

<=： 左边是否小于或等于右边

==： 左右两边值是否相等

===： 左右两边是否类型和值都相等

!==： 左右两边是否不全等

比较结果为boolean类型，即只会得到 true 或 false

对比：

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等，强烈推荐使用 ===

字符串比较，是比较的字符对应的ASCII码

NaN不等于任何值，包括它本身

不同类型之间比较会发生隐式转换

逻辑运算符

逻辑与：&&

逻辑或：||

逻辑非：!

运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

结束符

使用英文分号;代表语句结束

实际开发中可写可不写

语句

表达式和语句

表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。

因为表达式可被求值，所以它可以写在赋值语句的右侧

语句是一段可以执行的代码

语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。

分支语句

  1. if语句

    if(条件){满足条件要执行的代码
}

  2. 双分支if

    if(条件){满足条件要执行的代码
}else{不满足条件执行的代码
}

  3. 多分支if

    if(条件1){代码1
}else if(条件2){代码2
}
...
else{代码n
}

  4. 三元运算符

    条件?满足条件执行的代码:不满足条件执行的代码

  5. switch语句

    switch(数据){case 值1:代码1breakcase 值2:代码2breakdefault:代码nbreak
}

循环语句

  1. while循环

    while(循环条件){要重复执行的代码（即循环体）
}

  2. for循环

    for(变量起始值;终止条件;变量变化量){循环体
}

继续循环使用continue

跳出循环使用break

输入输出

输出语法

  1. body内输出

    document.write('要输出的内容')

    作用：向body内输出内容

    如果输出的内容写的是标签，也会被解析成网页元素

  2. 警告框输出

    alert('要输出的内容')

    作用：页面弹出警告对话框

  3. 控制台输出

    conosole.log('控制台打印')

    作用：控制台输出语法，程序员调试使用

输入语法

prompt('请输入：')

作用：显示一个对话框，对话框中包含含一条文字信息，用来提示用户输入文字

在这里插入图片描述

代码执行顺序：按HTML文档流顺序执行JavaScript代码

但是，alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

在计算机科学中，字面量（literal）是在计算机中描述 事/物

包括数字字面量、字符串字面量、数组字面量、对象字面量 等等

变量

变量是计算机存储数据的“容器”

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

变量的使用

声明变量

语法：let+变量名

let 不允许多次声明一个变量

声明多个变量：

多个变量中间用逗号隔开let 变量1 = 值1, 变量2 = 值2

变量赋值

语法：变量名 = 数值

也可以声明时直接赋值

let 变量名 = 赋值

更新变量

再次进行变量赋值即可

变量命名规则与规范

规则：

  • 不能用关键字

    • 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

  • 只能用下划线、字母、数字、$组成，且数字不能开头

  • 字母严格区分大小写，如 Age 和 age 是不同的变量

规范：

  • 起名要有意义

  • 遵守小驼峰命名法

    • 第一个单词首字母小写，后面每个单词首字母大写。例：userName

数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

  • **元素：**数组中保存的每个数据都叫数组元素

  • **下标：**数组中数据的编号

  • **长度：**数组中数据的个数，通过数组的length属性获得

数组声明

语法：let 数组名 = [数据1,数据2,……,数据n]

  • 数组是按顺序保存，所以每个数据都有自己的编号

  • 计算机中的编号从0开始

  • 在数组中，数据的编号也叫索引或下标

  • 数组可以存储任意类型的数据

数组使用

语法：数组名[下标]（下标从0开始）

操作数组

  1. 新增

    数组名.push(元素1,...,元素n)将一个或多个元素添加到数组末尾，并返回数组的新长度

    数组名.unshift(元素1,...,元素n)将一个或多个元素添加到数组的开头，并返回数组的新长度

  2. 删除

    数组名.pop()从数组中删除最后一个元素，并返回该元素的值

    数组名.shift()从数组中删除第一个元素并返回该元素的值

    数组名.splice(start，deleteCount)从起始位置删除几个元素（deleteCount可选）

常量

使用 const 声明的变量称为“常量”。

当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let

常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

基本数据类型

number 数字型

JavaScript 中的正数、负数、小数等 统一称为 数字类型。

数学运算符也叫算术运算符，主要包括加+、减-、乘*、除/、取余%（求模）

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

string 字符串型

通过单引号（ ‘’） 、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

必要时可以使用转义符 \，输出单引号或双引号 \'或\"

+运算符 可以实现字符串的拼接。

数字相加，字符相连

模板字符串

拼接字符串和变量

语法：

  • `` (反引号)

  • 在英文输入模式下按键盘的tab键上方那个键

  • 内容拼接变量时，用 ${ } 包住变量

  • 示例：

  • document.write(`我的名字是${name}，今年${age}岁`)

boolean 布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）

undefined 未定义型

未定义是比较特殊的类型，只有一个值 undefined。

只声明变量，不赋值的情况下，变量的默认值为 undefined，

null 空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

  • undefined 表示没有赋值
  • null 表示赋值了，但是内容为空

引用类型

object 对象

检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

  • 作为运算符： typeof 变量名 （常用的写法）
  • 函数形式： typeof(变量名）

类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚

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

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则：

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

显示转换

转换为数字型

  • Number(数据)

    • 转成数字类型
    • 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
    • NaN也是number类型的数据，代表非数字

  • parseInt(数据)

    • 只保留整数

  • parseFloat(数据)

    • 可以保留小数

转换为字符型:

  • String(数据)
  • 变量.toString(进制)

函数

function，是被设计为执行特定任务的代码块

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

函数使用

函数声明

function 函数名(参数列表) {函数体
}

参数列表可以省略

示例：

function f1(){document.write('hello')
}function f2(num1,num2){document.write(num1+num2)
}

函数命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

函数调用

函数名(传递的参数列表)

如果某个参数没有给对应形传实参，默认是undefined

函数返回值

当函数需要返回数据出去时，用return关键字

区别于java的是，java需要声明返回类型，这里直接返回就可以了

示例：

function getSum(x,y){return x+y
}

没有return的函数默认返回undefined

匿名函数

没有名字的函数, 无法直接使用。

  1. 函数表达式

    将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

    语法：

    lef fn = function(){函数体
}

    调用：

    fn()

  2. 立即执行函数

    避免全局变量时间的污染

    // 方式1
(function(){函数体})();// 方式2
(function(){函数体}());

    多个立即执行函数要用 ; 隔开，要不然会报错

对象

JavaScript里的一种数据类型

对象组成

对象由属性和方法组成

let 对象名 = {属性名: 属性值,方法名: 函数
}

对象使用

对象声明

let 对象名 = {}//示例
let 对象名 = new Object()//示例
let person = {}

对象属性调用

//语法：对象名.属性名//示例
let person = {uname: '老师',age: 18,gender: '女'
}console.log(person.name)

如果对象属性为多次属性或 - 等属性，点操作就不能使用了

需要换用以下方式：

//示例：
let person = {'user-name': '老师',age: 18,gender: '女'
}console.log(person['user-name'])

对象属性修改

语法：对象名.属性名 = 新值

对象新增属性

语法：对象名.新属性 = 新值

示例：

let person = {uname: '老师',age: 18,gender: '女'
}person.address = '成都'

对象删除属性

语法：delete 对象名.属性

对象方法

方法的声明和正常函数声明相同

let 对象名 = {方法名: function() {...}
}

方法调用和属性调用类似：对象名.方法名()

遍历对象

使用 for in 语法进行遍历

//示例
let person = {uname: '老师',age: 18,gender: '女'
}for (let i in person){console.log(i)	//打印属性名console.log(person[i])	//打印属性值
}

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math

Math对象是JavaScript提供的一个“数学”对象

Math对象包含的方法有：

  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • max：找最大数
  • min：找最小数
  • pow：幂运算
  • abs：绝对值

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

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

相关文章

CSS-6

CSS-6

响应式网页 如何实现响应式网页&#xff1f; 解决方案&#xff1a;方法1. 通过媒体查询的方法media (条件) {html {background-color: green;}}方法2. 使用 Bootstrap 框架方法一 基本使用 <style>/* 屏幕宽度小于等于768&#xff0c;网页背景色是粉色 --- 小于等于 &…
阅读更多...
优化模型：matlab二次规划

优化模型：matlab二次规划

1.二次规划 1.1 二次规划的定义 若某非线性规划的目标函数为自变量 x x x的二次函数&#xff0c;且约束条件全是线性的&#xff0c;则称这种规划模型为二次规划。 1.2 二次规划的数学模型 min ⁡ 1 2 x T H x f T x \min \frac{1}{2}\boldsymbol{x}^{\boldsymbol{T}}\bolds…
阅读更多...
mysql: 2006, ‘MySQL server has gone away‘

mysql: 2006, ‘MySQL server has gone away‘

一、错误问题 这个问题是在迁移数据库、备份还原或数据导入时报错&#xff1a;2006, ‘MySQL server has gone away‘ 二、出现原因 sql操作的时间过长&#xff0c;或者是传送的数据太大(例如使用insert ... values的语句过长&#xff0c; 这种情况可以通过修改max_allowed_pac…
阅读更多...
html2canvas+jsPDF导出超长网页的PDF

html2canvas+jsPDF导出超长网页的PDF

项目需求:有一个网页大概60000px的高度,现在需要导出为PDF index.vue <template><div class"ctn"><div class"pdf-ctn"><div class"pdf-panel" ><div class"pdf-inside-panel" id"myList">&…
阅读更多...
部署上传漏洞的靶场环境upload-labs

部署上传漏洞的靶场环境upload-labs

1、工具介绍 upload-labs是一个使用php语言编写的&#xff0c;专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关&#xff0c;每一关都包含着不同上传方式。 upload-labs靶场开源地址&#xff1a;&#xff1a;https://…
阅读更多...
CMake入门教程【基础篇】打印(message)

CMake入门教程【基础篇】打印(message)

文章目录 1. 基本用法示例 2. 打印变量的值示例 3. 打印列表的值示例 4. 打印生成器表达式的值示例 5.总结 #mermaid-svg-pXC2tr41PvHonKJa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pXC2tr41PvHonKJa .error-…
阅读更多...
页面间动画之放大缩小视图

页面间动画之放大缩小视图

目录 1、Exchange类型的共享元素转场 2、Static类型的共享元素转场 3、场景示例 在不同页面间&#xff0c;有使用相同的元素&#xff08;例如同一幅图&#xff09;的场景&#xff0c;可以使用共享元素转场动画衔接。为了突出不同页面间相同元素的关联性&#xff0c;可为它们…
阅读更多...
C语言——操作符

C语言——操作符

一、算数操作符 1、(加操作符) 用于将两个数相加&#xff0c;例&#xff1a;3 3结果为6 2、-(减操作符) 用于将两个数相减&#xff0c;例&#xff1a;3 - 3结果为0 3、*(乘操作符) 用于将两个数相乘&#xff0c;例&#xff1a;3 * 3结果为9 4、/(除操作符) 用于将两个…
阅读更多...
Cesium在2d模式下Billboard位置显示不正确的解决方法

Cesium在2d模式下Billboard位置显示不正确的解决方法

Billboard在Cesium 3d模式下位置显示正确&#xff0c;但在2d模式下位置显示不正确&#xff0c;刷新不及时。 解决办法&#xff1a; 不要设置height和heightReferencen&#xff0c;因为2d模式没有高程。
阅读更多...
计算机毕业设计 SpringBoot的乡村养老服务管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 SpringBoot的乡村养老服务管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…
阅读更多...
南昌找工作用什么APP或者招聘网站

南昌找工作用什么APP或者招聘网站

南昌找工作用吉鹿力招聘网 通过吉鹿力招聘网&#xff0c;可以随时查看最新职位&#xff0c;跟踪简历投递动态&#xff0c;与正在进行招聘的CEO、部门负责人、HR在线沟通&#xff0c;查看其他候选人面试该职位后对面试官、公司环境的面试评价等&#xff0c;为求职者提供参考。 …
阅读更多...
【PostgreSQL】约束-检查约束

【PostgreSQL】约束-检查约束

【PostgreSQL】约束链接 检查 唯一 主键 外键 排他 检查约束 在计算机科学和软件工程中&#xff0c;约束检查是指在程序运行时对变量或数据进行检查&#xff0c;确保其满足一定的规则或条件。这些规则或条件可以是预定义的&#xff0c;也可以是通过编程语言的约束机制定义的…
阅读更多...
HCIA-Datacom题库（自己整理）——ACL多选

HCIA-Datacom题库（自己整理）——ACL多选

1.基于ACL规则,ACL可以划分为以下哪些类? 基本ACL 二层ACL 用户ACL 高级ACL 2.ACL分类有哪些? 基本ACL 高级ACL 二层ACL 用户自定义ACL 3.路由器A的G0/0/1接口配置信息如图,下列说法正确的有? 本接口不会转发收到的FTP报文 本接口可以和其它路由器建立OSPF的邻居…
阅读更多...
MyBatis之关联查询

MyBatis之关联查询

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 MyBatis之关联查询 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、一对一关联查询二…
阅读更多...
javafx

javafx

JavaFX JavaFX简介 JavaFX是一个用于创建富客户端应用程序的图形用户界面&#xff08;GUI&#xff09;框架。它是Java平台的一部分&#xff0c;从Java 8开始成为Java的标准库。 JavaFX提供了丰富的图形和多媒体功能&#xff0c;使开发人员能够创建具有吸引力和交互性的应用程…
阅读更多...
simulink代码生成（九）—— 串口显示数据（纸飞机联合调试）

simulink代码生成（九）—— 串口显示数据（纸飞机联合调试）

纸飞机里面的协议是固定的&#xff0c;必须按照协议配置&#xff1b; &#xff08;1&#xff09;使用EasyHEX协议&#xff0c;测试int16数据类型 测试串口发出的数据是否符合&#xff1f; 串口接收数据为&#xff1a; 打开纸飞机绘图侧&#xff1a; &#xff08;1&#xff09…
阅读更多...
机器学习（三） -- 特征工程（2）

机器学习（三） -- 特征工程（2）

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 未完待续…… 目录 系列文章目录 前言 三、特征…
阅读更多...
精准掌控 Git 忽略规则：定制化 .gitignore 指南

精准掌控 Git 忽略规则：定制化 .gitignore 指南

&#x1f9d9;‍♂️ 诸位好&#xff0c;吾乃诸葛妙计&#xff0c;编程界之翘楚&#xff0c;代码之大师。算法如流水&#xff0c;逻辑如棋局。 &#x1f4dc; 吾之笔记&#xff0c;内含诸般技术之秘诀。吾欲以此笔记&#xff0c;传授编程之道&#xff0c;助汝解技术难题。 &…
阅读更多...
前端中级算法题

前端中级算法题

前端中级算法题 反转字符串 编写一个函数&#xff0c;接受一个字符串作为输入&#xff0c;并返回反转后的字符串。 示例&#xff1a; function reverseString(str) {return str.split().reverse().join(); }reverseString(hello); // 输出: olleh 找出数组中的最大值 编写一个函…
阅读更多...
统信UOS操作系统上扩容数据盘

统信UOS操作系统上扩容数据盘

原文链接&#xff1a;统信UOS操作系统上扩容数据盘 hello&#xff0c;大家好啊&#xff01;今天我要给大家介绍的是在统信UOS操作系统上扩容数据盘的方法。在使用UOS的过程中&#xff0c;随着数据的不断增加&#xff0c;原有磁盘空间可能会变得不足&#xff0c;这时候就需要对数…
阅读更多...
最新文章

Copyright @ 2022~2023