JavaWeb学习 JavaScript语法快速学习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script language="javascript">//String str = "Hello JavaScript"; Java的声明语法/*var str = "Hello JavaScript";alert(typeof str);str = 99999;alert(typeof str);*/var person = new Object();person.pid="p001";person.name="基础乐理";alert(person.pid+"_"+person.name);/*public String hello(String name){return "hello to"+name;}*/function hello(num1,num2,name){//window.argments 数组if(num1>num2){return "hello to"+name}else{alert("HELLO")}}hello();hell(1);hell(1,2);hell(1,2,"jim");hell(1,2,3,4,5,"hello");
</script>
</head>
<body></body>
</html><!--
JavaScript：客户端的一个脚本语言
js是一门弱类型的语言,变量的数据类型又后面赋的值的类型决定
-->

CSS JS HTML分离语法

<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="demo01.css"><script type="text/javascript" src="dem o1.js"></script>
</head>
<body>
<div id="div_container"><div id="div_fruit_list"><table id="tbl_fruit"><tr><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th>操作</th></tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>西瓜</td><td>3</td><td>20</td><td>60</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>菠萝</td><td>4</td><td>25</td><td>100</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>榴莲</td><td>3</td><td>30</td><td>90</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>总计</td><td colspan="4">999</td></tr></table></div>
</div>
</body>
</html>

window.onload=function(){//绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tbl_fruit")//获取表格中所有的行var rows = fruitTbl.rows;for(var i =0;i<rows.length;i++){var tr = rows[i];//绑定鼠标悬浮设置背景颜色事件(包括离开)tr.onmouseover=showBGColor;//绑定并非执行tr.onmouseout=clearBGColor;//绑定并非执行//获取tr这一行的所有单元格var cells = tr.cells;var priceTD = cells[1];//绑定鼠标悬浮在单价单元格变手势的事件priceTD.onmouseover = showHand;}
}
//当鼠标炫富时显示背景颜色
function showBGColor(){//当前发生的事件//event.srcElement 事件源//alert( event.srcElement);//alert(event.srcElement.tagName);//事件传递if(event && event.srcElement&&event.srcElement.tagName=="TD"){var td = event.srcElement;//表示获取td的父元素->trvar tr = td.parentElement;//如果想要通过js代码设置某节点的样式，则需要加上.style；tr.styletr.style.backgroundColor = "navy";//tr.cells表示获取这个tr中的所有单元格var tds = tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color ="white";}}
}
//当鼠标离开时，恢复原始样式
function clearBGColor(){if(event&&event.srcElement&&event.srcElement.tagName=="TD"){var td = event.srcElement;var tr = td.parentElement;tr.style.backgroundColor="transparent";var tds = tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color="darkorange";}}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event&&event.srcElement&&event.srcElement.tagName=="TD"){var td = event.srcElement;//光标td.style.cursor="hand";}
}

*{color:darkorange;
}
body{margin: 0;padding: 0;background-color:#808080;
}
div{position: relative;float: left;
}
#div_container{width:80%;height: 100%;border: 0px solid blue;margin-left: 10%;float: left;background-color:honeydew;border-radius: 8px;
}
#tbl_fruit{width:60%;line-height: 28px;margin-top: 120px;margin-left: 20%;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border: 1px solid gray;border-collapse: collapse;text-align: center;font-size: 16px;font-family: "黑体";font-weight: lighter;}
.w20{width:20%;}
#div_fruit_list{width:100%;border: 0px solid red;
}
.delImg{width: 24px;height: 24px;
}

可以删除修改单价的功能

