Java基础入门day35

day35

js

简介

js：JavaScript，是一种解释性语言，动态类型、弱类型的计算机语言

它的解释器被称之为JavaScript引擎，作为浏览器的一部分，广泛用于客户端脚本语言，用来给html网页增加动态功能

问题描述：

如果想要在页面上写100个重复的HelloWorld，使用html和css应该如何实现

可以使用JavaScript来实现增加动态功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=0;i<100;i++){document.write("hello world 03");};document.write("hello world 02");</script>
</head>
<body>hello world 01
</body>
</html>

基本语法

变量声明：

  • 在js中，任何变量都使用var关键字来声明，var是variable的缩写

  • js中任何变量都使用var声明，因为js是属于若类型的计算机语言

  • var是声明关键字， a是变量名，语句以分号结尾

  • 关键字不能作为变量名

var a;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var i=0;document.write("i : " + (i + 100));
​i = "abc";document.write("<br>i : " + (i + 100));             // javascript中变量的数据类型是由该变量的值来动态决定
​var j = "0";document.write("<br>j : " + (j + 100));</script>
</head>
<body>
</body>
</html>

数据类型：

基本类型：Number， String， Boolean，Undefined，Null五种

用如下语句声明一个number类型的数值a

var a = 100;

  • 在Java中，当一个变量未被初始化时，Java中对于成员变量而言是该类型的零值，对于局部变量而言，编译报错

  • 在js中，当一个变量未被初始化时，它的值为undefined

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a;
​document.write("a : " + a);</script>
</head>
<body>
</body>
</html>

引用类型：

js也可以声明对象，属性和属性值用大括号括起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var stu = {id: 9527, name: "周星星", age: 18};
​document.write("id : " + stu.id + "<br>");document.write("name : " + stu.name + "<br>");document.write("age : " + stu.age + "<br>");</script>
</head>
<body>
</body>
</html>

实际上：stu被赋值为一个json，JavaScript object notation，JavaScript对象标记，在js中，json就是用于标记一个对象 JavaScript中也由数组的概念

JavaScript中的数组和java中类似，在JavaScript中使用Array类型

json对象用来标记一个JavaScript对象，那么它同样可以标记一个数组，JSONArray

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var stus = [{id: 9527, name: "周星星", age: 18},{id: 9528, name: "秋香", age: 19},{id: 9529, name: "石榴姐", age: 20}];
​for(var i=0;i<stus.length;i++){document.write("id : " + stus[i].id + "<br>");document.write("name : " + stus[i].name + "<br>");document.write("age : " + stus[i].age + "<br>");document.write("<p />");};</script>
</head>
<body>
</body>
</html>

当前代码中stus是一个json的对象的数组

运算符

算数运算符

自增自减

逻辑运算符

关系运算符

三目运算符

分支结构

if-else

switch case

循环结构

while

do-while

for

函数

类似于Java的方法

Java中的方法：

语法：
访问修饰符 是否是静态 是否是抽象 返回值类型 方法名（数据类型 参数1， 数据类型 参数2）{方法体
}

JavaScript

语法：
function 函数名（ 参数1， 参数2）{函数体
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;border: 1px solid green;margin-left: 39%;margin-top: 10%;}input{margin-top: 30px;}</style>
​<script>function add(){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result = parseInt(num1) + parseInt(num2);document.getElementById("result").value = result;};function sub(){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result = parseInt(num1) - parseInt(num2);document.getElementById("result").value = result;}function mul(){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result = parseInt(num1) * parseInt(num2);document.getElementById("result").value = result;}function div(){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result = parseInt(num1) / parseInt(num2);document.getElementById("result").value = result;}function mod(){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result = parseInt(num1) % parseInt(num2);document.getElementById("result").value = result;}</script>
</head>
<body><div>num1: <input type="text" id="num1" /><p />num2: <input type="text" id="num2" /><p /><input type="button" value=" + " οnclick="add()" /><input type="button" value=" - " οnclick="sub()" /><input type="button" value=" * " οnclick="mul()" /><input type="button" value=" / " οnclick="div()" /><input type="button" value=" % " οnclick="mod()" /><p />result: <input type="text" id="result" /><p /></div>
</body>
</html>

