当前位置: 首页 > news >正文

Javaweb - 4.1 JavaScript

目录

1. 简介

起源

JS 组成部分

JS 的引入方式

内部脚本方式引入

外部脚本方式引入

2. JS 的数据类型和运算符

数据类型

算术符

3. JS 的流程控制和函数

if 结构

switch 结构

while 循环

for 循环

foreach 循环

JS 函数声明

完!


1. 简介

起源

JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务端语言遗留的速度问题。

比如说,当用户要进行一个注册页面,在没有 Javascript 的时候,用户在填写自己注册的用户名和密码时,是没有相对应的提示,只有当数据发送给服务器,服务端发现接收到的数据不符合要求,才会返回一个信息,告知客户端,大大影响了效率~

于是 Netscape 公司的浏览器 Navigator 加入了 Javascript,提供了数据验证的基本功能~

之后的其他公司,例如微软等,也都在自己公司中的浏览器加入了对应的脚本语言,但是不同公司的脚本语言,大大小小的都略有差异,底层实现浏览器的程序员苦不堪言~~

巨头公司也意识到了这个问题,这么好的技术,不应该因为商业而被搞乱套,于是向 ECMA 组织,提议出一个统一版本~~

ECMA-262 是正式的 Javascript 标准~ 这个标准由 ECMA 组织发展和维护。 JavaScript 的正式名称是“ECMAScript”。

总的来说:JS 是一种运行在浏览器端上的小脚本语句,可以实现网页如文本内容,数据动态变化和动画特效等等~

JS 有如下特点:

        脚本语言:JS 是一种解释型的脚本语言。不同于 C Java 等语言先编译后执行,JS 不会产生编译出来的字节码文件,而是在程序的运行过程中对源文件逐行进行解释。

        基于对象:JS 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是,面向对象的三大特性:封装,继承,多态中,JS 能够实现封装,模拟继承,不支持多态~

        弱类型:JS 中也有明确的数据类型,但是声明一个变量后,这个变量可以接收任何类型的数据,并且会在程序执行过程中,根据上下文自动转换类型。

        事件驱动:JS 是一种采用事件驱动的脚本语言,不需要经过 Web 服务器就可以对用户的输入做出相应。

        跨平台性:JS 脚本语言不依赖于操作系统,只需要浏览器的支持。因此一个 JS 脚本在编写后可以在任何机器上使用~ 只要当前机器上的浏览器是支持 JS 脚本语言的~

JS 组成部分

BOM 编程:

        BOM 是 Browser Object Model 的简写,即浏览器对象模型

        BOM 有一系列对象组成,是访问,控制,修改浏览器的属性和方法

        BOM 没有统一的标准(每种客户端都可以自定标准)

        BOM 编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的 API 操作组件行为的一种编程

DOM 编程:
        DOM 编程就是使用 document 对象的 API 来完成对网页 HTML 文档进行动态修改,以实现网页数据和样式动态变化效果的编程

        document 对象代表整个 html 文档,可用来访问页面中所有元素

        DOM 编程其实就是用 window 对象的 document 属性的相关 API 完成对页面元素的控制的编程

JS 的引入方式

首先要解决的是 JS 如何声明函数

在 Java 中,声明一个函数方法:public void surprise(){ }

在 JS 中,声明一个函数方法:function 函数名() { }

内部脚本方式引入

在页面中,通过一对 script 标签引入 JS 代码,script 代码放置的位置具有一定的随意性,但一般都放置在 head 标签中~

外部脚本方式引入

内部脚本仅仅只能在当前页面上使用,代码的复用度并不高。可以把脚本放在独立的 .js 后缀的文件中,通过 script 标签引入外部脚本文件~

注意:        

        1. 一个 html 中可也有多个 script 标签

        2. 一对 script 标签不能在引入外部 js 文件的同时,还定义内部脚本

        3. script 标签如果用于引入 js 文件,中间最好不要有任何字符,包括空格和换行

2. JS 的数据类型和运算符

数据类型

JS 是弱类型,不是没有类型,是变量在声明的时候不指定类型,赋值的时候才确定类型,JS 中的变量声明,统统都使用 var

JS 中常见的数据类型:

        数值类型              number 不区分整数和浮点数

        字符串类型           string

        布尔类型               boolean

        引用类型               Object

        function 类型         function

        未命名赋值            undefined  值 unfinished

        赋予 null                Object       值  null

判断数据类型的运算符 typeof

注意:JS 中,使用 var 声明变量的特点:

        1. 弱变量类型,可以统一使用 var 来进行声明

        2. var 声明的变量,可以再次进行声明

        3. 变量可以使用不同的数据类型来进行多次赋值

        4. JS 的语句可以以分号结尾,也可以不以分号来结尾

        5. 变量的标识符严格区分大小写

        6. 标识符的命名规则参照 Java

        7. 如果使用了一个没有声明的变量,那么时候会报 uncaught ReferenceError:*** is not defined

        8. 如果一个变量只进行了声明,没有赋值,那么值是 unfined

