javaweb03-js基础

news2024/9/30 5:35:31

文本中涉及的一些基础介绍，不是全的。只写一些最常见、最经常使用的，其他的想了解可以自行查找资料。

前言：
script引入
内部引用 script
外部引用 script:src

一、js语法

1.编写语法
（1）区分大小写，建议驼峰式命名
（2）结尾分号可有可无，建议结尾分号添加，更严谨
（3）注释：单行注释// 多行注释/* */
（4）大括号代表代码块{}

2.输出语句
（1）window.alert 写入警告框
（2）document.write  写入html输出
（3）console.log 写入浏览器控制台

3.变量 - var关键字
（1）js是弱语言，没有强类型的概念，可以赋值不同类型。比如var x = 10 后面赋值x = “aaaaa”也是可以的，一个int类型，一个string类型
（2）不能以数字开头，但支持包含数字、字母、下划线、$美元符
（3）作用域比较大，全局变量。
（4）可以重复定义。比如设置var x=10 、var x="aaaa"， 后定义的会覆盖之前的定义
（5）es6新增let和const关键字，let关键字为局部变量，且不允许重复声明。const关键字，用来声明只读变量，不能改变

注意：

var x = 2;
let x = 1;
alert(x);


像这种情况，会报错的。Uncaught SyntaxError: Identifier 'x' has already been declared

4.数据类型、运算符+类型转换、流程控制符

（1）数据类型
- 原始类型
number：整数、小数、NaN
string：字符、'字符'
boolean：布尔
null：空对象
undefined：声明的变量未初始化时
typeof：获取数据类型

注意：
typeof null返回的是Object，null针对的是对象
变量var a申明后不赋值，typeof返回的是undefined

（2）运算符+类型转换

- 运算符
算数运算符 + - * / % ++ --
赋值运算符 = += -= *= /= %=
比较运算符 > < >= <= == !=  ===全等
逻辑运算符 && || !
三元运算符 a!=null?ture:false

注意：
比较运算符-双等比较过程中会进行类型转换，如果比对类型不同，转换相同类型后在计算比较，全等不会进行类型转换

- 类型转换
字符串类型转换为数字：
如果字符串内容是纯数字，转换为字符串表面值，如果不是纯数字，从第一个数字开始记录，直到不是数字的下标值停止，如果开头第一个不是数字则是转换为NaN
其他类型转换成Boolean：
Number：0和NaN是false，其他值全部都是true
String：空字符串为false ,其他全部为true
Null和Undefined，都转换为false

（3）流程控制符
- 控制符
if else if else 
switch
for
while
do while
break
try catch finally
continue
throw

二、js函数


说明：函数（方法）执行特定任务的代码块。
通过function 关键字进行定义。
- 定义1

function add(a,b){
   return a+b;
}
var result = add(1,2);


- 定义2

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


注意：
1.方法 形参不需要定义类型、返回值不需要定义类型。因为js是弱类型语言
2.传参不做限制，可以传n个，方法体取参数申明的个数，声明2个就取前两个
3.通过函数名称直接调用

三、js对象

1.基础对象（重点只关注这3）

（1）Array
- 定义

//方式一
var arr = new Array(元素列表)
var arr = new Array(1,2,3,4)

//方式二
var arr = [元素列表]
var arr = [1,2,3,4]
 

- 访问
arr[索引] = 值
arr[10]=1

- 特点

1.长度可变
var arr =[1,2,3]
arr[10] = 50
中间未赋值的值，输出为undefined


2.类型可变
var arr =[1,2,3]
arr[8] = 'a'
arr[9] = ture
 

- 常用属性
length：返回数组中元素的数量

- 常用方法

foreach：遍历数组当中每一个”有值“的元素，并调用一次传入的函数，可以简化：箭头函数：(....)=>{....}

var arr = [1,2,34]
arr.forEach(function(a,b,c){
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
})
输出顺序 元素、下标、数组。


简化，箭头函数：(....)=>{....}
var arr = [1,2,34]
 arr.forEach((a,b,c) => {
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
});
 

push
将新元素添加到数组的末尾，并增加数组的长度

splice
从数组中删除元素。开始位置和结束位置。需要注意的是 开始位置为包容，结束位置为不包容
arr.splice(arr.length-1,arr.length)
console.log('a->',arr);
 


（2）String
一共有两种
- 定义
```
var string = new String("123")   
var string = "123123"
```

- 常见属性
  length 字符串的长度

- 常见方法
charAt 返回指定位置的字符
indexOf 检索指定字符
trim 去除字符两边位置的空格，中间不会去除
substring 字符串截取


（3）JSON
- 自定义对象
申明：
```
var 对象名称 = {
  属性名:属性值,
  属性名:属性值,
  函数名称:function(形参列表){
  alert('111111')
  }
}
```
调用：
对象名称.属性名或者属性方法

