javaweb学习笔记（8.10）

news2024/11/15 13:03:50

一、JS

1.1JS简介

Web标准：由3WC制订

三个组成部分：

HTML---》网页的基础结构

CSS---》网页的表现效果

JavaScript---》网页的行为

简介：JS是一门跨平台、面向对象的脚本语言。用来控制网页行为的，使网页交互。

1.2JS的引入

1、内部脚本：

  • Js代码必须位于<script></script>标签之间
  • 在HTML文档中，在任意地方，放置任意数量的<script>
  • 一般会把脚本放在<body>元素底部，改善显示速度
<script>
    alert("Hello World")
</script>

2、外部脚本

  • 外部JS文件中，只包含JS代码，不包含<script>标签
  • <script>标签不能自闭合

1.3JS基础语法

书写语法
  • 区分大小写
  • 每行结尾分号可有可无
  • 注释：
    • 单行注释：//注释内容
    • 多行注释：/*注释内容*/
  • 大括号：表示代码块
if(count==3){
    alert("Hello");
}
输出语句
  • 使用window.alert()写入警告框
  • 使用document.write（）写入HTML输出
  • 使用console.log（）写入浏览器控制台
  <script>
        window.alert("Hello alert");/* 弹出警告栏 */
        document.write("Hello write");/* 浏览器展示 */
        console.log("Hello log ");/* 写入控制台 */
    </script>

运行结果： 

变量

使用var关键字声明变量（*JS是弱类型语言，变量可以存放不同类型的值）

var声明变量特点：

  • 作用域大，是全局变量
  • 可以重复定义
var a=20;
a="张三";

let声明变量特点：

  • 只在let关键字所在代码块内有效且不允许重复声明
 <script>
    {
        let x=1;
       /*  let x=2; */
        alert(x);
    }
    alert(x);
 </script>

 当写第二个 let x时vscode将报错，运行后不显示相应弹窗警告栏

const声明变量特点：

  • 声明的为只读变量
  • 一旦声明，常量的值无法改变
   <script>
        {
            const aa=1;
           /* aa=2;*/
            alert(aa);
        }
    </script>

 写第二个aa的赋值运算时不报错，但不会出现弹窗警告栏

变量名规则：

  • 字符由任何字母、数字、下划线、美元符号组成
  • 数字不能开头
  • 使用驼峰命名法(类似于：FindRoot..) 
数据类型

JS中数据类型有：原始类型  和  引用类型

*使用 typeof 运算符可以获取数据类型 

运算符

===全等运算符

==和===的区别 

 类型转换：

1、字符串转为数字

  <script>
    alert(parseInt("12"));//12
    alert(parseInt("12A45"));//12
    alert(parseInt("A45"));//NaN
   </script>

2、其他类型转为boolean

  • Number：0和NaN为false，其余转为true
  • String：空字符串转为false，其余转为true
  • Null和undefi：转为false
流程控制语句

1.4函数

简介：函数是被设计为执行特定任务的代码块

介绍：JS通过function关键字定义函数，语法：

function functionName（参数1，参数2...）{
    //代码块
}

*注意：

  • 形参不需要类型（JS是弱类型语言）
  • 返回值不需要定义类型，在函数内部直接使用return返回即可

定义方式一：

function functionName(a,b...){
    return a+b;
}

 定义方式二：

var functionName=function (a,b...){
    return a+b;
}

调用方法：

functionName(a,b...);

1.5JS对象

Array数组

定义方式一：

var 变量名=new Array（元素列表）；

var arr=new Array(1,2,3,4);

 定义方式二：

var 变量名=[元素列表]；

var arr=[1,2,3,4];

 访问方式：

arr[索引]=值；

arr[10]="hello";

特点：

  • 长度可变
  • 类型可变

属性：

  • length：设置或返回数组中的元素数量

方法：

  • forEach（）：遍历数组中的每个有值的元素，并调用一次传入的函数
arr.forEach(function(e){
    console.log(e);
})

箭头函数 =>

arr.forEach((e)=>{
    console.log(e);
})
  • push（）：将新元素添加到数组的末尾，并返回新的长度
  • splice（）：从数组中删除元素
arr.splice(a,b);//从位置a开始删除b个元素
String字符串

创建方式一：var 变量名=new String （"...");

创建方式二：var 变量名="...";