<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="demo05.css"><script type="text/javascript" src="table.js"></script>
</head>
<body>
<div id="div_container"><div id="div_fruit_list"><table id="tbl_fruit"><tr><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th>操作</th></tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>西瓜</td><td>3</td><td>20</td><td>60</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>菠萝</td><td>4</td><td>25</td><td>100</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>榴莲</td><td>3</td><td>30</td><td>90</td><td><img src="shanchu.webp" class="delImg"/></td></tr><tr><td>总计</td><td colspan="4">999</td></tr></table><hr/><div id="add_fruit_div"><table><tr><td>名称：</td><td><input type="text" id="fname"/></td></tr><tr><td>单价：</td><td><input type="text" id="price"/></td></tr><tr><td>数量：</td><td><input type="text" id="fcount"/></td></tr><tr><th colspan="2"><input type="button" class = "btn" value="添加"/><input type="button" class = "btn" value="重填"/></th></tr></table></div></div>
</div>
</body>
</html>

window.onload=function(){//绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tbl_fruit")//获取表格中所有的行var rows = fruitTbl.rows;for(var i =1;i<rows.length -1;i++) {var tr = rows[i];//绑定鼠标悬浮设置背景颜色事件(包括离开)tr.onmouseover = showBGColor;//绑定并非执行tr.onmouseout = clearBGColor;//绑定并非执行//获取tr这一行的所有单元格var cells = tr.cells;var priceTD = cells[1];//绑定鼠标悬浮在单价单元格变手势的事件priceTD.onmouseover = showHand;//绑定鼠标单击单击单元格的事件priceTD.onclick = editPrice;var img = cells[4].firstChild;if (img && img.tagName == "IMG") {img.onclick = delFruit;}}
}
function delFruit(){if(event&&event.srcElement&&event.srcElement.tagName=="IMG"){//alert表示弹出一个对话框，只有确定//confirm表示弹出一个对话框，有确定和取消，当点击确定返回true，否则返回falseif(window.confirm("是否确认删除当前库存记录")){var img = event.srcElement;var tr = img.parentElement.parentElement;var fruitTbl = document.getElementById("tbl_fruit");fruitTbl.deleteRow(tr.rowIndex);updateZJ();}}
}function editPrice(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var priceTD = event.srcElement ;//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3  ElementNode对应的是1if(priceTD.firstChild && priceTD.firstChild.nodeType==3){//innerText 表示设置或者获取当前节点的内部文本var oldPrice = priceTD.innerText ;//innerHTML 表示设置当前节点的内部HTMLpriceTD.innerHTML="<input type='text' size='4'/>";// <td><input type='text' size='4'/></td>var input = priceTD.firstChild;if(input.tagName=="INPUT"){input.value = oldPrice ;//选中输入框内部的文本input.select();//4.绑定输入框失去焦点事件 , 失去焦点，更新单价input.onblur=updatePrice ;//绑定键盘摁下的事件，此处保证用户输入的是数字input.onkeydown=ckInput;}}}
}
function ckInput(){var kc = event.keyCode;//0~9:48~57//backspace:8//enter:13//console.log(kc);if(!((kc>=48&&kc<=57)||kc==8||kc==13)){event.returnValue=false;}if(kc==13){event.srcElement.blur();}
}
function updatePrice(){if(event && event.srcElement && event.srcElement.tagName=="INPUT") {//获取时间源var input = event.srcElement;var newPrice = input.value;//input节点父节点是td//将文本框变成了单元格var priceTD = input.parentElement;priceTD.innerText=newPrice;//更新当前行的小计这一个格子的值//表格的父元素是行 trupdateXJ(priceTD.parentElement);}
}
//更新指定行的小计
function updateXJ(tr){if(tr&&tr.tagName=="TR"){var tds = tr.cells;var price = tds[1].innerText ;var count = tds[2].innerText ;var xj = parseInt(price)*parseInt(count);tds[3].innerText=xj;updateZJ();}
}
function updateZJ(){var fruitTbl = document.getElementById("tbl_fruit");var rows = tbl_fruit.rows;var sum = 0;for(var i=1;i<rows.length-1;i++){var tr = rows[i];var xj = parseInt(tr.cells[3].innerText);sum = sum +xj;}rows[rows.length-1].cells[1].innerText = sum;
}
//当鼠标炫富时显示背景颜色function showBGColor() {//当前发生的事件//event.srcElement 事件源//alert( event.srcElement);//alert(event.srcElement.tagName);//事件传递if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;//表示获取td的父元素->trvar tr = td.parentElement;//如果想要通过js代码设置某节点的样式，则需要加上.style；tr.styletr.style.backgroundColor = "navy";//tr.cells表示获取这个tr中的所有单元格var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}}//当鼠标离开时，恢复原始样式function clearBGColor() {if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;var tr = td.parentElement;tr.style.backgroundColor = "transparent";var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "darkorange";}}}//当鼠标悬浮在单价单元格时，显示手势function showHand() {if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;//光标td.style.cursor = "hand";}}

*{color:darkorange;
}
body{margin: 0;padding: 0;background-color:#808080;
}
div{position: relative;float: left;
}
#div_container{width:80%;height: 100%;border: 0px solid blue;margin-left: 10%;float: left;background-color:honeydew;border-radius: 8px;
}
#add_fruit_div{margin-left: 35%;
}
#tbl_fruit{width:60%;line-height: 28px;margin-top: 120px;margin-left: 20%;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border: 1px solid gray;border-collapse: collapse;text-align: center;font-size: 16px;font-family: "黑体";font-weight: lighter;}
.w20{width:20%;}
#div_fruit_list{width:100%;border: 0px solid red;
}
.delImg{width: 24px;height: 24px;
}
.btn{border:1px solid lightsalmon;width:80px;height: 24px;
}

