JavaScript (应用)

文章目录

JavaScript (应用)

JavaScript简述

是什么?

是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

做什么?

网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)

有什么?

ECMAScript:
规定了j5基础语法核心知识。比如:变量、分支语句、循环语句、对象等等
Web APIs:
DOM操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

书写位置:

  1. 内部JavaScript

直接写在html文件里,用script标签包住
规范:script标签写在</body>上面

注意:

我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效。
因此,将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

  1. 外部JavaScript

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

注意:

1.script标签中间无需写代码,否则会被忽略!
2.外部JavaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML也会更加易读,因此这是个好的习惯。

  1. 内联JavaScript

代码写在标签内部

注意:此处作为了解即可,但是后面vue框架会用这种模式

注释

  1. 单行注释

符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl+/

  1. 块注释
    2符号:/* */
    作用:在/* 和*/之间的所有内容都会被忽略
    快捷键:shift+alt+A

输入与输出

输出

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

向body内输出内容
如果输出的内容写的是标签,也会被解析成网页元素
alert('要输出的内容');
页面弹出警告对话框
console.log('控制台打印');
控制台输出语法,程序员调试使用

输入

prompt('请输入您的姓名:');
显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字

变量

声明
要想使用变量,首先需要创建变量(专业说法:声明变量)
语法:
let 变量名

赋值

例:age=18

数组

声明语法
let数组名=[数据1,数据2,.·,数据n]

let names=['小明','小刚','小红','小丽','小米']
数组是按顺序保存,所以每个数据都有自己的编号

计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推

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

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

数组中数据的个数,通过数组的length属性获得

操作

查询

数组[下标]

添加
arr.push(元素1,元素2,···,元素n)
arr.unshift(元素1,元素2,···,元素n)

数组.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

赋值

数组[下标]=赋值

删除
arr.pop()
arr.shift()
arr.splice(操作的下标,删除的个数)

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

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

arr.splice(start,deleteCount)

start起始位置:指定修改的开始位置(从0计数)
deleteCount:表示要移除的数组元素的个数(可选的。如果省略则默认从指定的起始位置删除
到最后)

数据类型

基本数据类型

number 数字型

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

string 字符串型

