0
0

3.3 JavaWeb-JavaScript

3.3.1 JavaScript

3.3.1.1 JavaScript概述

JavaScript与Java的关系可谓是，雷锋与雷峰塔——毫无关系。

JavaScript 是 Web 的编程语言，JavaScript是一种面向对象思想的脚本语言，通过JavaScript可以实现用户与静态网页之间的交互，也称为动态网页技术（JavaScript+HTML+CSS）。

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为

本系列重点为后端，所以前端内容可参考专业的网站进行学习，本节只涉及局部知识：

JavaScript 对象 | 菜鸟教程

3.3.1.2 JavaScript用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

3.3.2 基础语法

3.3.2.1 JavaScript 输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

3.3.2.2 JavaScript 运算符、控制语句、语法

虽然JavaScript与Java没有血缘关系，但是在语法、命名等规则方面和Java几乎一样，只要按 Java的规则来就不会出错。

运算符、控制语句等和其他的编程语言都接近。

3.3.2.2.1 增强for循环

 <script>
        var arr=['a','b','c'];
        //let 用于声明局部变量
        //for  in  声明变量 存储取出数据的索引
        for(let i in arr){
            console.log(i+":"+arr[i]);
        }

3.3.2.3 JavaScript 数据类型

JavaScript 弱类型语言，定义的时候只需要关键词var、let、const 。

var:函数作用域，整个函数内都是有效的。在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

lte:块作用域，比如在for循环内，在其外面是不可被访问的。

let必须先声明，再使用，而var可先使用后声明。

3.3.3 API

3.3.3.1 Math

abs()求绝对值ceil()向上取整floor()向下取整random()随机数 0~1

3.3.3.2 Date

getFullYear()获取年份getMonth()获取月份getDate()获取天getHours()获取小时getMinutes()获取分钟getSeconds()获取秒getMilliseconds()

  //Date对象
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var seconds = date.getSeconds();
        var millSeconds = date.getMilliseconds();
        //拼接日期
        console.log(date);
        var dateTime = year + "年" + month + "月" + day + "号 " + hour + ":" + minute + ":" + seconds;
        console.log(dateTime);

3.3.3.3 Array数组

js中的数组类似于java中的ArrayLis他，因为js没有指定的数据类型 所以存入数据可以看做是object 可以存储任意类型数据。

数组的声明

数组本质是个对象 所以直接使用var声明

    var 数组名

数组的创建

与java不同， js数组创建的长度可以自动增长

无参构造方法创建

    数组名=new Array();

    var arr1 = new Array();

数组名=new Array(length);

    创建指定长度的数组  值为empty 注意不是null

    var arr2 = new Array(5);

数组名=[数据,数据,数据....];

    var arr3 = [1, 2, "a", true];

数组的赋值

通过索引对数组对应位置进行赋值

需要注意的是 指定索引不存在也可以赋值 前面的数据会用empty设置

3.3.3.4 String字符串

new String("x")构造方法
charAt(x)

取字符串对象指定索引数据

indexOf("x")
第一次出现的索引
lastIndexOf("x")
最后一次出现的索引
substring(x, x)

截取字符串从指定索引开始 到指定索引结束

substr(x, x)

截取字符串从指定索引开始 指定长度

split("x")

分割字符串 按照指定字符x分割为字符串数组

3.3.4 函数

函数：包裹在{}中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

有参
js中所有类型使用var 所以声明方法时只需要定义接收数据的变量名即可
function functionname(a,b)
{
    // 执行代码
    return c;
}

JavaScript 对大小写敏感。关键词 function 必须是小写。

3.3.5 BOM对象

浏览器对象，当前页面浏览器解析后会自动创建代表对应功能的对象,主要包括：

  1. window对象：HTML解析后的页面
  2. location：页面地址栏
  3. history：跳转的历史记录
  4. screen对象：浏览器屏幕

3.3.5.1 window

定时器（延时执行）与计时器的功能（延时重复执行）

3.3.5.2 location

  1. window.location.href: 返回当前页面的 href (URL)
  2. window.location.hostname :返回 web 主机的域名
  3. window.location.pathname :返回当前页面的路径或文件名
  4. window.location.protocol :返回使用的 web 协议（http: 或 https:）