JS已经过时了学习并没有什么大的意义

JavaWeb学习 JavaScript语法快速学习相关推荐

怎样快速学习html5,如何快速学习HTML5?带你了解HTML5学什么?
今天小编要为大家分享的文章是关于如何快速学习HTML5?HTML5主要学些什么的文章.近年来前端开发非常热门,前端开发工程师也很稀缺,于是很多人将其视为高薪行业的代名词.HTML5前端开发工程师被称作 ...
如何快速的学习html5,高效快速学习HTML5的技巧
HTML5是非常新前端必备技能,作为第五代HTML语言,包含的算法.实现的功能都大大超过从前.不同的人学习效率.成果都各不相同,那么如何高效快速学习HTML5呢?学码思前端开发培训老师给大家分享一些小 ...
C基础_Python_基本常用语法快速学习
文章目录变量整数int 浮点数字符串字节串输入输出格式化输出变量比较运算符 is == string处理函数常用函数序列 list 元组字典集合不可变类型可变类型复杂数 ...
Java语法快速学习-黑马程序员（个人整理版本）
Java入门基础视频教程,java零基础自学首选黑马程序员Java入门教程(含Java项目和Java真题)_哔哩哔哩_bilibili为了帮助广大对Java有兴趣和立志进入本行业的零基础学员,本套课程 ...
大数据学习，Scala快速学习的方法
大数据学习过程中,都会学习Scala,众所周知,Spark支持4门语言,分别为R.Python.Java与Scala,但真正的底层实现语言则是Scala.在我以往的实践分享中,除了Python,我还会 ...
python学习基础语法_Python学习笔记之基本语法
函数导入的三种方式from math import sqrt #import the sqrt function only e.g. sqrt(25) from math import * ...
python学习基础语法_python学习-基础语法
字符编码 1.python 2.x 默认是ASCII 编码不支持中文,所以在代码有中文的时候需要在文件最上一行加上#coding=utf-8.python 3.x则没有该问题. 变量命名规则 1. ...
每个程序员都需要学习 JavaScript 的7个理由
最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript.Web开发人员尤其如此.所以,如果你是一个程序员,那么你应该去学习JavaScript ...
JavaWeb之JavaScript及应用
JavaScript是前端开发中非常重要的!学习JavaScript语法,应用计算器.油画商城和轮播图等案例,能开发出美观功能强大的页面. 2.2.1 JavaScript基础 JavaScript的 ...

JavaWeb学习 JavaScript语法快速学习

CSS JS HTML分离语法

可以删除修改单价的功能

JS已经过时了学习并没有什么大的意义

JavaWeb学习 JavaScript语法快速学习相关推荐

最新文章

热门文章