属性：

  • length：字符串的长度

方法：

  • charAt（）：返回在指定位置的字符
  • indexOf（）：检索字符串
  • trim（）：去除字符串两边的空格
  • substring（）：提取字符串中两个指定的索引号之间的字符。（含头不含尾）
JSON

定义格式：

var 对象名={

        属性名1：属性值1；

        属性名2：属性值2；

        属性名3：属性值3；

        属性名称：function（形参列表）{}

}；

var user={
    name="Tom",
    age=10,//逗号分隔
    eat:function(){
        alert("吃饭”）；
    }
    //简化eat函数
     eat(){
        alert("吃饭”）；
    }
}；

调用格式：

对象名.属性名；

console.log(user.name);

对象名.函数名（）； 

user.eat();

 简介：

*所有的key都要用双引号括起来

定义：var 变量名=‘{"key1":value1,"key2":valuel2}';

 <script>
        var js='{"name":"Tom","age":18}';        
        var obj=JSON.parse(js);
        alert(obj.name);
        alert(JSON.stringify(js));
    </script>

BOM

概念：浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

Window

获取：window.alert（“Hello Window”）；alert（“Hello Window”）；

window可省略。

属性：

  • history：对History对象的只读引用。
  • location：用于窗口或框架的Location对象。
  • navigator：对Navigator对象的只读引用。

方法：

  • alert()：显示带有一段消息和一个确认按钮的警告框。
  • confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框。
  • setlnterval（）：按照指定的周期（以毫秒计）来调用函数或计算表达式。
  • setTimeout（）：在指定毫秒数后调用函数或表达式。
  <script>
        //获取
        window.alert("Hello");
        alert("Hello");
        //方法
        //confirm--确认：true    取消：false
        confirm("您确认删除吗？");
        //定时器
        var i=1;
       setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
       } ,2000);
       setTimeout(function(){
        alert("JS");
       },3000)
    </script>
 Location

介绍：地址栏对象。

获取：window.location.属性；location.属性；

属性：

  • href：设置或返回完整的URL。
    <script>
        alert(location.href);

        location.href="https://www.csdn.net/";
    </script>

DOM

概念：文档对象模型

DOM结构（DOM树）

 

JavaScript通过Dom对HTML的操作：

  • 改变HTML元素内容
  • 改变HTML元素样式
  • 对HTML事件作出反应
  • 添加删除HTML元素

HTML中的Element对象可以通过Document对象获取，Document对象通过window对象获取

Document对象中获取Element元素对象函数：

  • 根据id属性获取，返回单个Element对象
<script>
        var img=document.getElementById('h1');
        alert(img);
    </script>
  • 根据标签名称获取，返回Element对象数组
<script>
        var divs=document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            alert(divs[i]);
        }
    </script>
  • 根据name属性值获取，返回Element对象数组
<script>
        var ins=document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            alert(ins[i]);
            
        }
    </script>
  • 根据class属性值获取，返回Element对象数组
<script>
         var ins=document.getElementsByClassName('cls');
        for (let i = 0; i < ins.length; i++) {
            alert(ins[i]);
            
        }
    </script>

获取并修改DOM元素对象

  <script>
        var ins=document.getElementsByClassName('cls');
        var div1=ins[0];
        div1.innerHTML="哈哈哈";
    </script>

1.6事件监听

事件：发生在HTML元素上的事情（按钮被点击、鼠标移动到元素、按下键盘按键）

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

 function on(){
            alert("111被点击了")
        }

方式二：通过DOM元素属性绑定

 document.getElementById('btn2').onclick=function(){
            alert("222被点击了");
        }

常见事件

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

贷奇乐漏洞学习 --- 两个变态WAF绕过

贷奇乐漏洞学习 --- 两个变态WAF绕过

代码分析 第一个WAF 代码 function dowith_sql($str) {$check preg_match(/select|insert|update|delete|\|\/\*|\*|\.\.\/|\.\/|union|into|load_file|outfile/is, $str);if ($check) {echo "非法字符!";exit();}return $str;} 实现原理 这段PHP代码定义了一个…
阅读更多...
Linux日常运维-主机名hosts

Linux日常运维-主机名hosts

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 本小章内容就是Linux进阶部分的日常运维部分&#xff0c;掌握这些日常运维技巧或者方法在我们的日常运维过程中会带来很多方…
阅读更多...
探索消费新纪元：循环购模式的奥秘

