天四学会JavaScript~Day3

昨天学习的内容

前言

       今天是国庆假期的第四天,也是我学习JavaScript的第三天。为了能够熟练语法,今天就打算用JavaScript实现一遍二叉树数据结构。然后今天还打算把Ajax和Json复习一下,再把Jquery的一些常用操作复习一下。明天就开始写前端项目,还有bootstrap和Vue框架。

今天学习的内容

二叉树数据结构(面向对象语法复习)

Ajax和Json

jQuery的使用

表单验证案例

增删查改的购物车

错误处理和调试

二叉树数据结构

       二叉树数据结构如果仅仅只是说我要遍历的话,那还是比较简单的。二叉树的遍历方法呢,我们可以使用递归来遍历,但是递归的话如果真正实践的时候还是不建议使用的。因为一旦数据量大了,采用递归容易栈溢出。当然我们还有其他遍历的方式。比如说我用栈辅助循环来遍历,比如说我可以将二叉树线索化来遍历都可以。那么今天呢,为了更好的巩固JavaScript面向对象的语法,我就想先序遍历和后序遍历使用栈辅助循环,然后中序遍历我就使用递归。两种遍历的方式都用上,更好巩固语法。

       在过去呢,我也曾写过一些数据结构的博客,这里可以列出来。

树与二叉树

二叉树遍历的四个应用案例

二叉树层次遍历

栈辅助循环遍历二叉树

数据结构的实现

 //二叉树类 function BinaryTree(){ //懒得写get set 就直接把结点放这了 this.root = null; this.left = null; this.right = null; //构造叶子结点 this.getTree = function(root){ var tree = new BinaryTree();     tree.left = null;     tree.right = null;     tree.root = root; return tree; } /**     * 先序遍历     * 这里采用栈辅助循环     * @param {Object} tree     */ this.preOrder = function(tree){ //定义一个栈 var stack = new Array(); //初始化栈 var top = -1; var p = new BinaryTree(); //根节点入栈     stack[++top] = tree; //栈空循环退出,遍历结束 while(top != -1){ //出栈并输出栈顶结点      p = stack[top--]; //使用document输出      document.write(p.root + " "); //栈是先进后出的,所以先让右孩子进去,再进左孩子 //等下出来的时候.就是左孩子先出来,右孩子后出来 //栈顶结点的右孩子存在,则右孩子入栈 if(p.right != null){       stack[++top] = p.right; } //栈顶结点左孩子存在就让左孩子入栈 if(p.left != null){       stack[++top] = p.left; } } } /**     * 中序遍历     * 这里就采用递归了     * @param {Object} tree     */ function minOrder(tree) { if(tree){ if(tree.left){ minOrder(tree.left); }      document.write(tree.root + " "); if(tree.right){ minOrder(tree.right); } } } this.inOrderTraversal = function(tree){ minOrder(tree); } /**     * 后序遍历     * 这里则又是采用栈辅助循环     * 具体的原理在(使用自定义的栈优化二叉树的遍历那篇文章有说过)     * @param {Object} tree     */ this.postOrder = function(tree){ if(tree != null){ //定义两个栈 var stack1 = new Array(); var stack2 = new Array(); var top1 = -1, top2 = -1; var p = new BinaryTree();      stack1[++top1] = tree; while(top1 != -1){       p = stack1[top1--];       stack2[++top2] = p; if(p.left != null){       stack1[++top1] = p.left; } if(p.right != null){        stack1[++top1] = p.right; } } while(top2 != -1){       p = stack2[top2--];       document.write(p.root + " "); } } } } //main 函数 function main(){ var binary = new BinaryTree(); //规划二叉树 var tree = binary.getTree('A');    tree.left = binary.getTree('B');    tree.right = binary.getTree('C');    tree.left.left = binary.getTree('D');    tree.left.right = binary.getTree('E'); //先序遍历    binary.preOrder(tree); //换行    document.writeln("<br/>"); //中序遍历    binary.inOrderTraversal(tree); //换行    document.writeln("<br/>"); //后序遍历    binary.postOrder(tree); } main(); 

Ajax和Json

       在今年六月份时候,我曾写过一篇【大话Ajax】的文章。那篇文章主要就是使用Servlet和JSP发送和接收Json格式字符串。当然SpringMVC的Responsebody注解发给后台的也是JSON格式字符串。那今天呢，就再学一遍吧~

XMLHttpRequest对象

       XMLHttpRequest 是浏览器接口对象，该对象的 API 可被JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象。

Ajax的使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest(); 

给定请求方式以及请求地址

xhr.open("get","https://www.baidu.com"); 

发送请求

xhr.send(); 

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){                     document.getElementById("span").innerHTML = xhr.readyState; alert(xhr.readyState); } } 

JSON