算术符

算术运算符: + - * / %

        / 在除 0 的时候,结果是 Infinity

        & 在模 0 的时候,结果是 NaN,意思是 Not A Number

复合算术符:++   --   +=     -=    *=    /=    %=

        同样 /= 0 结果为 Infinity

        %0 结果为 NaN

关系运算符:>    <   >=   <=    ==    ===  !=

        这里需要注意  ==  和  ===

        ==:如果两端数据类型不一致,会尝试将两端的数据转换成 number,再对比 number 的大小

                ‘123’ 这种字符串可以转换成 123 数字

                true 会转换成 1 false 会转换成 0

        ===:如果两端数据类型不一致,则直接返回 false,数据类型一致的话才会进行比较~

逻辑运算符:||    &&

        与 Java 几乎相同

条件运算符: 条件?值1:值2

        与 Java 几乎相同

位运算符:| & ^ << >> >>> 

        与 Java 类似

3. JS 的流程控制和函数

if 结构

这里的 if 结构几乎和 Java 中一样,但有三点需要注意:

        1. if()中的非零字符串会被认为是 true

        2. if()中的非零数字会被认为是 true

        3. if()中的非空对象会被认为是 true

switch 结构

switch 结构几乎和 Java 中一样~

while 循环

for 循环

foreach 循环

foreach 循环和 Java 的语法有所不同了~

        在对数组进行迭代的时候:

        1. 括号中的临时变量表示的是元素的索引,而不是元素的值。

        2. ()中也不再用 : 进行分割了,而是使用 in 关键字~

JS 函数声明

JS 中的方法,一般称为函数,函数的声明语法和 Java 中有很大的区别~

函数声明的语法:

        1. function 函数名() {}

        2. var 函数名 = function() {}

和 Java 相比有如下特点:

        1. 没有访问修饰符

        2. 不用声明函数的返回值类型,需要返回直接在函数体中 return 进行返回即可~ 返回值类型也没有 void

        3. 参数列表中,因为是弱类型变量,所以无序数据类型~

        4. 调用函数的时候,实参和形参的个数可以不一致~ 可以在方法的内部通过 arguments 获得调用时候的实参~

        5. JS 函数中没有异常列表~

        6. 函数也可以作为参数传递给另一个方法~

// 声明函数
function sum(a, b) {return a + b;
}var sum = function(a, b) {return a + b;
}
//调用函数 接收结果
var result = sum(10, 20);
console.log(result);

如果在调用函数中,多传了几个参数 ==》 相当于没有传~

// 函数也可以作为参数传递给另一个方法var sum = function(a, b) {return a + b;
}
function add(getSum) {return getSum(20, 30);
}
var result = add(sum);
console.log(result);

完!

http://www.lqws.cn/news/480691.html

相关文章:

  • (线性代数最小二乘问题)Normal Equation(正规方程)
  • Go语言--语法基础6--基本数据类型--数组类型(1)
  • rom定制系列------红米note11 5G版 MTK芯片强解bl锁修复bug 官方系统 面具root批量线刷版
  • C++结构体初始化与成员函数实现语法详解
  • python基础(for...else...)
  • 怎么让二级域名绑定到wordpesss指定的页面
  • python源码:执行pdf合并/分页/图片管理功能
  • Linux 下的 socket
  • 如何用AI开发完整的小程序<9>—UI自适应与游戏页优化
  • Docker 高级管理——容器通信技术与数据持久化
  • Neo4j 中存储和查询数组数据的完整指南
  • 删除node并且重装然后重装vue
  • day039-nginx配置补充
  • 从 Cluely 融资看“AI 协同开发”认证:软件考试应该怎么升级?
  • 【unitrix】 4.0 类型级数值表示系统(types.rs)
  • 如何用AI开发完整的小程序<7>—让AI微调UI排版
  • 深度解析云计算网络架构:VLAN+OVS+Bonding构建高可靠虚拟化平台
  • Redis-CPP 5大类型操作
  • 深入解析C#数组协变与克隆机制
  • c#websocket心跳包自定义实现,支持异步操作的取消
  • C++——继承
  • 7.4.1_1B树
  • 从零开始手写redis(16)实现渐进式 rehash map
  • 《福格行为模型》
  • 鲲鹏服务器创建Zookeeper镜像实例
  • 【LLIE专题】NTIRE 2025 低照度图像增强第一名方案解读
  • C#设计模式-Builder-生成器-对象创建型模式
  • 编程江湖-设计模式
  • CentOS7中源码编译安装freeswitch
  • [project-based-learning] 开源贡献指南 | 自动化链接验证 | Issue模板规范