- JSON
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
常见方法：
JSON.parse(str); //json字符串转换为js对象
JSON.stringify(jsobject); //js对象转换为jSON字符串

2.浏览器对象模型
说明：BOM浏览器对象模型，他对浏览器中的各个组件进行了封装
- 组成
window 浏览器窗口对象（窗口）
navigator 浏览器对象（应用名称、版本、内核等信息 ）
screen 屏幕对象
history历史记录对象（上一步、下一步等）
location地址栏对象
其中window 和 location为重点关注对象

- window

获取：直接使用window，其中window.可以省略（window.alert \ alert）

属性：
history：对history对象的只读引用
location：用于窗口或框架的location对象
navigator：对navigator对象的只读引用
history ：对history对象的只读引用

方法：
alert

confirm：
显示带有一段消息的以及确认按钮和取消按钮的对话框。```
```
confirm('您确认删除该消息吗？') 自带确认删除， 点击确认返回true 取消false
```

setinterval：
指定周期调用某一个函数，周期性的执行，间隔时间后继续执行
```
setInterval(() => {
  alert('1111')
}, 3000);
```
setTimeout：
只调用一次，指定时间到达后调用
```
 setTimeout(() => {
        //aaaaa
}, 3000);
```

- location地址栏对象

获取：
window.location 或 location.属性

属性值：
href 设置或返回完全的UR
location.href='https://www.xxxxx.com' 设置后执行时会自动跳转到该地址

3.文档对象模型
说明：DOM文档对象模型，把每个html标签都封装成了一个对象
- DOM文档对象模型
document 整个文档对象
element 元素对象
attribute 属性对象
text 文本对象
comment 注释对象

- 通过dom和事件监听来控制网页行为，通过dom控制Html中的元素
改变html元素内容
改变html样式
对html dom事件做出反应
添加和删除html元素

-  dom 3c标准 
core dom ：所有文档类型的标准模型
xmldom ：xml文档的标准模型
html dom：html文档的标准模型

- 操作点关注

获取元素对象：通过document对象来获取

（1）通过id
```
document.getElementById('id')
```
（2）标签名称
```
document.getElementByTagName('div') 返回数组
```
（3）name属性值获取
```
document.getElementByName('name')
```
（4）class属性获取
```
document.getElementByClassName('cls')
```
操作元素对象的属性：
修改图片
```
<img id="image_lamp" src="/Users/0desktop/1111111.png" alt="" width="200px" height="150px">

var image_lamp = document.getElementById('image_lamp');
image_lamp.src = '/Users/0desktop/22222222222.png';
```
修改文字+样式
```
<div class="cls">测试文字1</div>
<div class="cls">测试文字2</div>

var clss = document.getElementsByClassName('cls');
    for (let i = 0; i < clss.length; i++) {
        const cls = clss[i];
        cls.innerHTML += "<font color='red'>追加文字</font>"
    }

```

四、js事件监听


1.常见监听
onclick 鼠标点击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完全加载
onsubmit 当表单提交时触发的事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某个元素之上
onmouseout 鼠标从某元素移开

2.事件绑定
（1）通过标签中的事件属性绑定
```
 <div id="html" class="cls" οnclick="on()">html标签绑定</div>
 function on() {
   alert('我被点击了')
 };
```
（2）通过dom元素属性绑定
```
 var img = window.document.getElementById('image1');
 img.onclick = () => {
    img.src = image2;
 };