语法

       Json的语法可以表示三种类型的值

       简单值 : 使用JavaScript相同的语法,可以在Json中表示字符串、数值、布尔值和Null。

       对象: 对象作为一种复杂数据类型,表示的是一组无序的键值对。而每个键值对的值可以是简单值,也可以是复杂数据类型的值。

       数组: 数组也是一种复杂数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值。数值的值也可以是任意类型——简单值,对象或者数组

       在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。

Josn六种数据类型

       string：字符串，必须要用双引号引起来。

       number：数值，与JavaScript的number 一致。

       object：JavaScript的对象形式，{key:value}表示方式，可嵌套。

        array：数组，JavaScript的Array表示方式[value]，可嵌套。

        true/false：布尔类型，JavaScript 的boolean 类型。

        null：空值，JavaScript的null。

使用JSON接收数据的案例

 @GetMapping("/test") @ResponseBody public User testController(){ return new User("alvin","123456"); } 

<html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script type="text/javascript"> var xhr = new XMLHttpRequest(); //请求方式和地址             xhr.open("get","test"); //发送             xhr.send();             xhr.onreadystatechange = function () { var parse = JSON.parse(xhr.responseText); alert(parse.username + " " + parse.password);                 document.getElementById("data").innerHTML                 = parse.username + "<br/>" + parse.password; } </script> </head> <body> <span id="data"></span> </body> </html> 

jQuery

       jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装。jQuery将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。 jQuery能做的JavaScript也能做，但使用jQuery能大幅提高开发效率。

JavaScript中获取元素内容的方式

       getElementById( ) ：返回一个节点对象。
       getElementsByName( )：返回多个（节点数组）。
       getElementsByTagName( ) ：返回多个（节点数组）

jQuery选择器

基本选择器

标签选择器 $("a")

ID选择器 $("#id") $("p#id")

类选择器 $(".class") $("h2.class")

通配选择器 $("*")

并集选择器$("elem1,elem2,elem3")

后代选择器$(ul li)

父子选择器 $(ul>li)

属性选择器

[attribute] 匹配包含给定属性的元素

