JavaWeb，JavaScript的学习（上）

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

JS的引入方式

内嵌式

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

例：

    
    
    
    


    按钮

内部脚本方式引入

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

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

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

例：

js文件：‘

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

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.Test
    void 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 在线教程中查阅