JavaWeb,JavaScript的学习(上)

由于是JavaWeb的学习,是建立在已经学过Java的基础上。所以很多地方与Java做对比,然后没有把多余的内容详细写出来。

JS的引入方式

内嵌式

在head中通过一对script标签定义脚本代码

例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.btn1{width: 150px;height: 40px;font: 24px;font-family: '隶书';background-color: antiquewhite;color: brown;border: 3px solid yellow;border-radius: 5px;}</style><script>function suprise(){alert("hello")}</script>
</head>
<body><button class="btn1" onclick="suprise()">按钮</button>
</body>
</html>

内部脚本方式引入

在页面中,通过一对script标签引入JS代码

script代码放置位置具备一定的随意性,一般放在head标签中居多

在script标签中加上属性src表明要引入的js文件的路径,加上属性type表明引入的文件类型,这里类型为text/javascript

例:

js文件:‘

function suprise(){alert("hello")
}

html文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.btn1{width: 150px;height: 40px;font: 24px;font-family: '隶书';background-color: antiquewhite;color: brown;border: 3px solid yellow;border-radius: 5px;}</style><script src="js/button.js" type="text/javascript"></script>
</head>
<body><button class="btn1" onclick="suprise()">按钮</button>
</body>
</html>

注:

  1. 一个html文件中可以有多个script标签
  2. 一对script标签不能在引入外部js文件的同时定义内部脚本
  3. script标签如果用于引入外部js文件,中间最好没有任何字符。

JS的数据类型和运算符

JS中变量的声明

声明变量时,使用的数据类型通通使用var,例如:var num = 10 var str = “abc”

JS是弱类型的,不是没有类型,变量在声明时是不确定类型,赋值时才确定类型。

JS的数据类型

数值类型:number 无论小数整数都是使用number

字符串类型:string

布尔类型:boolean

引用类型:object

函数类型:function

如果是命名未赋值,则类型和值都为undefined。将null值赋值给变量时,变量的类型为object类型0.

JS的语句可以以分号;结尾,也可以没有分号(没有分号则换行)。

var 声明的变量可以多次声明,也可以使用不同的数据类型多次赋值。

JS的运算符

算术运算符:+ - * / %(分别为加减乘除取模,与C语言、Java的一样)

一个数除零的结果是Infinity,模零的结果是NaN

JS中的+也有连接符的作用,用于连接字符串,与Java一致

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

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

===运算符即比较存储的内容时还会比较数据类型

逻辑运算符:|| &&

条件运算符:条件表达式?值1:值2

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

其他的未说明的运算符即和Java一样

JS的流程控制和函数

分支结构

if结构

JS中的if几乎和Java中的一样,不一样的是:

if()中的非空字符串会被认为是true

if中的非0数字会被认为是true,否则为false(与C语言一致)

非空对象放入判断条件也是结果为true,放入null则为false

格式:

if(){}
else if(){}
else{}

switch结构

与Java中的一样。

格式:

switch(){
case …… :break;
case …… :break;
default:break;
}

循环结构

while与for和Java中一致

格式:

while(){}
for( ; ; ){}

关于foreach(增强for循环)

JS中数组的定义为 var arr = [”abc”,”def”,”ghi”]

foreach的格式为:

for(var index in arr){}

在JS中要将:改为in,且与Java不同的是index代表的不是数组中的元素,而是数组的元素的下标。使用时应该注意操作对象是元素下标。

函数

函数的声明方式有两种:

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

注:因为是弱类型,JS函数的参数不需要声明数据类型

与Java相比,有以下特点:

  1. 没有访问修饰符
  2. 没有返回值类型,也没有void类型,如果有值要返回,直接return即可
  3. 没有异常列表
  4. 在调用函数时,实参和形参可以在数量上不一致,会依次传值,多的实参不起作用。
  5. 函数也可以作为参数传递给另一个方法

例如:定义一个实现加法的函数

function sum(a,b){return a+b}

对象的创建

创建对象的语法:

方式一:var 对象名 = new Object()

方式二:var 对象名 = {属性名:属性值,属性名:属性值,函数名:function(){ }……}

关于对象的属性和函数:

方式二中直接在{}中定义了属性和函数,方式一中,添加属性则是 对象名.属性=属性值

