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，一经查实，立即删除！

相关文章

哈希表练习题

哈希表练习题

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

chrome插件 脚本 使用和推荐

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

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

在数字化的今天&#xff0c;个人品牌的重要性不言而喻。它不仅能让你在人群中脱颖而出&#xff0c;还能为你的事业或生意带来无尽的机会。然而&#xff0c;建立并推广个人品牌并非易事&#xff0c;需要策略、耐心和一定的工具辅助。在这里&#xff0c;我们要探讨的是如何利用小…
阅读更多...
【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…
阅读更多...
如何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;很多时候都是注解 标…
阅读更多...
项目上线流程（保姆级教学）

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

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; 博主介绍&#…
阅读更多...
Java数据结构堆

Java数据结构堆

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

【JVM】java内存区域

目录 一、运行时数据区域 1、方法区 2、堆 3、虚拟机栈 4、本地方法栈 5、程序计数器 6、运行时常量池 二、HotSpot虚拟机的对象 1、对象的创建 指针碰撞&#xff1a; 空闲列表&#xff1a; 2、对象的内存布局 对象头 实例数据 对齐填充 3、对象的访问定位 句…
阅读更多...
git忽略文件配置 !

git忽略文件配置 !

.gitignore中!表示取反 注意&#xff0c;如果父目录被排除&#xff0c;则父目录下的子目录也会被排除&#xff0c;此时对父目录下的子目录取反也不会生效&#xff0c;比如存在目录结构&#xff0c;再.gitignore目录下配置的 /*&#xff08;排除所有文件&#xff09;&#xff0c…
阅读更多...
【LLM多模态】Qwen-VL模型结构和训练流程

【LLM多模态】Qwen-VL模型结构和训练流程

note 观点&#xff1a;现有很多多模态大模型是基于预训练&#xff08;和SFT对齐&#xff09;的语言模型&#xff0c;将视觉特征token化并对齐到语言空间中&#xff0c;利用语言模型得到多模态LLM的输出。如何设计更好的图像tokenizer以及定位语言模型在多模态LLM中的作用很重要…
阅读更多...
面试算法题之暴力求解

面试算法题之暴力求解

这里写目录标题 1 回溯1.1 思路及模板1.1 plus 排列组合子集问题1.2 例题1.2.1 全排列1.2.2 N 皇后1.2.3 N皇后问题 II1.2.4 子集 &#xff08;子集/排列问题&#xff09;1.2.4 组合(组合/子集问题)1.2.5 全排列 &#xff08;排列问题&#xff09;1.2.1做过1.2.6 子集II &#…
阅读更多...
项目十一：爬取热搜榜（小白实战级）

项目十一：爬取热搜榜（小白实战级）

首先&#xff0c;恭喜各位也恭喜自已学习爬虫基础到达圆满级&#xff0c;今后的自已python爬虫之旅会随着网络发展而不断进步。回想起来&#xff0c;我学过请求库requests模块、解析库re模块、lmxl模块到数据保存的基本应用方法&#xff0c;这一次的学习python爬虫之旅收获很多…
阅读更多...
模块三：二分——153.寻找旋转排序数组中的最小值

模块三：二分——153.寻找旋转排序数组中的最小值

文章目录 题目描述算法原理解法一&#xff1a;暴力查找解法二&#xff1a;二分查找疑问 代码实现解法一&#xff1a;暴力查找解法二&#xff1a;CJava 题目描述 题目链接&#xff1a;153.寻找旋转排序数组中的最小值 根据题目的要求时间复杂度为O(log N)可知需要使用二分查找…
阅读更多...
vue集成百度地图vue-baidu-map

vue集成百度地图vue-baidu-map

文章目录 vue集成百度地图vue-baidu-map1. Vue Baidu Map文档地址2. 设置npm数据源3. 安装vue-baidu-map4. 配置vue-baidu-map4.1 main.js全局注册4.2 vue页面设置4.3 效果 vue集成百度地图vue-baidu-map 1. Vue Baidu Map文档地址 https://dafrok.github.io/vue-baidu-map/#…
阅读更多...
Golang GMP解读

Golang GMP解读

概念梳理 1. 1 线程 通常语义中的线程&#xff0c;指的是内核级线程&#xff0c;核心点如下&#xff1a; 是操作系统最小调度单元&#xff1b;创建、销毁、调度交由内核完成&#xff0c;cpu 需完成用户态与内核态间的切换&#xff1b;可充分利用多核&#xff0c;实现并行. …
阅读更多...
Unity之圆环slider

Unity之圆环slider

一、参考文章 Unity_圆环滑动条&#xff08;圆形、弧形滑动条&#xff09;_unity弧形滑动条-CSDN博客 此滑动条拖动超过360后继续往前滑动值会从0开始&#xff0c;正常我们超过360度时不可在滑动。 二、 超过360度不可滑动问题解决 参考HTML文章制作&#xff1a; https://www.c…
阅读更多...
SpringCloud系列（15）--Eureka自我保护

SpringCloud系列（15）--Eureka自我保护

前言&#xff1a;在上一章节中我们说明了一些关于Eureka的服务发现功能&#xff0c;也用这个功能进行接口的实现&#xff0c;在本章节则介绍一些关于Eureka的自我保护 1、Eureka保护模式概述 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。默认情况…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023