3.3.5.3 history

  1. back():后退方法
  2. forword():前进方法
  3. go(number):根据number进行前进后退
 javascript:histtory.go(-1);的形式进行返回

3.3.5.4 screen

screen.height
高度
screen.width
宽度
screen.availHeight
可用高度screen.availWidth可用宽度

3.3.6 DOM对象

3.3.6.1 获取标签

document.getElementById()根据id获取元素document.getElementsByClassName()根据class名获取元素document.getElementsByTagName()根据标签名获取元素document.getElementsName()根据name属性值获取元素
注意浏览器加载执行顺序 如果使用js获取标签，那么首先需要保证js执行时 页面已加载显示对应标签。

3.3.6.2 标签属性

标签对象.属性方式

value()
获取对应标签的value
id()
获取对应标签的id
name()
获取对应标签的name
innerHTML

获取当前标签内的内容 如果有其他标签按照原代码形式获取

innerText

仅获取当前标签中的所有的文本内容

JS获取修改属性书写步骤

1.通过document对象对应的方法获取对应的标签对象（如果返回多个从中取出）

2.通过属性获取标签上的内容与修改标签上的内容(如果是双标签中间的文本使用innerHTML或inneText属性获取)


         //先获取对应的标签对象
        var d1=document.getElementById("d1");
        //获取当前标签内的内容  如果有其他标签按照原代码形式获取
         console.log(d1.innerHTML);
         //仅获取当前标签中的所有的文本内容
         console.log(d1.innerText);

         var i1=  document.getElementById("i1");
         //可以所有属性都可以通过对象.属性获取
          console.log(i1.value);
          console.log(i1.id);
          console.log(i1.name);

          i1.value="已经获取";
          i1.id='新id';
            i1.name='新name';

3.3.6.3 事件

3.3.6.3.1 什么是事件

事件：标签发生的特殊的状态，例如 点击键盘、按下抬起键盘、鼠标移入、鼠标移出、鼠标移动 、加载完毕。类似于css中选择器的伪元素的概念。

3.3.6.3.2 什么是事件绑定

事件绑定：将对应的事件与对应的标签绑定，当对应的标签发生相应绑定的事件时，会执行相应的代码，实现对应的功能。

事件对象：当相应事件发生时，会根据事件相应属性创建事件对象,在处理事件相应的方法中可以直接使用，获取事件信息在方法中使用event代表当前发生事件对象，其内保存了当前事件的所有信息。

3.3.6.3.3 两种事件绑定方式

方式一

function eventfunction(){

定义事件

}

///根据标签id获取标签，也可根据标签class或name获取对应标签

var d2= document.getElementById("d2"); /

//把d2标签的发生的事件绑定eventfunction函数 格式 ： d2.事件=eventfunction;
d2.οnclick=eventfunction;

//鼠标点击事件绑定eventfunction

方式二

3.3.6.3.4常见事件

事件名描述onclick单击事件onchange变化事件onsubmit表单提交事件onload页面加载事件

<script>
           function eventfunction(){
           // console.log("事件发生")
           // console.log(event)
             //事件对象常用属性
             console.log("事件类型:"+event.type);
        }
         var d2= document.getElementById("d2");
       
        //d2.onclick=eventfunction;//鼠标点击事件
        //d2.onmousedown=eventfunction;//鼠标按下事件
        //d2.onmouseup=eventfunction;//鼠标抬起事件
        //d2.onmouseover=eventfunction;//鼠标移入事件
        //d2.onmouseout=eventfunction;//鼠标移出事件
        d2.onmousemove=eventfunction;//鼠标移动事件

    </script>

3.3.6.4 节点操作

通过js创建对应的标签对象并放入页面显示，经常用于页面的动态生成（页面数据由后台获取）。

<body>
    <button>添加</button> <button>删除</button>
    <table border="1">
        <thead>
            <tr><th>id</th><th>name</th><th>age</th></tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>

