JavaWeb - JavaScript 细解

最新推荐文章于 2022-09-09 18:38:41 发布

§九千七§

最新推荐文章于 2022-09-09 18:38:41 发布

阅读量444

点赞数

分类专栏： JavaWeb 文章标签： javascript js

本文链接：https://blog.csdn.net/chuli0327/article/details/109330430

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript 细解

一 . 概述介绍

HTML：就是用来写网页

CSS ：就是用来美化网页

JavaScript 是WEB上强大的脚本语言

脚本语言：无法独立执行，必须嵌入到其他语言中，结合使用，直接被浏览器解析执行

Java 编程语言：独立写程序，独立运行编译 - 执行

作用：控制页面特效显示

JS对HTML元素进行动态控制

JS可以对表单进行校验

JS可以控制CSS样式

二 . JavaScript 基本信息

1.语言特征及编程注意事项：

特征：JavaScript无需编译，直接被浏览器解析并执行

JavaScript无法单独运行，必须嵌入到HTML代码中运行

JavaScript 的执行过程由上到下依次执行

注意： JavaScript 没有访问系统文件权限(安全)

由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程

JavaScript 和 Java 没有任何直接联系

2.JavaScript组成

ECMScript （核心） - - - 规定了JS的语法和基本对象

DOM - - - 文档对象模型：处理网页内容的方法和接口

BOM - - - 浏览器对象模型：与浏览器交互方法和接口

3.JavaScript 引入方式

内部脚本：在当前页面内部写script标签，script内部即可书写JavaScript代码

格式 <script type="text/javascript"> JavaScript 的代码 </script>

注： script 标签理论上可以书写在HTML文件的任意位置

外部引入：在HTML文档中，通过<script src = "">标签引入.js文件

格式： <script type = "text/javascript" src = "javascript 文件路径"></script>

4.标签规范化

开发规范规定，script标签的放置位置为： Body 结束标签前

优点：保证HTML展示内容优先加载，最后加载脚本，增强用户体验性

三 . 语法及规则

1.基本数据类型：类似于Java中的基本数据类型 - - 五大数据类型

String ：字符串类型 , “ ” 和 ’ ‘ 都表示字符串，JavaScript 中没有单个字符串

Boolean ：布尔类型固定值为 true 和 false

number ：数字类型，任意数字

null ：空，一个占位字符

undefined ：未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值

注：因为 undefined 是从null 中派生出来的，所以 undefined == null

JavaScript 区别于java是弱类型语言，变量的使用不要严格遵循规范，所以一个变量声明好之后是可以赋予任意类型的值

2.引用数据类型：引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象

var str = new String();

var str = new String; JS 独有的方式

3.变量：标示内存中的一块空间，用于存储数据，且数据是可变的

变量的声明： var 变量名； // 变量赋予默认值，默认值为undefined

变量的声明和赋值： var 变量名 = 值； //变量赋予对应的值

命名规范：必须以字母或者下划线开头，中间可以是数字，字符或下划线

变量名不能包含空格等符号

不能使用JavaScript关键字作为变量名： eg ： function

JavaScript严格区分大小写

4.运算符： JavaScript 运算符与 Java运算符基本一致

比较运算符
== 逻辑等，仅仅对比值
=== 全等对比值并且对比类型如果值和类型都相同，则为true ；值和类型有一个不同，则为false

逻辑运算符
JavaScript 逻辑运算符没有&， | 等单独

5.注释

单行注释 //
多行注释： / * * /

6.正则对象

RegExp对象的创建方式：
var reg = new RegExp（表达式）；开发中基本不用
var reg = / ^ 表达式$/
直接量中存在边界，即^代表开始， $代表结束

test 方法：
正则对象 .test (string); 用来校验字符串是否匹配正则，全部字符匹配返回true ; 有字符不匹配返回false
普通方式：除非全部字符不符合正则，返回false 只要有一个字符符合正则就返回true