探索消费新纪元：循环购模式的奥秘

在这个日新月异的消费时代&#xff0c;你是否听说过“消费1000送2000&#xff0c;每天领钱&#xff0c;提现无忧”的奇闻&#xff1f;或许你会疑惑&#xff0c;商家这是在慷慨解囊&#xff0c;还是在布下什么神秘的局&#xff1f;今天&#xff0c;让我作为你的私域电商向导&…
阅读更多...
Linux应用--IO多路复用

Linux应用--IO多路复用

一、I/O多路复用简介 socket通信&#xff0c;在Linux系统其是就是文件描述符&#xff0c;对应于内核中的缓冲区&#xff08;包含读缓冲区与写缓冲区&#xff09;&#xff0c;实质上是对读写缓冲区的操作&#xff1b;多路复用&#xff0c;多条路复用成一条路。 I/O多路复用使得程…
阅读更多...
爬虫动态http代理ip：提高数据抓取的有效工具

爬虫动态http代理ip：提高数据抓取的有效工具

爬虫动态HTTP代理IP的概述与应用 在网络爬虫的世界中&#xff0c;动态HTTP代理IP是一个非常重要的工具。它不仅能帮助用户提高数据抓取的效率&#xff0c;还能有效避免被目标网站封禁。本文将为您详细介绍什么是动态HTTP代理IP、其优势、使用场景及如何获取和配置。 1. 什么是…
阅读更多...
NVDLA专题8：具体模块介绍——Convolution Accumulator

NVDLA专题8：具体模块介绍——Convolution Accumulator