</body>
<script>
    //准备数据 相同写死
    //1 zhangsan 18 
    //获取数据添加位置
    var tb=document.getElementById("tb");

    //为按钮添加相应的事件
    document.getElementsByTagName("button")[0].onclick=function(){
       //创建对应的标签对象
        var tr=document.createElement("tr");
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        var td3=document.createElement("td");

        //为对应的单元格赋值
        td1.innerText=prompt("请输入id")
        td2.innerText=prompt("请输入name")
        td3.innerText=prompt("请输入age")

        //将单元格存入行标签中
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        //将tr放入表格
        tb.appendChild(tr);

    }
    document.getElementsByTagName("button")[1].onclick=function(){
      //  alert("删除")
      //获取删除的标签
      //删除最后一行
      var trArr=document.getElementsByTagName("tr");

      var index=prompt("请输入删除的行数")
       
      var delTr=trArr[index];
      //调用方法删除
      tb.removeChild(delTr);
    }

</script>

3.3.6.5 JSON

3.3.6.5.1 什么是JSON

JSON:JavaScript Object Notation(JS对象简谱）是一种轻量级的数据交换格式。

JSON属于前端对象，用于保存数据，是前后端数据交互的基石，在前端通过**.属性方式获取值，书写语法类似于java中的map集合,[key:value]形式 ，key必须为字符串，value为任意类型数据**。

3.3.6.5.2 JSON语法

格式

var 变量名**={"key1":value1,"key2":value2,"key3":value3}**

{}包裹数据

数据之间用","分割

key必须为字符串，所以用""

JSON的存值与取值

 <script>
        声明json对象保存学生信息
        var json={'id':1,'name':'张三','age':18};
        获取json对象对应key值的方式
        方式一：将json对象当前一个类的对象，通过.key的形式获取
        console.log(json.name)
        方式二：通过类似于数组索引[key]的形式获取
        console.log(json['name'])
    </script>

方式一：只能固定调用某一个key对应的value。

方式二：可以指定key获取数据，更加灵活。

3.3.6.5.3 数组保存JSON

一个JSON对象只能保存一个对象数据，但是前后台交互可能返回多个对象的数据。将JSON保存到数组里返回给前台，就可以解决这个问题。

 <script>
        var arr=[{'id':1,'name':'张三','age':18},{'id':2,'name':'李四','age':28},{'id':3,'name':'王五','age':38}];
        console.log(arr);
        使用的顺序就是先从数组中取出对应的json数据 之后获取key对应属性
       方式一
        console.log(arr[1].age);
       方式二
        console.log(arr[1]["age"]);
   </script>

3.3.6.5.4 JSON格式

前面介绍了JSON的格式以及使用方法，在实际的开发中，不同的系统会有不同的JSON格式，JSON里不仅有数据还有其他的提示信息。

 var dataJson={
        'code':200,
        'msg':'信息',
        'data':[{'id':1,'name':'张三','age':18},{'id':2,'name':'李四','age':28},{'id':3,'name':'王五','age':38}]
    };

3.3.6.5.5 示例

后台处理JSON并返回给前台，在后面的Servlet会讲解。

前台接收JSON并动态生成表格

<script>
    //准备json数据  模拟后台返回
    var dataArr=[{'id':1,'name':'张三1','age':18},{'id':2,'name':'李四1','age':28},{'id':3,'name':'王五','age':38}];
    //遍历集合
    for(var i=0;i<dataArr.length;i++){
        var json=dataArr[i];
        //创建行对象
        var tr=document.createElement("tr");
        //创建列对象
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        var td3=document.createElement("td");       
        //为td赋值
        td1.innerHTML=json.id;
        td2.innerHTML=json.name;
        td3.innerHTML=json.age;
        //将td存入tr
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        //将tr存入tbody
        document.getElementById("tb").appendChild(tr);
    }

</script>

上一篇：下一篇：

标签： java 前端 开发语言
本文转载自: https://blog.csdn.net/qq_43757965/article/details/127819929
版权归原作者 老李头喽 所有， 如有侵权，请联系我们删除。
登录后发布评论

“3.3 JavaWeb-JavaScript”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航