Java学习的第十七天：JavaScript的第三天：JSON，面向对象编程，操作BOM对象，操作表单：
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。简单来说：json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示
对象都用： {}
数组都用：{}
所有的键值对都用： Key：value
JSON字符串和js对象的转化。
var use={
name:'laoda',
age:18,
sex:'nan'
}
// 对象转化为json字符串{"name":"laoda","age":18,"sex":"nan"}
var user= JSON.stringify(use)
// json字符串转化为对象，参数为JSON字符串
var jsonuser=JSON.parse({"name":"laoda","age":18,"sex":"nan"})
很多人搞不清楚，JSON和JS对象啊的区别；
面向对象编程
什么是面向对象：
JavaScript， java，c#。。。。面向对象： JavaScript有一些区别！
类：模板
对象： 具体的实例：
在JavaScript这个需要大家换一下思维方式：
class继承
关键字：constructor
定义一个类：
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert("dsadas")
alert('hello')
}
}
class xiaoStudent extends Student{
constructor(name,ggg) {
super(name);
this.ggg=ggg;
}
Ggg(){
alert('我是一名小学生')
}
}
// var xiao=new Student('daxiaong')
var xiao2=new xiaoStudent("asdas")
操作BOM对象（重点）
BOM：浏览器对象模型
JavaScript和浏览器有什么关系：
JavaScript诞生就是为了能够让他在浏览器中运行：
BOM：浏览器对象模型
IE 6···11
Chrome
Safari
FireFOx
三方浏览器： QQ浏览器：
360浏览器：
window
window代表 浏览器窗口：
window.innerHeight
450
window.innerWidth
75
window.alert(22)
Navigator
location(重要)
代表的是当前网页的URL信息：
document
代表的是当前的页面
HTMl DOm文档树
document.title='asda'
//修改最标题头的名字
<dl id="zg">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var as=document.getElementById('zg')
</script>
document.cookie
获取cookie
document.cookie
操作Dom对象（重点）
DOM：文档
更新： 更新Dom节点：
遍历don节点：得到Dom几节点：
删除：删除一个DOm节点：
添加：添加一个新的节点：
要操作一个Dom几节点：就需要先获得这个Dom节点：
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<p>p3</p>
</div>
<script>
<!--对应CSS的选择器-->
var h1= document.getElementsByTagName('h1');
var p1= document.getElementById('p1');
var p2= document.getElementsByClassName('p2');
var father=document.getElementById('father')
var child=father.children;
</script>
更新节点：
<div id="id1">
</div>
<script>
var id2=document.getElementById('id1')
</script>
操作文本
p1.innerText='中国你好'
"中国你好"
操作js
p1.style.color='red'
"red"
id2.style.fontSize='40px'
"40px"
删除节点：
删除节点的步骤：
先获取父节点：
下面的这个操作就是将p1这个属性的值给删除掉了。
并且下面所使用到的方法是先将父类的这个属性选择好了，在删除他的子类就可以了。
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<p>p3</p>
</div>
father.removeChild(p1)
<p id=•"p1" style=•"font-size:• 40px;• color:• red;•">•中国你好•</p>•
插入节点：
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过iinnerHTML 就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能怎么干了；会产生覆盖
操作表单：（验证）
表单是什么：form DOM 树：
文本框：text
下拉框：select 单选框：radio
多选框：check box
隐藏框：hidden
密码框：password
表单的目的：获得提交的信息：
md5在线链接
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="post">
<p>
<span>用户名:</span> <input type="text" id="username"/>
</p>
<p>
<span>密码：</span> <input type="password" id="userpassword">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy_radio">男
<input type="radio" name="sex" value="woman" id="girl_radio">女
</p>
</form>
<script>
<!-- 使用 user1.value 就可以得到里面的值-->
var user1=document.getElementById('username')
var user2=document.getElementById('userpassword')
// 对于单选框 sex1.value 就只能得到里面的一个值：
var sex1=document.getElementById('boy_radio')
var sex2=document.getElementById('girl_radio')
//而正常的操作就是 使用： sex1.checked; //并且是查看里面的返回值，如果返回值是等于true 就是选到的这个值
// 如果放回的是false 就不是选的这个值，选的是其他的值，
</script>
提交表单：
<form action="#" method="post">
<p>
<span>用户名:</span> <input type="text" id="username" name="username"/>
</p>
<p>
<span>密 码: </span><input type="password" id="password" name="password"/>
</p>
<p>
<button type="submit" onclick="asd()">提交</button>
<!-- <input type="submit" value="点击就是提交" id="tijiao"/>-->
</p>
</form>
<!--
表单绑定事件：
onsubmit 绑定一个提交检查的函数 如果返回的值是 true 则就执行action里面所发出的网址，如果放回的是 false 就不去执行里面
所方法
-->
<form action="https://www.baidu.com" method="post" onsubmit="return asd1()">
<p>
<span>用户名:</span> <input type="text" id="username1" name="username"/>
</p>
<p>
<span>密 码: </span><input type="password" id="password1"/>
</p>
<input type="hidden" id="md5_password" name="password" >
<p>
<button type="submit" onclick="asd1()">提交</button>
<!-- <input type="submit" value="点击就是提交" id="tijiao"/>-->
</p>
</form>
<script>
function asd() {
var username1= document.getElementById('username');
var password1= document.getElementById('password');
password1.value=md5(password1) //这里的这句话的意思就是给密码给转化位MD5的格式 让别人看不见：
console.log(username1.