如果属性已经存在,则是给属性赋值。

例如:

function sum(a,b){return a+b}var person1 = new Object()person1.name="李四"person1.age=19;person1.eat=function(food){console.log(this.age + "岁的" + this.name + "爱吃" + food)}person1.eat("馒头")var person2 = {name:"张三",age:10,eat:function(food){console.log(this.age + "岁的" + this.name + "爱吃" + food)}}person2.eat("包子")

注:JS中的console.log()类似于Java中的System.out.print()

JSON格式

JSON格式是一个特定的字符串语法结构,JSON格式的字符串,在前后端都可以很方便地和对象之间进行转换

JSON语法格式:var str = ‘{”属性名”:属性值,”对象属性名”:{”属性名”:属性值,……},”数组属性名”:[”元素值“,”元素值“, ……],……}’

属性名必须用双引号包好,属性值是string类型的要用双引号包好,数值类型的不处理。由于{}内要有双引号,所以{}外为了防止冲突,要使用单引号包好

在前端:

通过JSON.parse()可以将一个JSON字符串转换为一个对象,通过JSON.stringify()将一个对象转化为JSON字符串。

例:

var personstr = '{"name":"李四","age":19,"dog":{"dname":"小宝","dage":4}}'
var person = JSON.parse(personstr) //通过JSON.parse()将JSON字符串转化为对象
var jsonstr = JSON.stringify(person) //通过JSON.stringify()将对象转化为JSON字符串

在后端:

通过Jackson中的ObjectMapper对象的writeValueAsString方法即可将对象转化为JSON字符串,通过Jackson中的ObjectMapper对象的readValue方法(参数一为字符串,参数二为对应类的class对象)可以将字符串转化为对象