注意事项：
/^ 表达式 $ / 只要有无法成立正则的字符存在，即为false 全部符合为true 适用于表单校验
/表达式/ 只要有成立正则的字符存在，即为true 全部不符合为false 适用于字符串查找，替换

四 . JS数组对象

1 . JS数组的特性： JS数组可以看做Java中的ArrayList 集合

数组中的每一个成员没有类型限制，及可以存放任意类型
数组的长度可以自动修改

2 . 四种创建方式

1. var arr = [ 1, 2, 3 ];
2. var arr = new Array(); 数组默认长度为0
3. var arr = new Array (4);
数组长度是4，相当于开辟了长度为4空间，每个元素都是undefined ，仅在显示数组时进行处理，undefined 为了方便显示变成了空字符串形式，其本质还是undefined
4. var arr = new Array(1, 2); 数组元素是1，2

3 . JS数组的常用属性/方法

length : 设置或返回数组中元素的数目
join() : 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，不计入数组长度
pop() : 删除并返回数组的最后一个元素
push() ：向数组的末尾位置添加一个或更多元素，并返回新的长度

reverse() ：颠倒数组中元素的顺序，物理反转

五 . 函数

1 . 全局函数

执行： eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
作用：增强程序的扩展性
注意：只能传递基本数据类型的字符串，而不能传入字符串对象

   编码和解码
URL 编码作用：保证数据传递的完整性中文及特殊符号 - > %16进制
encodeURI() 把字符串编码为URI
   decodeURI() 解码某个编码的URI
URI 和 URL
URI 是统一资源标识符标识资源详细名称
   URI 标识资源的详细名称包含资源名
URL 是统一资源定位器定位资源的网络位置
URL 定位资源的网络位置包含 http://
资源：可以通过浏览器访问的信息统称为资源 (图片，文本， HTML ， CSS等等)

字符串转数字
parseInt() 解析一个字符串并返回一个整数
parseInt(string) String 按照字面值转换为整数类型，小数点后面部分不关注
parseFloat() 解析一个字符串并返回一个浮点数
parseFloat(string ); string 按照字面值转换为小数类型
如果字符串的某个字符从字面上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。eg ： 11.5a55 -> 11.5

2 . 自定义函数/自定义方法

简述及作用
如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中
作用：增强代码的复用性
函数格式： function 方法名(参数列表){ 函数体}
JavaScript 函数定义必须用小写的function
JavaScript函数无需定义返回值类型，直接再function后面书写方法名
参数的定义无需使用var 关键字，否则报错
JavaScript 函数体中，return可以不写，也可以return 具体值，或者仅仅写return；
注意事项
JavaScript 函数调用执行完毕一定有返回值，值及类型根据return 决定，如果未return具体值，返回值为undefined
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义
因为 JavaScript 不存在函数重载，所有JavaScript 仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用
如果形参为赋值，就使用默认值undefined

3 . 自定义对象

function 构造函数
JavaScript 中的引用数据类型都是对象，而对象在JavaScript 中可以用函数来表示
无形参格式： function 对象名 () { 函数体 }
为属性赋值： 1，构造参数赋值； 2. 创建对象后，调用属性进行赋值
属性定义方式 : 1.this 关键字，在对象声明定义阶段，定义一个属性； 2. 创建对象后，使用对象，属性方式，动态定义属性
   带参数格式： function 对象名(参数列表){ 函数体 }
   eg ： function Persion (a,b){ alert( a + " -- - "+ b);} var p = new Persion(1,2);
应用场景：适用于对象构建及代码复用
  对象直接量
开发中可以用一种简单的方式直接创建自定义大JavaScript 对象，这种方式称为“对象直接量”
格式： var 对象名 = { 属性名1：“ 属性值 ”，属性名2 ：“属性值2”， ...... };
   注：该方式直接创建出实例对象，无需构建函数，无需new 创建实例对象，直接使用即可
应用场景：适用于快速创建实例对象及数据封装