五个按钮，五个事件函数，直观，但是代码冗余太多

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;border: 1px solid green;margin-left: 39%;margin-top: 10%;}input{margin-top: 30px;}</style>
​<script>function calc(op){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result ;
​switch(op){case "+":result = parseInt(num1) + parseInt(num2);break;case "-":result = parseInt(num1) - parseInt(num2);break;case "*":result = parseInt(num1) * parseInt(num2);break;case "/":result = parseInt(num1) / parseInt(num2);break;case "%":result = parseInt(num1) % parseInt(num2);break;}
​document.getElementById("result").value = result;};</script>
</head>
<body><div>num1: <input type="text" id="num1" /><p />num2: <input type="text" id="num2" /><p /><input type="button" value=" + " οnclick="calc('+')" /><input type="button" value=" - " οnclick="calc('-')" /><input type="button" value=" * " οnclick="calc('*')" /><input type="button" value=" / " οnclick="calc('/')" /><input type="button" value=" % " οnclick="calc('%')" /><p />result: <input type="text" id="result" /><p /></div>
</body>
</html>

五个按钮，调用一个函数，只需要区分运算符号即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;border: 1px solid green;margin-left: 39%;margin-top: 10%;}input{margin-top: 30px;}</style>
​<script>function calc(op){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result ;
​switch(op.value){case " + ":result = parseInt(num1) + parseInt(num2);break;case " - ":result = parseInt(num1) - parseInt(num2);break;case " * ":result = parseInt(num1) * parseInt(num2);break;case " / ":result = parseInt(num1) / parseInt(num2);break;case " % ":result = parseInt(num1) % parseInt(num2);break;}
​document.getElementById("result").value = result;};</script>
</head>
<body><div>num1: <input type="text" id="num1" /><p />num2: <input type="text" id="num2" /><p /><input type="button" value=" + " οnclick="calc(this)" /><input type="button" value=" - " οnclick="calc(this)" /><input type="button" value=" * " οnclick="calc(this)" /><input type="button" value=" / " οnclick="calc(this)" /><input type="button" value=" % " οnclick="calc(this)" /><p />result: <input type="text" id="result" /><p /></div>
</body>
</html>

js中也有this元素，代表当前控件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;border: 1px solid green;margin-left: 39%;margin-top: 10%;}input{margin-top: 30px;}</style>
​<script>function calc(op){var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;var result ;
​switch(op){case " + ":result = parseInt(num1) + parseInt(num2);break;case " - ":result = parseInt(num1) - parseInt(num2);break;case " * ":result = parseInt(num1) * parseInt(num2);break;case " / ":result = parseInt(num1) / parseInt(num2);break;case " % ":result = parseInt(num1) % parseInt(num2);break;}
​document.getElementById("result").value = result;};</script>
</head>
<body><div>num1: <input type="text" id="num1" /><p />num2: <input type="text" id="num2" /><p /><input type="button" value=" + " οnclick="calc(this.value)" /><input type="button" value=" - " οnclick="calc(this.value)" /><input type="button" value=" * " οnclick="calc(this.value)" /><input type="button" value=" / " οnclick="calc(this.value)" /><input type="button" value=" % " οnclick="calc(this.value)" /><p />result: <input type="text" id="result" /><p /></div>
</body>
</html>

区分的是五个按钮的value值，可以直接通过this关键字调用value传入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>
​document.write(hello());
​function hello(){var f = false;
​if(f){alert(123)}else{return "hello";}}</script>
</head>
<body>
</body>
</html>

这个函数在if分支中没有返回值，而在else分支中有返回值，这在Java中是不被允许的，而js可以

js中的弹框函数

alert

一个只能点击确定按钮的弹框

alert（）函数没有返回值，也就是说如果用一个变量去接收返回值，将会得到undefined结果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var h = alert(123);document.write(h);</script>
</head>
<body>
</body>
</html>

confirm弹框

一个可以点击确定和取消的弹窗

confirm和alert不同，它的返回值是boolean类型的值，当你点击了确定按钮，返回true，当你点击取消还是关闭按钮，都返回false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var h = confirm(123);document.write(h);</script>
</head>
<body>
</body>
</html>

prompt弹框，这是一个允许用户进行交互的弹框

语法结构：
prompt(p1, p2);
案例：
prompt("do u like java ?", "yes");
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var h = prompt("do u love java?", "yes!");document.write(h);</script>
</head>
<body>
</body>
</html>

事件

事件描述
onclick鼠标单击
onmouseover鼠标悬浮
onmouseout鼠标离开
onkeyup键盘
onchangehtml元素发生改变
onkeydown键盘按下
onload浏览器已经完成加载
onsubmit表单提交

dom

dom： document object model

通过html的dom模型，可以访问HTML文档中的所有元素

当网页被加载时，浏览器会自动创建页面的文档对象模型dom

dom模型被构造成对象树

通过可编程的文档对象模型，JavaScript可以获得足够的能力来创建动态的html元素

  • JavaScript能够改变页面中的所有的html元素

  • JavaScript能够改变页面中的所有的html属性

  • JavaScript能够改变页面中的所有的CSS样式

  • JavaScript能够改变页面中的所有的事件或者对于事件的不同反应