概述 卷积累加器(Convolution Accumulator&#xff0c; CACC)是CMAC之后的卷积流水线的一个阶段,CACC的定义在NV_NVDLA_cacc.v&#xff0c;module定义如下&#xff1a; module NV_NVDLA_cacc (cacc2sdp_ready //|< i,csb2cacc_req_pd //|<…
阅读更多...
ZooKeeper服务器下载|安装|配置|启动|关闭|端口占用冲突解决

ZooKeeper服务器下载|安装|配置|启动|关闭|端口占用冲突解决

1、下载ZooKeeper ZooKeeper官网&#xff1a;https://zookeeper.apache.org/ 下载ZooKeeper二进制包 2、安装ZooKeeper 对ZooKeeper压缩包解压即可 tar -zxvf apache-zookeeper-3.9.2-bin.tar.gz -C /usr/local/3、配置ZooKeeper 来到ZooKeeper配置文件页面 cd conf复制z…
阅读更多...
一文详解ETC1压缩纹理——OpenGL中ETC1纹理加载与渲染实践

一文详解ETC1压缩纹理——OpenGL中ETC1纹理加载与渲染实践

ETC1（Ericsson Texture Compression）是一种有损纹理压缩技术，2005年初由爱立信研究院参与研发，目的是用于减少移动设备和嵌入式系统中纹理存储的内存占用，应用场景见于游戏、VR、AR等需要大量的纹理资源来创建高质量的视觉效果以及复杂的动画效果场景。 ETC1可提供RGB888像…
阅读更多...
宠物医院收银系统源码

宠物医院收银系统源码

1.系统开发语言 核心开发语言: PHP、HTML5、Dart 后台接口: PHP7.3 后合管理网站: HTML5vue2.0element-uicssjs 线下收银台&#xff08;安卓/Windows版&#xff09;: Dart3 框架&#xff1a;Flutter 3.19.6 助手: uniapp 商城: uniapp 2.系统概况 针对宠物医院的一套一体化收…
阅读更多...
Unity 流光shader的思路

Unity 流光shader的思路

先看一下直线方程&#xff1a; 1.x0.5y0: 2.x0.5y20: 3.由上面的函数图像可以看出 zxky (k是常量)&#xff0c;表示所有斜率为k的直线集合&#xff0c;z是直线在x轴的截距&#xff0c;每个z的取值都确定一条唯一的斜率为k的直线。 4.那么给z一个取值范围就可以画出一条斜的条…
阅读更多...
vulnhub系列：devguru

vulnhub系列：devguru

vulnhub系列&#xff1a;devguru 靶机下载 一、信息收集 nmap扫描存活&#xff0c;根据mac地址寻找IP nmap 192.168.23.0/24nmap扫描端口&#xff0c;开放端口&#xff1a;22、80、8585 nmap 192.168.23.147 -p- -sV -Pn -O访问80端口 dirb目录扫描&#xff0c;存在 git 源…
阅读更多...
c shell 脚本学习使用

c shell 脚本学习使用

1.cd /进入该目录等 2.rm -rf filename 删除文件 3、ctrl allt 打开终端窗口 4、ls 查看该路径下的文件 5 mkdir filename 创建文件夹 6、sudo chmod 777 filename 给予权限 首先对于vcs而言&#xff0c;建立其脚本有以下几个步骤: 1、setup synopsys_sim.setu…
阅读更多...
mysql中log

mysql中log

目录 MySQL 日志系统概述 日志类型 日志的作用和重要性 Mermaid图示 1. Undo Log 和 Redo Log 的协同工作图 2. Redo Log 确保持久性的流程图 Undo Log&#xff08;回滚日志&#xff09; 事务的原子性&#xff08;Atomicity&#xff09;保障 事务回滚机制 MVCC&#…
阅读更多...
MySQL的初步认识

MySQL的初步认识

目录 1、MySQL的定义 2、数据库操作 2.1 创建数据库 2.2 查看数据库 2.3 选中数据库 2.4 删除数据库 3、数据表的操作 3.1 创建表 3.2 查看所有表 3.3 查看指定表结构 3.4 删除表 1、MySQL的定义 数据库技术主要是用来解决数据处理的非数值计算问题&#xff0c;数据处…
阅读更多...
植物大战僵尸融合版

植物大战僵尸融合版

1.这是植物大战僵尸融合版 2.百度网盘 链接&#xff1a;https://pan.baidu.com/s/1yUytNeloiQs5tlss16fVOg 提取码&#xff1a;yspa 时间从2024年8月14号开始分享30天&#xff0c;10个人访问&#xff0c;先来先得。
阅读更多...
项目管理软件中的项目集是什么？项目集管理哪些人适合学习？

项目管理软件中的项目集是什么？项目集管理哪些人适合学习？

在现今的数字化时代&#xff0c;项目管理软件已经成为企业高效运作不可或缺的工具。其中&#xff0c;项目集这一概念在项目管理领域内越来越受到重视。那么&#xff0c;项目管理软件中的项目集究竟是什么呢&#xff1f;它又适合哪些人进行学习和应用呢&#xff1f; 项目、大项目…
阅读更多...
生信技能56 - 去除重复BAM文件的窗口reads计数方法

生信技能56 - 去除重复BAM文件的窗口reads计数方法

1. 输入去除重复的BAM文件 一般采用BWA MEM比对到参考基因组，对得到的BAM文件去除PCR重复，将去除重复的BAM文件作为窗口reads计数的输入文件。 去除重复方法参考本人文章： 生信软件23 - Samtools和GATK去除PCR重复方法汇总 2. 窗口文件制作 左到右列分别为： 染色体名…
阅读更多...
RCE-无字母数字webshell命令执行

RCE-无字母数字webshell命令执行

目录 1.源码 2.题目解析 3.利用方法 3.1 PHP7下如何实现 3.2PHP5下如何实现 3.2.1 shell下可以利用. 来执行任意脚本 3.2.2 Linux文件名支持用glob通配符代替 1.题目源码 <?php if(isset($_GET[code])){$code $_GET[code];if(strlen($code)>35){die(&q…
阅读更多...
pytorch 3 计算图

pytorch 3 计算图

计算图结构 分析&#xff1a; 起始节点 ab 5 - 3ac 2b 3d 5b 6e 7c d^2f 2e最终输出 g 3f - o&#xff08;其中 o 是另一个输入&#xff09; 前向传播 前向传播按照上述顺序计算每个节点的值。 反向传播过程 反向传播的目标是计算损失函数&#xff08;这里假设为…
阅读更多...
看demo学算法之 线性回归模型

看demo学算法之 线性回归模型

嗨&#xff01;今天我们来聊聊如何用Python构建一个简单的线性回归模型。这个过程就像给数据配对舞一样&#xff0c;让它们在舞池里找到最佳位置。准备好了吗&#xff1f;让我们开始吧&#xff01;&#x1f680; 第一步&#xff1a;数据准备 首先&#xff0c;我们要准备一些数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023