Java学习 day37_JSDOM
1 JavaScript
Js: JavaScript
HTML
CSS
1.1 特点
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript是一种弱类型语言 它的解释器被称为JavaScript引擎,为浏览器的一部分: js是浏览器运行的, 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
跨平台特性:在绝大多数浏览器的支持下。
轻量级: html css js
重量级: Java C++
区分轻量级和重量级主要看语言的生态
弱类型: 类型限制不严格(字面意思)
1.2 怎么在HTML中导入JS
1.2.1 直接写在HTML页面内部
写在html页面内部, 用script标签包裹js代码
1.2.2 引入外部的js文件
用Script导入外部文件
以前: 要求写在head标签的里面
现在: 不这么要求
1.3 Var
JavaScript在声明时统一使用无类型(untyped)的“var”关键字
var来声明一个变量,这是一个固定的写法,是js的语法。
JavaScript并没有避开数据类型,它的数据类型是根据所赋值的类型来确定的。 JavaScript 对大小写敏感 变量名有命名规范: 只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字
ECMAScript 是 javascript的版本
ECMAScript 6 – > Es6
Es6: 2015 的js版本
Es6之前: 只有Var关键字
Es6之后: 新加了一些, let:用于局部作用域 const: 一旦定义不可修改
1.4 Js的类型
String var str=‘123s’;Number var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写 在js中只要是个数,那么就是数值型的,无论整浮、无论大小、无论正负,都是number类型的 Boolean var x=true var y=false 数组 var cars=new Array(); cars[0]="Audi"; var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"];对象 var person={ firstname:"Bill", lastname:"Gates", id:5566}; 获取参数 name=person.lastname; name=person["lastname"]; 添加参数并赋值 person.aaa = 'aaaa’
// 注意:
var person={firstname:"Bill", lastname:"Gates", id:5566};
var b = person
b.lastname = 'b'
console.log(b) // 结果: lastname为b
console.log(person) // 结果: lastname为b
//说明引用也适用
1.5 函数和事件
HTML: 主要特点, 通过标签的嵌套来描述页面的层级结构
CSS: 通过样式, 描述HTML标签所具有的不同显示效果
Js: 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
1.6 运算符
运算符 +,-,*,/,%,++,-- =, +=, -=, *=, /=, %= 注意: 加法: 20+10+'20’ 减法 ‘30’-‘10’
!=, > , <, >=, <=, ? 三元 && , ||, !
注意: == 值相等 === 值相等并且类型相等 !== 值不相等或类型不相等
1.7 分支/循环语句
If:
// 有些值在分支语句中, 是表现为假: 0, 空串, 空对象, null, NaN, false
1.7.1 For
在js中, 一般我们使用普通的for循环 (fori) 遍历数组
在js中, 一般我们使用foreach循环遍历对象
2 Js的核心对象
2.1 Number
toString() 以字符串返回数值
var ii = 123
console.log(typeof ii)
console.log(typeof ii.toString())
toFixed() 返回字符串值,它包含了指定位数小数的数字(四舍五入):
var x = 9.6544;
x.toFixed(2); // 返回 9.65
toPrecision() 返回字符串值,它包含了指定长度的数字:
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
MAX_VALUE 返回 JavaScript 中的最大数字。
var x = Number.MAX_VALUE;
MIN_VALUE 返回 JavaScript 中的最小数字。
var x = Number.MIN_VALUE;
parseInt() 方法 允许空格。
只返回首个数字:
parseInt(“10”); // 返回 10
parseFloat() 方法。 允许空格。
只返回首个数字:
parseFloat(“10.33”); // 返回 10.33
2.2 String
length 属性返回字符串的长度
var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;
indexOf()方法返回字符串中指定文本首次出现的索引(位置):
var str = “The full name of China is the People’s Republic of China.”;
var pos = str.indexOf(“China”);
var pos = str.indexOf(“China”, 28);
indexOf() 不存在返回 -1。
(比较有用) slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
var str = “Apple, Banana, Mango”;
var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
split() 将字符串转换为数组
var txt = “a,b,c,d,e”; // 字符串
\txt.split(","); // 用逗号分隔
txt.split(" “); // 用空格分隔
txt.split(”|"); // 用竖线分隔 如果分隔符是 “”,被返回的数组将是间隔单个字符的数组:
2.3 Array
toString() 返回数组转换的数组值(逗号分隔)的字符串。
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
alert(fruits.toString()); //Banana,Orange,Apple,Mango
pop() 方法从数组中删除最后一个元素,返回删除的元素
fruits.pop(); // 从 fruits 删除最后一个元素(“Mango”)
var x = fruits.pop(); // x 的值是 “Mango”
push() 方法(在数组结尾处)
向数组添加一个新的元素,返回数组长度
fruits.push(“Kiwi”); // 向 fruits 添加一个新元素
splice() 方法可用于向数组添加新项, 返回([])
fruits.splice(2, 0, “Lemon”, “Kiwi”);
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组 fruits.sort(); // 对 fruits 中的元素进行排序 r
everse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组 fruits. reverse(); // 对 fruits 中的元素进行排序
2.4 Math
Math.ceil(x)返回大于等于x的最小整数
Math.floor(x)返回小于等于x的最大整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.round(x) 把一个数四舍五入为最接近的整数。
Math.max(x,y,z,…,n) 返回最高值
Math.min(x,y,z,…,n) 返回最低值
我们讲了Js基础中的基础语法
Js高级语法
Es6语法
Js方向,
Js: 现在不要瞎搞
后端开发 --> node
前端 --> vue, react, Angular
手机app --> flutter week reactnative
Pc --> electron
小程序 --> 原生开发, uni-app多端开发
3 DOM
DOM: js一个分支
文档对象模型(document object model )。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:DOM Tree
3.1 Dom的概念
dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点 注释是注释节点
在节点树中,顶端节点被称为根(root) 每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子节点 父、子 和同胞(兄弟或姐妹)节点。
同胞是拥有相同父节点的结点
3.2 DOM的解析顺序:
1, 一个页面是怎么获得的?
A, 浏览器根据url(超链接/ 手输/ form表单)发起请求, 域名–>ip
B, 根据这个ip找到对应服务器, (80 443)
C, 服务器接收请求, 分析请求, 获取数据(数据库), 找到对应的前端文件,
把数据整理, 把整理好的数据放到前端文件里面 --> 带数据的前端文件(html css js相关代码)
D, 服务器把带数据的页面, 返回给浏览器
E, 浏览器拿到页面代码 , 解析
如果浏览器拿到一份HTML代码, 解析过程如下
解析HTML结构(从上向下的过程)。 开始构造HTML DOM模型
在解析的过程中(代码一句一句读取), 加载外部脚本和样式表文件。(因为这个html页面可能依赖于外部的js,css 文件, 异步发网络请求获取这个外部文件)
加载外部脚本成功, 解析并执行脚本代码。
构造HTML DOM模型—完成。 --> 只要dom模型构建完成, 页面就开始显示了
加载图片等外部文件。 页面加载完毕。
3.3 获得Dom上的节点
getElementById()
getElementsByName()
getElementsByTagName() // 通过标签名来获得节点
3.4 给Dom添加结点:
appendChild
<body>
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputStr"><button onclick="addli()">点击</button><script>function addli() {var inputNode = document.getElementById("inputStr");var ulNode = document.getElementById("ul1");var textNode = document.createTextNode(inputNode.value)var liNode = document.createElement("li")liNode.append(textNode)ulNode.append(liNode)inputNode.value = ""}</script></body>
3.5 删除结点
removeChild
<body>
<!-- 在html中 连续的空格和换行 都代表一个空格 -->
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputStr">
<button onclick="deleteli()">点击</button><script>function deleteli() {var inputNode = document.getElementById("inputStr")var index = inputNode.value // 要删除节点的下标console.log(index)var ulNode = document.getElementById("ul1")// 获得所有的ulNode的孩子var childNode = ulNode.childNodes;ulNode.removeChild(childNode[index-1])}
</script></body>
3.6 替换节点
replaceChild
<body>
<ul id="ul1"><li>John</li><li>Aray</li><li>Sansa</li>
</ul><input id="inputTag">
<input id="inputStr">
<button onclick="changeNode()">点击</button>
<script>function changeNode() {var inputNode1 = document.getElementById("inputTag")var index = inputNode1.valuevar inputNode2 = document.getElementById("inputStr")var content = inputNode2.valueif (!parseInt(index)){alert("非数字下标")return}var ulNode = document.getElementById("ul1")var childNodes = ulNode.childNodes;if (index >= childNodes.length){alert("下标错误")return}// 找到要替换的li结点var li = childNodes[index-1]// 文本节点var newNode = document.createTextNode(content)// 给li结点替换孩子// 第一个参数: 新结点// 第二个参数: 旧结点// li.replaceChild(newNode, li.childNodes[0])// 可以不用replace,直接改变文本内容也可以实现li.innerText = contentinputNode1.value = ""inputNode2.value = ""}
</script></body>
3.7 Inner
innerText&innerHTML
作业
1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sign in</title>
</head>
<body>
<!-- cellspacing : 单元格之间的空隙
cellpadding:到边框到空隙-->
<table cellspacing="10"><tr><td>注册邮箱: </td><td><input></td></tr><tr><td></td><td>你还可以手机注册</td></tr><tr><td>创建密码: </td><td><input type="password"></td></tr><tr><td>真实姓名: </td><td><input></td></tr><tr><td align="right">性别: </td><td><input type="radio" name="gender">男<input type="radio" name="gender">女</td></tr><tr><td align="right">生日: </td><td><select id="year" onchange="getdate()"></select>年<select id="month" onchange="getdate()"></select>月<select id="day" onchange="getdate()"></select>日</td></tr><tr><td align="right">我正在: </td><td><select><option>睡觉</option><option>学习</option><option>打游戏</option><option>拯救世界</option><option>变成光</option></select></td></tr><tr><td></td><td><img id="img1" src="verycode.gif" width="150px" height="60px"> <span onclick="changeImg()">看不清楚,换一张</span></td></tr><tr><td>验证码: </td><td><input id = "input1"></td></tr><tr><td></td><td><img src="btn_reg.gif" onclick="verify()" width="180px" height="40px"></td></tr><script>initdate()function initdate(){var yearNode = document.getElementById("year");for (var i = 2021; i >= 1900 ; i--) {//创建option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(i))yearNode.appendChild(optionNode)}var monthNode = document.getElementById("month")for (var i = 1; i <= 12; i++) {var str = ""if (i < 10){str = "0" + i}else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))monthNode.appendChild(optionNode)}var dayNode = document.getElementById("day")for (var i = 1; i <= 31; i++) {var str = ""if (i < 10){str = "0" + i}else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}}function getdate() {var year = document.getElementById("year").valuevar m = document.getElementById("month").valueif (m == "01" || m == "03" || m == "05" || m == "07" || m == "08" || m == "10" || m == "12") {// 31天var dayNode = document.getElementById("day")//先清空dayNode.innerText = ""for (var i = 1; i <= 31; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else if (m == "04" || m == "06" || m == "09" || m == "11") {// 30天var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 30; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else {//2月份的情况if (year % 4 == 0 && year % 100 != 0 || year % 400==0) {var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 29; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}} else {var dayNode = document.getElementById("day")dayNode.innerText = ""for (var i = 1; i <= 28; i++) {var str = ""if (i < 10) {str = "0" + i} else {str = i}// 创建一个option标签var optionNode = document.createElement("option")optionNode.appendChild(document.createTextNode(str))dayNode.appendChild(optionNode)}}}}var imgs = ["1111.png", "1234.png", "2222.png", "3333.png", "4567.png"]var code = [ "1111", "1234", "2222", "3333", "4567"]var origin = -1;function changeImg() {var imgNode = document.getElementById("img1")while (true){var index = Math.floor(Math.random()*imgs.length);var getImg = imgs[index]if(origin != index) {origin = index;break;}}imgNode.src = getImg}function verify() {var inputCode = document.getElementById("input1")if(origin == -1){if (inputstr == "BnKsU"){alert("验证码正确")}else {alert("验证码错误")}return}if(inputCode.value == code[origin]){alert("验证成功!")}else {alert("验证失败")}}</script></table></body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.cell1{text-align: center;}.div1{margin-left: 300px;margin-bottom: 3px;}.div2{margin-left: 300px;}td{text-align: center;height: 30px;width: 200px;}select, button{height: 30px;}</style>
</head>
<body><div class="div1"><select id="select1" onchange="display()"><option>美元</option><option>欧元</option><option>日元</option><option>港元</option><option>韩元</option><option>比特币</option></select><button onclick="exchange()">互换</button><select id="select2" onchange="display()"><option>美元</option><option>欧元</option><option>日元</option><option>港元</option><option>韩元</option><option>比特币</option></select>数额:<input width="170px" id="mount"><button onclick="calculate()">汇率转换</button></div><div class="div2"><table class="table" border="1px"><tr><td class="cell1" bgcolor="red" colspan="3">按当前汇率兑换结果</td></tr><tr><td id="currency1"></td><td>汇率</td><td id="currency2"></td></tr><tr><td id="td1"></td><td id="td2"></td><td id="td3"></td></tr></table>
</div><script>var listRate = [1, 0.9, 100, 8, 1000, 0.000016]var listMoney = ['美元', '欧元', '日元', '港元', '韩元', '比特币']function exchange() {var currency1 = document.getElementById("select1")var tmp = currency1.valuevar currency2 = document.getElementById("select2")currency1.value = currency2.valuecurrency2.value = tmp}function display() {var currency1 = document.getElementById("select1")var name1 = currency1.valuevar currency2 = document.getElementById("select2")var name2 = currency2.valuedocument.getElementById("currency1").innerText = name1document.getElementById("currency2").innerText = name2var index1 = listMoney.indexOf(name1)var index2 = listMoney.indexOf(name2)var rate = listRate[index2] / listRate[index1]document.getElementById("td2").innerText = rate}function calculate() {var currency1 = document.getElementById("select1")var name1 = currency1.valuevar currency2 = document.getElementById("select2")var name2 = currency2.valuevar index1 = listMoney.indexOf(name1)var index2 = listMoney.indexOf(name2)document.getElementById("currency1").innerText = name1document.getElementById("currency2").innerText = name2var rate = listRate[index2] / listRate[index1]var mount1 = document.getElementById("mount").valuedocument.getElementById("td1").innerText = mount1//document.getElementById("td2").innerText = ratedocument.getElementById("td3").innerText = rate * mount1}</script></body>
</html>
Java学习 day37_JSDOM相关推荐
- Java学习路线图,如何学习Java事半功倍?
作为一个初学者想掌握Java并不是很容易,Java本身是具有一定难度的,虽然说兴趣这东西可以让我们学习不累,但是有多少人学习是因为兴趣,或者有多少人知道自己的兴趣在哪?所以我很明确的告诉你学习这事本来 ...
- Java学习必不可少的网站,快收藏起来
java技术在IT互联网行业的发展前景一直在提升,越来越多的人都在学习java技术,今天小编来给大家提供一些学习Java的网站集合,希望能够帮助到正在学习java技术的同学. Java学习必不可少的网 ...
- 分享五款java学习辅助工具,总有你用的上的~
想要学好java技术,除了自身的努力,辅助工具也不缺少,辅助工具可以帮助大家在今后的工作中可以提高工作效率,下面小编就来分享五款java学习辅助工具,总有你用的上的~ 五款java学习辅助工具: 1. ...
- Java学习从入门到精通的学习建议
想要学好java技术,首先打好基础很重要,不论学什么基础都是重中之重,学习Java更是如此.如:基础语法.核心类库.面向对象编程.异常.集合.IO流等基础如果学不好,那么后边更深入的语法也不容易学会. ...
- java学习笔记11--Annotation
java学习笔记11--Annotation Annotation:在JDK1.5之后增加的一个新特性,这种特性被称为元数据特性,在JDK1.5之后称为注释,即:使用注释的方式加入一些程序的信息. j ...
- java学习笔记13--反射机制与动态代理
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note13.html,转载请注明源地址. Java的反射机制 在Java运行时环境中,对于任意 ...
- JAVA学习资源网站
中文java技术网--http://www.cn-java.com/ 灰狐动力(http://www.huihoo.com/)-- 该站点有许多的开源的项目的介绍和学习,涉及操作系统,数据库等许多方向 ...
- 我的WEB之路(一)-2.JAVA学习路线
第一阶段:针对性夯实JAVA基础 课程名称 核心要点 完成目标 Java基础入门 搭建Java开发和运行环境等,IDE工具的学习和使用,Java语言基础,数据类型,运算符,条件和循环,数组使用等,Ja ...
- 准备写java学习笔记
准备写java学习笔记 java int 转载于:https://blog.51cto.com/cryingcloud/1975267
最新文章
- 百度前端技术学院html任务,重回百度前端技术学院第一天 HTML复习
- 计算机系统结构结构相关实验报告,计算机系统结构实验报告(中南民族大学).doc...
- Apache JMeter 测试webservice接口
- 【UML】交互建模中交互图允许的消息类型
- 终端启动service和activity
- 张朝阳直播做饭上演“吃播”,“Charles的好物分享”探索带货形式新边界
- VB 更换设置桌面背景图片函数
- Google Jump Consistent Hash 一致性哈希算法
- 计算机基础的算法思想
- JAVA 服务端模拟客户端请求http/https
- Android ImageSwitcher 配合Picasso解决内存溢出(OOM)问题
- 社交媒体与社会网络分析,深度解读社交网络营销
- 智能合约漏洞检测工具mythril使用
- 九份的小巷 特色的民宿
- hdu 6438 - 贪心
- 鸟哥的linux私房菜-基础学习篇 读书笔记
- vue的基础知识-vue基础入门
- 视频格式转换器下载哪个好?分享:3种TS到MP4的转换器
- 广州集体户口办理未婚证流程
- 使用Dev C++运行c语言代码时碰到Failed to executeC:\c++.cpp: Error 0 :操作成功完成
热门文章
- day32 Python与金融量化分析(二)
- RocketMQ集群部署方案(DLedger)
- iOS 颜色选择器(比较两种)
- 山西大学计算机考研拟录取,山西大学2019年硕士研究生拟录取名单(一)公示的通知...
- 开发一个循环 5 次计算的小游戏, 设置随机种子为10,每次随机产生两个 1~10的数字以及随机选择
- 易语言调用大漠实现《剑侠情缘》后台喊话器制作
- Mirai 僵尸网络解释:青少年诈骗者和闭路电视摄像机如何几乎让互联网瘫痪
- SHELL 数组遍历问题
- 四天四夜,与时间赛跑,致敬电赛
- GD32F303 Keil 工程项目搭建