document.getElementById("num1");                //  通过id获取id为num1的元素
document.getElementsByTagName("p");             //  通过标签获取标签为p的所有的p元素
document.getElementsByClassName("colRed");      //  通过类名获取类名为colRed的所有元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>this is p1</p><p>this is p2</p><p>this is p3</p><script>var ps = document.getElementsByTagName("p");
​for(var i=0;i<ps.length;i++){ps[i].style.color = "red";ps[i].innerText = "hello saas 0" + (i + 1);};</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p class="colRed">this is p</p><span class="colRed">this is span</span><script>var ps = document.getElementsByClassName("colRed");
​for(var i=0;i<ps.length;i++){ps[i].style.color = "red";ps[i].innerText = "hello saas 0" + (i + 1);ps[i].style.fontSize = "50px";};</script>
</body>
</html>

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

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

相关文章

记录如何用php删除一段文字中的指定文字

记录如何用php删除一段文字中的指定文字

在PHP中&#xff0c;删除一段文字中的指定文字可以通过使用str_replace()函数来实现。这个函数可以替换字符串中的某些字符或字符串&#xff0c;如果你想要删除特定的文字&#xff0c;可以将它们替换为空字符串。 以下是使用str_replace()函数删除指定文字的基本语法&#xff…
阅读更多...
更新网站源码，接着打开网站上传图片后却看不到图片的原因

更新网站源码，接着打开网站上传图片后却看不到图片的原因

更新网站源码&#xff0c;然后打开网站上传图片却看不到图片的原因。 最近在修改网站源码。今天上传了一下网站源码&#xff0c;然后打开网站上传图片&#xff0c;但是图片看不到。在windows 10运行正常。初步推测是源码可能有兼容性问题&#xff0c;后来再考虑一下&#xff0…
阅读更多...
Day20-Python基础学习之正则表达式和递归(完结)

Day20-Python基础学习之正则表达式和递归(完结)

正则表达式 基础 # 正则表达式 import re ​ s "python itcast" # match 从头开始匹配 头部不匹配返回None result re.match("python", s) print(result) print(result.span()) print(result.group()) ​ # search 从开头找到结尾搜索&#xff0c;找到…
阅读更多...
阿里云直播推流和播流地址的生成方法PHP

阿里云直播推流和播流地址的生成方法PHP

最近在用阿里云的直播SDK在进行直播功能的开发,整体来说磕磕绊绊&#xff0c;因为里面有好多的东西&#xff0c;一时半会的搞不定&#xff0c;但是工期又有期限&#xff0c;所以天天熬夜&#xff0c;程序员真心不容易&#xff0c;废话不多说&#xff0c;今天分享这个主要就是来…
阅读更多...
华为机试：粮油买卖

华为机试：粮油买卖

粮油买卖 | 时间限制&#xff1a;1秒 | 内存限制&#xff1a;262144K 贩卖粮油的小华在经营一段时间后&#xff0c;发现和旁边的商贩相比&#xff0c;利润较低&#xff0c;于是开始记录3&#xff0c;4月份自己经营的粮油价格&#xff0c;以便第二年进行参考&#xff0c;请你写个…
阅读更多...
哈希表练习题

哈希表练习题

前言 本次博客将要写一写&#xff0c;哈希表的一些使用 哈希表主要是一个映射&#xff0c;比如数组就是一个哈希表 是一个整型对应另一个整型&#xff0c;介绍的哈希表还是要以写题目为例 第一题 242. 有效的字母异位词 - 力扣&#xff08;LeetCode&#xff09; 直接来看…
阅读更多...
chrome插件 脚本 使用和推荐

chrome插件 脚本 使用和推荐

chrome插件使用 在极简插件中可以进行下载并进行安装, 内部有安装教程在极简插件中搜索"油猴",下载一个油猴插件,并安装,可以用于下载很多的用户脚本用户脚本下载地址Greasy Fork,里面有很多实用的用户脚本供下载,并在油猴中进行管理 推荐的插件 Tampermonkey 篡改…
阅读更多...
小红书自动互动，建立个人品牌的秘密武器！

小红书自动互动，建立个人品牌的秘密武器！

在数字化的今天&#xff0c;个人品牌的重要性不言而喻。它不仅能让你在人群中脱颖而出&#xff0c;还能为你的事业或生意带来无尽的机会。然而&#xff0c;建立并推广个人品牌并非易事&#xff0c;需要策略、耐心和一定的工具辅助。在这里&#xff0c;我们要探讨的是如何利用小…
阅读更多...
常用路由交换协议

常用路由交换协议

常用路由交换协议 协议汇总优秀博客参考资料 协议汇总 路由协议原理优点缺点使用场景华为配置示例静态路由网络管理员手动配置路由信息配置简单&#xff0c;安全性高不适应网络变化&#xff0c;管理复杂小型网络或不常变化的环境system-viewip route-static 目的网段 掩码 下一…
阅读更多...
【Python数据库】Redis