package JSON_test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import static org.junit.jupiter.api.Assertions.*;
class TestJSONTest {@org.junit.jupiter.api.Testvoid test1() throws JsonProcessingException {Dog dog = new Dog("小宝",4);Person person = new Person("张三",19,dog);//将person对象转化为JSON字符串
//        使用Jackson中的ObjectMapper对象的writeValueAsString方法ObjectMapper oo = new ObjectMapper();String personstr = oo.writeValueAsString(person);System.out.println(personstr);}void test2() throws JsonProcessingException {String personstr2 = "{\\"name\\":\\"张三\\",\\"age\\":19,\\"dog\\":{\\"name\\":\\"小宝\\",\\"age\\":4}}";ObjectMapper objectMapper = new ObjectMapper();Person person = objectMapper.readValue(personstr2, Person.class);System.out.println(person);}
}

关于JSON和集合之间的转化

Map转化后,是以{”key”:”value”,”key”:”value”,……}的格式,List转化后是以{“a”,“b”,“c”,……}的格式

JS基本对象

数组

创建数组的四种方式

new Array():创建空数组

new Array(5):创建指定大小的数组

new Array(ele1,ele2,ele3,……,elen):创建数组并指定元素值

[ele1,ele2,ele3,……,elen]:相当于第三种语法的简写

数组的API

toString( ):将数组转为字符串

join( ):将数组转为字符,默认按照逗号分割,可以指定分隔符

concat(arr2,arr3…):拼接多个数组,返回拼接后的结果,原数组不变

reverse( ):翻转数组元素,返回翻转后的数组,原数组发生变化,也进行了翻转

slice(start,[end]):截取数组

start 为开始下标 end为结束下标 不包含end本身 end为空时 会截取到最后 如果下标为负数表示倒数 返回截取的数组,原数组不变

splice(start,[count],[v1],…):删除数组元素

start开始删除的下标 count删除的长度 count为空时 删除到最后 下标为负数表示倒数 v1及之后的参数表示删除后要补充的元素 返回删除的元素,原数组中发生变化,删除了此元素

sort( ):对数组进行排序,默认是按照首个字母的Unicode码排列

push( ):在数组末尾添加元素,返回数组的长度,原数组会发生变化

pop( ):删除数组末尾的一个元素,返回删除的元素,原数组会发生变化

unshift( ):在数组开头添加元素,返回数组的长度,原数组会发生变化

shift( ):删除数组开头的一个元素,返回删除的元素,原数组会发生变化

indexOf( ):检测数组中是否含有某个元素,存在返回下标,不存在返回-1

Boolean对象

API

toString():将布尔值转化为字符串,并返回结果。

valueOf():返回Boolean对象的原始值

字符串对象

API

length:获取字符串的长度

charAt( ):获取下标对应的字符

indexOf( ):检查字符串是否含有某个字符串,返回的是找到第1个下标 找不到则返回-1

lastIndexOf( ):检查字符串中是否含有某个字符串,返回的是找到的最后一个下标,找不到返回-1

slice(start,[end]):截取字符串

start开始的下标

end结束的下标

不包含end这一项;end为空会截取到最后

下标为负数表示倒数

toUpperCase( ):将英文字母转大写

toLowerCase( ):将英文字母转小写

split( ):将一个字符串按照指定的字符转为数组

关于Math对象、Date对象、Number对象在JavaWeb的笔记中就不写了,要用的时候可以去w3school 在线教程中查阅

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

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

相关文章

VMware迁移虚拟机教程,适用于换电脑、重装系统

新购入了一台电脑&#xff0c;接下来可能会有连续好多篇与装机/重装系统/装软件有关的文章&#xff0c;平时可能只是纸上谈兵&#xff0c;这次是花重金买素材了&#xff0c;建议收藏 问题背景&#xff1a;在之前的电脑上&#xff0c;安装了VMware Workstation&#xff0c;并配…

Python中魔术方法汇总

文章目录 1. Python中魔术方法的定义2. 魔术方法的分类2.1面向对象特性的增强&#xff1a;2.2运算符重载&#xff1a;2.3语义化编程&#xff1a;2.4控制对象生命周期&#xff1a;2.5容器协议支持&#xff1a;2.6 上下文管理器协议&#xff1a;2.7简化API设计&#xff1a; 3. 部…

第三十九周:文献阅读+Transformer

目录 摘要 Abstract 文献阅读&#xff1a;CNN与LSTM在水质预测中的应用 现有问题 提出方法 相关模型 CNN LSTM CNN-LSTM神经网络模型 模型框架 CNN-LSTM神经网络 研究实验 数据集 模型评估指标 数据预处理 实验设计与结果 研究贡献 Transformer Encoder-Dec…

uniapp返回上一页并刷新数据

在uniapp中&#xff0c;返回页面时onLoad是不会触发的 如果只需要在特定情况下返回上一页才需要刷新数据 可以使用$emit和$no去解决 例如&#xff1a;注册完成后返回到首页并隐藏注册按钮&#xff0c;register.vue和index.vue register.vue <template><view clic…

C#灵活的任务调度组件FluentScheduler

FluentScheduler是一个C#的灵活的任务调度组件&#xff0c;支持各类任务调度。网上有很多演示代码&#xff0c;此处记录下来&#xff0c;方便自己查找。 // See https://aka.ms/new-console-template for more information //Console.WriteLine("Hello, World!");us…

prometheus常用exporter

一、node-exporter node_exporter&#xff1a;用于监控Linux系统的指标采集器。 未在k8s集群内的linux机器监控 GitHub - prometheus/node_exporter: Exporter for machine metrics 常用指标&#xff1a; •CPU • 内存 • 硬盘 • 网络流量 • 文件描述符 • 系统负载 •…

Win系统搭建Elasticsearch实现公网远程访问本地服务

文章目录 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜索和分析引擎&#xff0c;它提供了一个分布式、多…

七、Qt 信号和槽

在QT4以上的版本&#xff0c;在窗体上用可以通过选中控件&#xff0c;然后点击鼠标右键单击按钮&#xff0c;选择“转到槽”。可以自动创建信号和槽。 选择clicked(),并点击 ok Qt Creator会给头文件和代码文件自动添加 这个按钮的单击事件&#xff08;信号和槽&#xff09;。 …

【Docker】centos中及自定义镜像,并且上传阿里云仓库可提供使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是平顶山大师&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《【Docker】centos中及自定义镜像&#xff0c;…

零零鸡生态养殖农场“出圈”,有“智”更有“质”,助力本土品牌高质量发展

什么是生态农场&#xff1f;不同于常规农场&#xff0c;它对农业生产经营单元的各个关键环节有着极为严格的要求&#xff0c;强调整体、协调、循环、再生、多样&#xff0c;产品质量自然更好&#xff0c;附加值也更高&#xff0c;更能满足日趋多样化的巨大市场。零零鸡生态农场…

如何在前端优化中处理大量的图像资源?

在前端优化中&#xff0c;处理大量的图像资源是一项重要的任务。由于图像占据了网站带宽的大部分&#xff0c;因此优化图像可以显著提高网站的性能和用户体验。下面将介绍一些在前端优化中处理大量图像资源的常见方法。 一、压缩图像 压缩图像是减少图像文件大小和优化图像的…

常见设计模式--通俗易懂版

一、设计模式原则 1.单一职责原则 核心&#xff1a;一个类只负责一个功能领域中相应的职责&#xff0c;或者可以定义为&#xff1a;就一个类而言&#xff0c;应该只有一个引起它变化的原因。 思想&#xff1a;如果一个类承担的职责过多&#xff0c;就等于把这些职责耦合在一起…

C#调用WinAPI部分命令

C#是针对WIndows而生的&#xff0c;开发WIndows应用最快。然而想要让自己程序进阶&#xff0c;就不需深入Windows底层&#xff0c;WinAPI为我们提供了一把利刃。 目录 1、查找窗口句柄 2、查找窗口内子对象 3、指定窗口样式 4、指定窗口扩展样式 5、调整窗口大小Z轴&…

C++在结构(Struct)中使用队列(Queue)

1.结构中实现队列功能: //队列数据 struct QueueData{int data;//数据QueueData *next;//下一个数据 };//队列结构 struct QueueStruct{QueueData *front;//队头,出队用QueueData *end;//队尾,入队用//构造队列QueueStruct(){front=end=NULL;}//空队bool Empty(){return fro…

python-模块-hashlib

1、hashlib模块介绍 Python hashlib 模块主要用于进行哈希&#xff08;hash&#xff09;操作。哈希&#xff08;Hash&#xff09;是一种将任意长度的输入数据映射为固定长度输出数据的算法。hashlib 模块提供了常见的哈希算法的实现&#xff0c;如 MD5、SHA-1、SHA-256 等。 …

还在因为版本不一致重装node吗,用它试试

一、卸载nodejs 首先卸载已安装的nodejs&#xff0c;总体分三步 1)打开控制面板&#xff0c;卸载nodejs 2)打开计算机->高级->环境变量&#xff0c;删除path中nodejs相关的配置 3)打开nodejs安装目录&#xff0c;整体删除 打开cmd&#xff0c;输入以下命令&#xff…

为什么要进行漏洞扫描工作

随着互联网的普及和信息技术的飞速发展&#xff0c;网络安全问题愈发引人关注。其中&#xff0c;漏洞扫描作为保障网络安全的重要手段&#xff0c;受到了广泛的关注和应用。本文将详细介绍漏洞扫描的概念、效果、使用场景等&#xff0c;以期为读者提供有关漏洞扫描的全面了解。…

网络分流规则

现在的网络是越来越复杂。 有必要进行分流。 有一些geosite.dat是已经整理好的&#xff0c;包含许多的网站的分类&#xff1a; 分流规则&#xff1a; route规则 主要是: {"type": "field","outboundTag": "direct","domain&quo…

【Vue3】2-11 : 生命周期钩子函数及原理分析

本书目录&#xff1a;点击进入 一、组件生命周期概述 1.1 官方生命周期 1.2 钩子函数&#xff08;回调函数&#xff09; ▶ 生命周期可划分为三个部分(- >表示执行循序)&#xff1a; 二、实战&#xff1a;测试生命周期流程 &#xff1e; 代码 &#xff1e; 效果 一…

ZZULIOJ 1111: 多个整数的逆序输出(函数专题)

题目描述 输入n和n个整数&#xff0c;以与输入顺序相反的顺序输出这n个整数。要求不使用数组&#xff0c;而使用递归函数实现。 递归函数实现过程如下&#xff1a; void inverse(int n) { 读入一个整数&#xff0c;存入num; if(n >1) { 将后面的n-1个数逆…