```
（3）案例演示
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>

<body>
    <img id="image_lamp" src="/Users/0desktop/sc_20230906170036.png" alt="" width="200px" height="150px">
    <br>

    <input onclick="light()" type="button" value="点亮">
    <input onclick="nolight()" type="button" value="熄灭">
    <br>

    <input onfocus="smallLetter()" onblur="bigLetter()" type="text" value="TEST" placeholder="请输入字母" id="edit_content">
    <br>

    <input class="checkbox" type="checkbox" name="hobby" id="1">电影
    <input class="checkbox" type="checkbox" name="hobby" id="2">旅游
    <input class="checkbox" type="checkbox" name="hobby" id="3">游戏
    <br>
    <input onclick="checkAll()" type="button" value="全选">
    <input onclick="uncheckAll()" type="button" value="复选">
</body>

</html>

<script>
    var image_lamp = document.getElementById('image_lamp');
    var edit_content = document.getElementById('edit_content');
    var checkboxs = document.getElementsByClassName('checkbox');

    function light() {
        image_lamp.src = '/Users/0desktop/sc_20230906165739.png';
    }

    function nolight() {
        image_lamp.src = '/Users/0desktop/sc_20230906170036.png';
    }

    function smallLetter() {
        edit_content.value = edit_content.value.toLowerCase();
    }

    function bigLetter() {
        edit_content.value = edit_content.value.toUpperCase();
    }

    function checkAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            element.checked = true;
        }
    }

    function uncheckAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            if (element.checked) {
                element.checked = false;
            } else {
                element.checked = true;
            }
        }
    }
</script>

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

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

相关文章

达之云BI平台助力中国融通集团陕西军民服务社有限公司实现数字化运营

达之云BI平台助力中国融通集团陕西军民服务社有限公司实现数字化运营

中国融通集团陕西军民服务社是一家大型综合类零售购物中心&#xff0c;公司目前管理系统运行了10年左右&#xff0c;面临系统新零售支持发展严重滞后&#xff0c;行业主流应用落地困难&#xff0c;如线上业务、到家业务、全渠道营销、电子发票、自助收银、扫码购、无感停车、未…
阅读更多...
拦截器失效和工具类中静态变量注入失败的问题

拦截器失效和工具类中静态变量注入失败的问题

拦截器失效和工具类中静态变量注入失败的问题 文章目录 拦截器失效和工具类中静态变量注入失败的问题1.拦截器配置冲突2.路径配置错误3.关于工具类中Maper注入失效的问题解决办法1&#xff1a;手动赋值给静态变量 问题描述&#xff1a;项目中需要设置多个拦截器拦截不同路径&am…
阅读更多...
【Java实战项目】【超详细过程】—大饼的图片服务器3（ImageDao类详解）

【Java实战项目】【超详细过程】—大饼的图片服务器3（ImageDao类详解）

ImageDao详解 一、向数据库中写入图片属性1.与数据库建立连接2.创建并拼接SQL语句3.执行SQL语句4.定义异常类JavaImageServerException5.关闭数据库连接6.写入图片的完整代码 二、查找数据库中所有图片属性1.与数据库建立连接2.创建并拼接SQL语句3.执行SQL语句4.处理结果集5.关…
阅读更多...
python+django吉他乐谱推荐交流网站的实现vue

python+django吉他乐谱推荐交流网站的实现vue

而吉他乐谱推荐交流网站能很好地解决这一问题&#xff0c;轻松应对乐谱推荐&#xff0c;既能提高用户对乐谱评论&#xff0c;又能加快乐谱推荐交流网站的效率&#xff0c;取代人工管理是必然趋势。 本吉他乐谱推荐交流网站以Django作为框架&#xff0c;B/S模式以及MySql作为后台…
阅读更多...
Vue错误记录

Vue错误记录

文章目录 1. 项目build的时候报错Warning: Accessing non-existent property cat of module exports inside circular dependency2. WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not …
阅读更多...
嵌入式linux（imx6ull）下RS485接口配置

嵌入式linux（imx6ull）下RS485接口配置

接口原理图如下&#xff1a; 由原理图可知收发需要收UART_CTS引脚控制,高电平时接收&#xff0c;低电平时发送。通过查看Documentation/devicetree/bindings/serial/fsl-imx-uart.yaml和Documentation/devicetree/bindings/serial/rs485.yaml两个说明文档&#xff0c;修改设备树…
阅读更多...
Visual Stadio使用技巧

Visual Stadio使用技巧

C语言调试技巧 Debug 和 Release 的介绍 Debug&#xff1a;通常称为调试版本&#xff0c;它包含调试信息&#xff0c;并且不作任何优化&#xff0c;便于程序员调试&#xff08;可调试&#xff09;。 Release&#xff1a;通常称为发布版本&#xff0c;它往往时进行了各种优化&a…
阅读更多...
照片能做真人三维建模？

照片能做真人三维建模？

易模App开启真人手办定制以来&#xff0c;许多用户朋友在积极尝试&#xff0c;更有用户反馈了一种可以使模型成果更精致的建模方式——螺旋连拍。 螺旋连拍使用易模App人像模式自定义方法&#xff0c;上传拍好的真人照片即可AI建模&#xff0c;操作方法简单。那么如何拍摄用于建…
阅读更多...
9月5日上课内容 第一章 NoSQL之Redis配置与优化

9月5日上课内容 第一章 NoSQL之Redis配置与优化

本章结构 关系型数据库和非关系型数据库 概念介绍 ●关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是…
阅读更多...
【TSN】（一）中英译文

【TSN】（一）中英译文

【Two Stream Net】 一&#xff0c;双语翻译 文章目录 【Two Stream Net】Abstract1 Introduction1.1 Related work 2 Two-stream architecture for video recognition3 Optical flow ConvNets3.1 ConvNet input configurations3.2 Relation of the temporal ConvNet archite…
阅读更多...
数据可视化、BI和数字孪生软件：用途和特点对比

数据可视化、BI和数字孪生软件：用途和特点对比

在现代企业和科技领域&#xff0c;数据起着至关重要的作用。为了更好地管理和理解数据&#xff0c;不同类型的软件工具应运而生&#xff0c;其中包括数据可视化软件、BI&#xff08;Business Intelligence&#xff09;软件和数字孪生软件。虽然它们都涉及数据&#xff0c;但在功…
阅读更多...
制药企业设备管理常见问题和措施

制药企业设备管理常见问题和措施

制药企业的设备管理是确保生产质量和合规性的关键环节。然而&#xff0c;许多制药企业在设备管理方面面临各种常见问题。本文将探讨这些问题&#xff0c;并提供相应的措施&#xff0c;包括PreMaint设备健康管理平台的应用&#xff0c;以帮助企业改进其设备管理实践。 问题1&…
阅读更多...
Si3262 一款低功耗刷卡+触摸+mcu 三合一SOC芯片

Si3262 一款低功耗刷卡+触摸+mcu 三合一SOC芯片

Si3262是-款高度集成的低功耗soC芯片&#xff0c;其集成了基于RISC-V 核的低功耗MCU和工作在13.56MHz的非接触式读写器模块。 该芯片ACD模式下刷卡距离可达4-5cm&#xff08;天线决定&#xff09;&#xff0c;适用于智能门锁&#xff0c;电子锁&#xff0c;柜锁&#xff0c;桑拿…
阅读更多...
伪微分反馈控制(Pesudo-Drivative Feedback Control——PDF)

伪微分反馈控制(Pesudo-Drivative Feedback Control——PDF)

运动控制-单轴伺服控制带宽分析&#xff08;二&#xff09; - 知乎 (zhihu.com) 伪微分反馈控制_百度百科 (baidu.com) 伺服电机控制器的参数整定_老马过河hhh的博客-CSDN博客 伪微分PIIP控制_yukee10的博客-CSDN博客
阅读更多...
【前端】React项目初体验

【前端】React项目初体验

React介绍 React 是一个非常流行的 JavaScript 前端框架&#xff0c;它为开发人员提供了一种快速构建高质量用户界面的方式。以下是使用 React 构建项目的初体验&#xff1a; 安装 React 和相关依赖项 使用 React 开发项目需要先安装一些必需的依赖项&#xff0c;包括 Node.…
阅读更多...
人大与加拿大女王大学金融硕士——与其羡慕他人，不如充实自己

人大与加拿大女王大学金融硕士——与其羡慕他人，不如充实自己

很喜欢的一段话:“优秀的生活状态&#xff0c;不是仰望别人&#xff0c;而是把自己活成一道风景。只要自己变优秀了。其他的事情都会跟着好起来。无论何时何地&#xff0c;与其羡慕他人&#xff0c;不如花时间充实自己。”人大女王金融硕士&#xff0c;助你充实自己&#xff0c…
阅读更多...
grid弹性布局 设置宽高一致

grid弹性布局 设置宽高一致

效果图如下&#xff1a; 例子&#xff1a;设置每行四列的弹性布局&#xff0c;每个盒子宽高相同&#xff0c;间距为10px .left_list{display: grid;grid-gap: 10px 10px;grid-template-columns: repeat(4,1fr);.list_item{height: 0;padding-bottom:100%;/*高度设置为0&#…
阅读更多...
Docker部署EMQX

Docker部署EMQX

1、简介 EMQ X (Erlang/Enterprise/Elastic MQTT Broker) 是基于 Erlang/OTP 平台开发的开源物联网 MQTT 消息服务器。 Erlang/OTP是出色的软实时 (Soft-Realtime)、低延时 (Low-Latency)、分布式 (Distributed)的语言平台。 MQTT 是轻量的 (Lightweight)、发布订阅模式 (Pu…
阅读更多...
远程访问服务器JupyterLab的配置方法

远程访问服务器JupyterLab的配置方法

远程访问服务器JupyterLab的配置方法 环境及工具注意 基本步骤生成密码生成并修改配置文件后台运行jupyter后台关闭 其实就是在服务器运行JupyterLab&#xff0c;然后在本地浏览器访问 环境及工具 服务器&#xff1a;Ubuntu 16.04 本机&#xff1a; windows 11 个人使用终端神…
阅读更多...
Spring中Endpoint、HasFeatures、NamedFeature和Actuator的关系及实现原理

Spring中Endpoint、HasFeatures、NamedFeature和Actuator的关系及实现原理

文章目录 1. 关系缘由2. Actuator简介及简单使用3. Endpoint和Actuator的关系4. Endpoint和HasFeatures的关系5. Endpoint和HasFeatures原理解析5.1 Endpoint的实现原理5.2 HasFeatures的实现原理 6. 个人闲谈 1. 关系缘由 我们经常可以在Springboot中看到Endpoint注解&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023