通过单引号(“)、双引号(”)或反引号(`)包裹的数据都叫字符串,单引号和双引号没

有本质上的区别,推荐使用单引号。

单引号/双引号可以互相嵌套,但是不以自已嵌套自己

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

字符串拼接用" + "

模板字符串

符号 ``

例:

document.write(`大家好,我叫${
     name},今年${
     age}`)
boolean 布尔型

它有两个固定的值true和false,表示肯定的数据用true(真),表示否定的数据用false(假)。

undefined 未定义型

未定义是比较特殊的类型,只有一个值undefined.
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined。

null 空类型

null表示值为空

null和undefined☒别:
1.undefined表示没有赋值
2.ul表示赋值了,但是内容为空

官方解释:把null作为尚未创建的对象
大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null

引用数据类型

object 对象
function 函数
array 数组

数据类型检测

  1. 控制台输出语句

可以看出数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色

  1. typeof 关键字来检测

例:

console.log(typeof age)

数据转换

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

隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+号两边只要有一个是字符串,都会把另外一个转成字符串
除了+以外的算术运算符比如·*/等都会把数据转成数字类型

注意:

+号作为正号解析可以转换成Number

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6BOwOCZ-1675233216376)(C:\Users\时间机器\AppData\Roaming\Typora\typora-user-images\image-20230102134240980.png)]

显式转换

转换为数字型

Number(数据)

  • 转成数字类型

  • 如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字

  • NaN也是number类型的数据,代表非数字

parselnt(数据)
只保留整数
parseFloat(数据)
可以保留小数

转换为字符型:
String(数据)
变量.toString(进制)

运算符

算术运算符

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。
+:求和
-:求差
*:求积
/:求商
%:取模(取余数)开发中经常作为某个数字是否被整除

优先级

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用)可以提升优先级
总结:先乘除后加减,有括号先算括号里面的

赋值运算符

赋值运算符:对变量进行赋值的运算符
已经学过的赋值运算符:=将等号右边的值赋予给左边。要求左边必须是一个容器
其他赋值运算符:
*=
%=

一元运算符

自增:
符号:++
作用:让变量的值+1
自减:
符号:-
作用:让变量的值-1

注意前后自增的差别

比较运算符

>左边是否大于右边

<左边是否小于右边

>=左边是香大于或等于右边

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

==左右两边是否相等

===左右两边是否类型和值都相等
!==左右两边是否不全等
比较结果为boolean类型,即只会得到true或false

注意

  • 字符串比较,是比较的字符对应的ASCI码
    • 从左往右依次比较
    • 如果第一位一样再比较第二位,以此类推
  • NaN不等于任何值,包括它本身
  • 尽量不要比较小数,因为小数有精度问题
  • 不同类型之间比较会发生隐式转换
    • 最终把数据隐式转换转成number类型再比较
    • 所以开发中,如果进行准确的比较我们更喜欢==或者!=

=====怎么区别?
=是赋值
==是判断只要求值相等,不要求数据类型一样即可返回true
===是全等要求值和数据类型都一样返回的才是true
开发中,请使用===

逻辑运算符

符号 名称 日常读法 特点 口决
&& 逻辑与 并且 符号两边都为true
结果才为true
一假则假
|| 逻辑或 或者 符号两边有一个
true就为true
一真则真
! 逻辑非 取反 true变false
false变true
真变假,假变真

短路:只存在于&&和‖中,当满足一定条件会让右边代码不执行

符号 短路条件
&& 左边为false就短路
|| 左边为true就短路

原因:通过左边能得到整个式子的结果,因此没必要再判断右边
运算结果:无论&&还是||,运算结果都是最后被执行的表达式值,一般用在变量赋值

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++,–,!
3 算数运算符 先*/%后±
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ,

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

语句

if

语句有三种使用:单分支、双分支、多分支

if的用法同C语言

三元运算符

  • 其实是比if分支更简单的写法,有时候也叫做三元表达式
  • 符号:?与:配合使用
  • 语法:
    条件?满足条件执行的代码:不满足条件执行的代码
  • 一般用来取值

switch语句

语法

switch(数据){
   
	case1:
		代码1
		break
	case2:
		代码2
		break
	default:
		代码n
		break
}
  1. switch case语句一股用于等值判断,不适合于区间判断
  2. switch case一般需要配合break关键字使用没有break会造成case穿透

循环

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

continue:结束本次循环,继续下次循环
break:跳出所在的循环

for循环
for(声明记录循环次数的变量;循环条件;变化值){
   
	循环体
}

函数

函数:

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

说明:

函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包

裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。

声明

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

函数名命名规范

  • 和变量命名基本一致
  • 尽量小驼峰式命名法
  • 前缀应该为动词
  • 命名建议:常用动词约定
动词 含义
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些放据

return返回数据

  • 在函数体中使用return关键字能将内部的执行结果交给函数外部使用
  • 函数内部只能出现1次return,并且return后面代码不会再被执行,所以return后面的数据不要换行写
  • return会立即结束当前函数
  • 函数可以没有return,这种情况函数默认返回值为undefined

变量的作用域

全局变量

函数外部let的变量,全局变量在任何区域都可以访问和修改

局部变量

函数内部let的变量,局部变量只能在当前函数内部访问和修改

块级变量

{}内部的let变量,let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

注意

如果函数内部或者块级作用域内部,变量设有声明,直接赋值,也当全局变看,但是强烈不推荐
但是有一种情况,函数内部的形参可以看做是局部变量,

变量访问原则——作用域链

  • 只要是代码,就至少有一个作用域
  • 写在函数内的局部作用域
  • 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用减
  • 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

匿名函数

function() {
   }

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

语法

let fn=function(){
   
	//函数体
}

调用

fn()

目前没有使用场景,后期Web API会使用。

立即执行函数

场景介绍:避免全局变量之间的污染
语法:

//方式1
(function(){
   console.log(11
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例代码: 第1章(\cha01) 1.1.htm 自动类型转换 1.2.htm 显式类型转换 1.3.htm 提升基本类型为对象 第2章(\cha02) 2.1.htm if语句 2.2.htm switch语句 2.3.htm while循环 2.4.htm do-while循环 2.5.htm for循环 第3章(\cha03) 3.1.htm 遍历数组元素 3.2.htm 改变数组元素 3.3.htm 用对象的方式实现数组 3.4.htm 将数组转换为字符串 3.5.htm 操作数组元素 3.6.htm 实现多维数组 第4章(\cha04) 4.1.htm 求平方根 4.2.htm 求质数 4.3.htm 简单数制转换 4.4.htm 数制转换函数 4.5.htm 实现计算器 第5章(\cha05) 5.1.htm 带开关的时钟 5.2.htm 不同风格的时间显示 5.3.htm 倒计时效果 5.4.htm 模拟时钟 5.5.htm 显示农历日期 5.6.htm 温度计样式时钟 5.7.htm 位置固定的时钟 第6章(\cha06) 6.1.htm HTML事件绑定 6.2.htm 非标准事件绑定 6.3.htm 事件处理器绑定 6.4.htm 使用函数 6.5.htm 直接在表单上调用事件 第7章(\cha07) 代码说明:本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章(\cha08) 8.1.htm 页面预览 8.2.htm 图像切换 8.3.htm 点亮文本 8.4.htm 鼠标跟随 8.5.htm 鼠标感应 8.6.htm 禁用鼠标按键 第9章(\cha09) 9.1.htm 文字的垂直滚动 9.2.htm 文字的渐隐渐显 9.3.htm 文字的闪烁显示 9.4.htm 文字的随意拖动 9.5.htm 文字的坠落显示 9.6.htm 页面内飘动的文字 9.7.htm 漫天飞舞的文字 9.8.htm 文字下落效果 第10章(\cha10) 10.1.htm 霓虹灯文字 10.2.htm 色彩渐变 10.3.htm 文字的渐大渐小 10.4.htm 文字大小动态变化 10.5.htm 文字变色显示 10.6.htm 打字效果显示 第11章(\cha11) 代码说明:代码11.6.htm需要IE5.5或以上版本支持 11.1.htm 随机显示 11.2.htm 打字效果 11.3.htm UBB代码实例 11.4.htm 从右至左排列的文字 11.5.htm 古汉语文字排版 11.6.htm 蒙古族文字排版 第12章(\cha12) 12.1.htm 文档颜色设置 12.2.htm 上次修改时间 12.3.htm DOM 1中的文档属性与聚集 12.4.htm 访问HTML元素属性 第13章(\cha13) 13.1.htm 按位置访问元素 13.2.htm 按名称访问元素 13.3.htm 动态修改元素内容 13.4.htm 改变的内容 13.5.htm 改变页面样式 第14章(\cha14) 14.1.htm 节点插入与追加 14.2.htm 节点复制 14.3.htm 节点删除与替换 14.4.htm 修改节点内容 第15章(\cha15) 15.1.htm HTML中的表格 15.2.htm 设置表格属性 15.3.htm 操作表格元素 15.4.htm 操作表元 第16章(\cha16) 16.1.htm 验证输入内容是否为空 16.2.htm 验证E-mail地址 16.3.htm 电话号码检测 第17章(\cha17) 17.1.htm 混合表单验证 17.2.htm onchange事件 17.3.htm 按键屏蔽 第18章(\cha18) 18.1.htm 打开窗口 18.2.htm 关闭窗口 18.3.htm 窗口写入 18.4.htm 窗口交互 18.5.htm 提示与警告对话框 第19章(\cha19) 19.1.htm 窗口移动 19.2.htm 改变大小 19.3.htm 窗口滚动 19.4.htm 设置超时 19.5.htm 窗口事件 19.6.htm IE窗口扩展 第20章(\cha20) 20.1.htm 访问框架 20.2.htm 内联框架 20.3.htm 框架间的交叉通信 20.4.htm 嵌套框架交叉通信 第21章(\cha21) 21.1.htm 图片的随机显示 21.2.htm 图像显隐 21.3.htm 图像滚动显示 21.4.htm 探照灯扫描 21.5.htm 多幅图像翻页显示 21.6.htm 水纹效果显示 21.7.htm 全景图效果 21.8.htm 手电效果 21.9.htm 雷达显示效果 第22章(\cha22) 22.1.htm 图像拖动 22.2.htm 按钮控制 22.3.htm 感应鼠标 22.4.htm 花环效果 22.5.htm 流星效果 22.6.htm 图像运动 22.7.htm 图像显示 22.8.htm 图像飞行一 22.9.htm 图像飞行二 第23章(\cha23) 23.1.htm 随机更换页面背景 23.2.htm 用户自选背景之一 23.3.htm 用户自选背景之二 23.4.htm 用户自选背景之三 23.5.htm 页面背景的闪电效果 第24章(\cha24) 24.1.htm 有图像的Media Player 24.2.htm 无图像的Media Player 24.3.htm 有图像的RealPlayer 24.4.htm 无图像的RealPlayer 24.5.htm 播放Flash文件 第25章(\cha25) 25.1.htm 位置固定的对联广告 25.2.htm 随页面滚动的对联广告 25.3.htm 全屏飘动的广告 25.4.htm 循环滚动的多幅广告 25.5.htm 漂浮3D广告 第26章(\cha26) 26.1.htm 基本的下拉菜单 26.2.htm 改进的下拉菜单 26.3.htm 渐显的下拉菜单 第27章(\cha27) 27.1.htm 折叠菜单 27.2.htm 远程菜单 27.3.htm 弹出菜单 第28章(\cha28) 28.1.htm 旋转导航菜单 28.2.htm 隐藏滑动菜单 28.3.htm 仿QQ菜单 28.4.htm 触发型导航菜单 28.5.htm 下拉列表菜单 28.6.htm 树型导航菜单 28.7.htm 变色标题菜单 第29章(\cha29) 29.1.htm 获取文本框中的内容 29.2.htm 显示和修改文字内容(DHTML) 29.3.htm 处理网页表格内容(DHTML) 29.4.htm 显示和修改网页内容(W3C) 29.5.htm 处理网页表格内容(W3C) 29.6.htm 综合应用 第30章(\cha30) 30.1.htm 显示浏览器名称与版本 30.2.htm JavaScript检测 30.3.htm 获取浏览器窗口大小 30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟浏览器菜单 第31章(\cha31) 31.1.htm 实现md5加密 31.2.htm 编制自己的加密算法 第32章(\cha32) 代码说明:本章代码都具有一定危害性,可按照页面提示进行操作。 32.1.htm 字符串翻倍 32.2.htm 函数循环交叉调用 32.3.htm 无限递归调用 32.4.htm 构造无限数组 32.5.htm 载入超大图像 32.6.htm 关不掉的对话框 32.7.htm 一直弹出新窗口 第33章(\cha33) 代码说明: 1.代码33.1.htm须使用IE浏览器打开 2.代码33.2.htm须使用Mozilla Firefox浏览器打开 33.1.htm 使用IE处理XML 33.2.htm 使用Mozilla处理XML 33.3.htm XML文件内容分页显示 第34章(\cha34) 34.1.htm 格式化输出 34.2.htm 动态增删记录 第35章(\cha35) 代码说明: 1.对于代码35.1.htm,使用Mozilla Firefox浏览器可直接运行,如果使用IE浏览器,需要在服务器端运行。 2.对于代码35.2.html,需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2.html 实现联动选择 35.3.htm 实现菜单特效 第36章(\cha36) 代码说明: 1.代码36.1.index.php需要IIS+PHP环境或Apache+PHP环境支持 2.代码Default.aspx需要IIS+ASP.net环境支持 \36.1\ 36.1.index.php 实现简单相册 \36.2\ Default.aspx 实现文本聊天室

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值