【Python数据库】Redis

文章目录 [toc]数据插入数据查询数据更新数据删除查询存在的所有key 个人主页&#xff1a;丷从心 系列专栏&#xff1a;Python数据库 学习指南&#xff1a;Python学习指南 数据插入 from redis import Redisdef insert_data():redis_cli Redis(hostlocalhost, port6379, db…
阅读更多...
智慧健康旅居养老产业，做智慧旅居养老服务的公司

智慧健康旅居养老产业，做智慧旅居养老服务的公司

随着社会的进步和科技的飞速发展&#xff0c;传统的养老模式已经无法满足 现代老年人的多元化 需求。智慧健康旅居养老产业应运而生&#xff0c;成为了一种新型的养老模式&#xff0c;旨在为老年人提供更加舒适、便捷、安全的养老生活。随着社会的进步和人口老龄化趋势的加剧&a…
阅读更多...
MATLAB初学者入门（15）—— 随机森林

MATLAB初学者入门（15）—— 随机森林

随机森林是一种强大的机器学习方法&#xff0c;基于多个决策树的训练结果进行集成学习&#xff0c;以提高整体的预测准确性和稳定性。这种方法不仅适用于分类问题&#xff0c;也非常适合于回归问题。MATLAB中的Statistics and Machine Learning Toolbox提供了易于使用的随机森林…
阅读更多...
vue2 upload多图片上传

vue2 upload多图片上传

dom <el-upload:class"{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"class"avatar-uploader"ref"upload" action"#":limit"limitCountImg" //限制上传图片的数量:show-file-list"true" //列表展示:au…
阅读更多...
如何3分钟，快速开发一个新功能

如何3分钟，快速开发一个新功能

背景 关于为什么做这个代码生成器&#xff0c;其实主要有两点: 参与的项目中有很多分析报表需要展示给业务部门&#xff0c;公司使用的商用产品&#xff0c;或多或少有些问题&#xff0c;这部分可能是历史选型导致的&#xff0c;这里撇开不不谈&#xff1b;项目里面也有很多C…
阅读更多...
Sping源码（七）—context: component-scan标签如何扫描、加载Bean

Sping源码（七）—context: component-scan标签如何扫描、加载Bean

序言 简单回顾一下。上一篇文章介绍了从xml文件context component-scan标签的加载流程到ConfigurationClassPostProcessor的创建流程。 本篇会深入了解context component-scan标签底层做了些什么。 component-scan 早期使用Spring进行开发时&#xff0c;很多时候都是注解 标…
阅读更多...
机器人定位导读

机器人定位导读

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、机器人中常见的定位技术介绍二、gnss、rtk定位原理三、【依赖二维激光雷达与全局地图的定位算法】amcl&#xff08;蒙特卡…
阅读更多...
项目上线流程（保姆级教学）

项目上线流程（保姆级教学）

01&#xff1a;注册阿里云账户 02&#xff1a;登录阿里云 03&#xff1a;在桌面新建记事本保存个人账号密码等信息 04&#xff1a;完成重置密码 05&#xff1a;安装宝塔面板 命令行 yum install -y wget && wget -O install.sh http://download.bt.cn/install/instal…
阅读更多...
大学生在线考试|基于SprinBoot+vue的在线试题库系统系统(源码+数据库+文档)

大学生在线考试|基于SprinBoot+vue的在线试题库系统系统(源码+数据库+文档)

大学生在线考试目录 基于SprinBootvue的在线试题库系统系统 一、前言 二、系统设计 三、系统功能设计 试卷管理 试题管理 考试管理 错题本 考试记录 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#…
阅读更多...
华纳云：怎么防止租用服务器的数据丢失?

华纳云：怎么防止租用服务器的数据丢失?

要防止租用服务器上的数据丢失&#xff0c;可以采取以下一些措施&#xff1a; 定期备份数据&#xff1a;建立定期备份数据的机制&#xff0c;将重要数据备份到安全的地方&#xff0c;例如云存储服务、外部硬盘或者另一个服务器上。备份频率可以根据数据的重要性和变动频率来确定…
阅读更多...
Java数据结构堆

Java数据结构堆

堆的概念 所有元素按完全二叉树的顺序存储方式存储 在一个一维数组中。 小根堆&#xff1a;根节点的大小小于孩子节点。整棵树都是小根堆必须满足每颗子树都是小根堆。 堆的存储方式 从堆的概念可知&#xff0c;堆是一棵完全二叉树&#xff0c;因此可以层序的规则采用顺序的…
阅读更多...
最新文章

Copyright @ 2022~2023