[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有属性不等于特定值的元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

位置选择器

针对整个页面而言的位置选择器

first 获取第一个元素

:last 获取最后一个元素

odd 匹配所有索引值为奇数的元素，从 0 开始计数

even匹配所有索引值为偶数的元素，从 0 开始计数

eq(n) 匹配一个给定索引值的元素

gt(n) 匹配所有大于给定索引值的元素

lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

first-child 匹配第一个子元素

last-child匹配最后一个子元素

only-child如果某个元素是父元素中唯一的子元素，将会被匹配

nth-child(n) :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第N个子或奇偶元素

表单选择器

关于表单项的选择器

text :password :radio :checkbox :hidden :file :submit

input 匹配所有 input, textarea, select 和 button 元素

关于表单项状态的选择器

selected :checked :enabled :disabled

hidden :visible :not

注意$("input")和$(":input")的区别

$("input")：标签选择器，只匹配input标签

$(":input")： 匹配所有 input, textarea, select 和 button 元素

jQuery操作Json案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function () {                 $.ajax({                     type:"get",                     url:"/test", //传递参数                     data:"username=alvin&password=12345",                     success:function (result) { $("#username").html(result.username); $("#password").html(result.password); } }); }) </script> </head> <body> <span id="username"></span> <span id="password"></span> </body> </html> 

表单验证案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function checkForm(){ //判断用户名是否符合验证规则 var flag1 = checkUser(); //判断邮箱是否符合验证规则 var flag2 = checkEmail(); //如果均符合验证规则，验证成功，否则验证出错 if(flag1 && flag2){ return true; }else{ return false; } } function checkUser(){ //清空上次检查的提示信息 //$("#usererror").html(""); $("#usererror").empty(); // 用户名不能为空 var user = $("#user").val(); if(user == ""){ //alert("用户名不能为空"); $("#usererror").html("用户名不能为空"); return false; } //     用户名长度大于6 if(user.length <=6){ //alert("用户名长度需要大于6"); $("#usererror").html("用户名长度需要大于6"); return false; } //     用户名中不能有数字  ad34adf for(var i=0;i<user.length;i++){ var ch = user.charAt(i); if(ch>='0' && ch<='9' ){ //alert("用户名中不能有数字"); $("#usererror").html("用户名中不能有数字"); return false; } } return true; //return undefined } function checkEmail(){ //清空上次验证邮箱的提示信息 $("#emailerror").empty(); var email = $("#email").val(); if(email.indexOf('@')<0){ //alert("邮箱中必须有@"); $("#emailerror").html("邮箱中必须有@"); return false; } if(email.indexOf('.')<0){ //alert("邮箱中必须有."); $("#emailerror").html("邮箱中必须有."); return false; } return true; } function operUser(){ $("#user").select(); //$("#user").val(""); } </script> </head> <body> <table id="center" border="0" cellspacing="0" cellpadding="0"> <form action="doRegister.jsp" method="post" name="myform" onsubmit="return checkForm()" > <tr> <td >您的姓名：</td> <td> <input id="user" type="text" onfocus="operUser()" onblur="checkUser()"/> <div id="usererror" style="display: inline;"></div> </td> </tr> <tr> <td >输入密码：</td> <td><input id="pwd" name="pwd" type="password"/></td> </tr> <tr> <td >再输入一遍密码：</td> <td><input id="repwd" type="password"/></td> </tr> <tr> <td >您的Email：</td> <td> <input id="email" type="text" onblur="checkEmail()"/> <span id="emailerror"></span> </td> </tr> <tr> <td>&nbsp;</td> <td ><input name="btn" type="submit" value="注册" class="rb1" /></td> </tr> </form> </table> </body> </html> 

购物车案例

       需求:使用jQuery实现对购物车的增删查改全选反选功能。单个选择复选框的时候如果满了,全选框也必须自动勾上。修改数量的时候数量变成文本格式,修改数量按钮自身变成确定按钮。修改的时候要检查数量是否正确。

       做这个的目的就和我写数据结构一样,主要是为了顺顺手。因为这些选择器也好还是事件也好都太多了。我不可能一个一个去背,只能说下次要用的时候看看文档可以上手。待会儿也会用到各种选择器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript"> //全选操作 $(function(){ //全选操作 $("#chks").click(function(){ //获取全选框的值,this就相当于是chks。 //prop会根据是否选中返回true和false,也可以在后面修改true和false var flag = $(this).prop("checked"); //这句话的意思是将所有input name = chk 的值都根据flag改变 //触发chks单机事件勾选了的时候flag是true,没勾选的时候就是false //所以当全选框是true的时候,下面全改成true。全选是false下面就全改成false就好了 $("input[name=chk]").prop("checked",flag); }); //为了防止复选框被一个一个点满的时候全选框没有被改变.所以这里要处理一下 //使用了该选择器后,用户每次点击复选框,都会在这里进行判断一下 $("input[name=chk]").click(judgeAll()); //反选操作 $("#fx").click(function(){ //获取所有复选框 $("input[name=chk]").each(function(){ //获取原来的值 var flag = $(this).prop("checked"); //修改相反的值 $(this).prop("checked",!flag); }) //直接调用就可以了 judgeAll(); }); /**      * 新增      */ $("#addRow").click(function(){ //创建一个 var newRow = $('<tr>'+ '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+ '<td>《c primer plus》</td>'+ '<td>Stephen Prata</td>'+ '<td>10</td>'+ '<td>'+ '<input type="button" name="aa" id="" value="修改数量" οnclick="updateAmount(this)"/>'+ '<input type="button" name="" id="" value="删除" οnclick="delRow(this)"/>'+ '</td>'+ '</tr>'); //====================================== //这里用到了位置选择器,last是最后一个。如果要放在第一个就用first $("tr:last").after(newRow); }); /**      * 多行删除      */ //这个对应的是横着那一排的删除id。不是单独删除的那个单击事件 $("#delRow").click(function(){ //获取所有被选中的复选框 var toDelArr = $("input[name=chk]:checked"); //先判断是否选择,如果没选就提示 if(toDelArr.length == 0){ alert("至少选中一行"); }else{ //toDelArr.remove();是反面教材,因为刚刚只是获得复选框。直接删自然也只会删掉复选框 //toDelArr.parent().remove();也不行,因为它只会删掉当前的td。要想删掉tr需要两个parent //toDelArr.parent().parent().remove(); 这种写法虽然可以但是也太麻烦了 //最好的写法还是这种。parents里面一定要写东西。不然整个页面都删掉了。。。       toDelArr.parents("tr").remove(); } }); /**      * 复制多行      */ $("#copyRow").click(function(){ //获取所有被选中的复选框 var toCopyArr = $("input[name=chk]:checked"); //先判断是否选择,如果没选就提示 if(toCopyArr.length == 0){ alert("至少选中一行"); }else{ //each是在循环,所以循环里面一个一个加就相当于多行增加       toCopyArr.each(function(){ //复制一份 var cloneRow = $(this).parents("tr").clone(); //粘贴一份 $("#ta").append(cloneRow); }); } }); }) /**     * 为了让反选和普通选择都进行判断并且代码不用重复写     * 所以这里就封装成一个函数让它们调用     */ function judgeAll(){ //获取所有的复选框 var arr = $("input[name=chk]"); //先默认全部选中 var flag = true; //arr.each就相当于是在循环遍历     arr.each(function(){ //判断所有复选框是否被选中 var flagplus = $(this).prop("checked"); //假如有一个没被选中,那么全选框就是false if(flagplus == false){       flag = false; return; } }); //决定全选框的值 $("input[name=chks]").prop("checked",flag); } /**     * 修改当前数量     */ function updateAmount(obj){ //数量变成文本框的值,文本框变成数量的值 //获取原来的数量   prev是指修改数量的前面一个表格。不然就会把自己变成下面input的格式 //如果要把input格式换成作者那个位置,可以用两个prev()试试 var amountCell = $(obj).parent().prev(); var amount =  amountCell.html(); //将指定位置的td改成input文本格式      amountCell.html('<input type="text" value = "'+ amount +'" οnblur="checkAmount(this)"/>'); //把修改按钮变成确定按钮 //获得当前按钮单元格 var buttonCell = $(obj).parent(); //准备新按钮 var newButton = $('<input type="button" name="" id="" value="确定" οnclick="confirmAmount(this)"/>'+ '<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />'); //添加新按钮      buttonCell.html(newButton); } /**     * 确定数量     * @param {Object} obj     */ function confirmAmount(obj){ //文本框变成数量 //获取原来的数量  var amountInput = $(obj).parent().prev().find("input"); var amount = amountInput.val(); //修改文本框的数量 $(obj).parent().prev().html(amount); //确定按钮变成修改按钮 //获得当前按钮单元格 var buttonCell = $(obj).parent(); //准备新按钮 var newButton = $('<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>'+ '<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />'); //添加新按钮      buttonCell.html(newButton); } //判断数量是否正确 function checkAmount(obj){ //获取值 var amount = $(obj).val(); //判断是否正确 if(isNaN(amount) || amount < 1 || parseInt(amount) != amount){ alert("必须是大于0的整数!"); } } /**     * 删除当前行     */ function delRow(obj){ //这里就是一句话解决了。。。 $(obj).parents("tr").remove(); } </script> </head> <body> <h3>购物车</h3> <hr /> <input type="button" id="fx" value="反选" /> <input type="button" id="addRow" value="新增一行" /> <input type="button" id="delRow" value="删除行"/> <input type="button" id="copyRow" value="复制行" /> <table border="1px" cellpadding="10px" cellspacing="0" id="ta"> <tr> <td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td> <td width="200px">书名</td> <td width="200px">作者</td> <td width="200px">数量</td> <td width="200px">操作</td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="2"/></td> <td>《计算机组成原理》</td> <td>Alan Clements</td> <td>10</td> <td> <input type="button" name="aa" id="" value="修改数量" onclick="updateAmount(this)"/> <input type="button" name="" id="" value="删除" onclick="delRow(this)"/> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="3" /></td> <td>《深入理解计算机系统》</td> <td>布赖恩特</td> <td>10</td> <td> <input type="button" name="" id="" value="修改数量" onclick="updateAmount(this)"/> <input type="button" name="" id="" value="删除" onclick="delRow(this)" /> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="4" /></td> <td>《编译原理》</td> <td>Alfred V．Aho</td> <td>30</td> <td>      <input type="button" name="" id="" value="修改数量"οnclick="updateAmount(this)"/>      <input type="button" name="" id="" value="删除" onclick="delRow(this)"/> </td> </tr> </table> </body> </html> 

错误处理和调试

       由于JavaScript本身是动态语言,而且这么多年来也没有一个固定的开发工具。事实上,你就是新建一个记事本,也可以写JavaScript代码然后放浏览器上运行。不同的浏览器自然对JavaScript的编译支持等都不太相同。今天就来学习一下前端的调试问题。至于try catch的话,明天写代码的时候再用两遍就熟了吧~

       现在我就随便打开一个SpringBoot的项目去运行。然后按F12打开浏览器的控制台,这里是用谷歌浏览器。其实学Web开发是比较建议用谷歌或者火狐的。按F12之后进入调试页面就会看到很多选项

Elements(元素)

       这个页面显示的都是后台html代码,如果想要定位到某个位置可以右键检查,就自然跳过来了。

Console(控制台)

       这个界面会显示控制台的信息,比如代码报错了…或者console.log()等可以把内容输出到这里。就跟平时写Java代码IDEA或者eclipse下面的控制台差不多。

Sources(资料来源)

       点击它可以看到后台代码的文件信息

Network

       Network可以查看当前url的请求内容,请求状态等信息,还可以分析网络状态

       工具打开之后,点击network,就可以查看当前网络录制情况,默认是开启网络录制的,查看图中圈中的部分,判断是否开启了网络录制,红色代表正在录制,点击之后关闭,变为灰色,那就是停止录制

选择XHR更是可以直接找到后台接口甚至查看Json。Preview就可以看到Json

       好了,今天差不多先学到这。明天是计划先用HTML+CSS+JavaScript做个纯底层的案例。接着再学习bootstrap和vue。好好加油!