javascript （数据类型，方法）

javascript:客户端的一个脚本语言
js是一门弱类型的语言（弱类型语言：变量的数据类型会根据赋的值的类型决定）
基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
4.定义一个函数 function+方法名([参数]){} 无返回值类型，参数无类型

<html><head><meta charset="GBK"><script language="javascript">//javascipt中如何定义变量//var str = "hello world";  /*//引用数据类型var person = new Object();person.id = "51515";person.name = "张三"; alert(person.id+"_"+person.name);*///定义一个函数 function+方法名([参数]){} 无返回值类型，参数无类型function hello(name){return "hello to" + name;}alert(hello("张三"));</script></head><body></body>
</html>
<!--
1. javascript:客户端的一个脚本语言
2. js是一门弱类型的语言（弱类型语言：变量的数据类型会根据赋的值的类型决定）
3. 基本数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
-->

javascrip使用

1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件

<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

3. （1）JavaScript 访问某个 HTML 元素，您可以使用 `document.getElementById(id)` 方法（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。 4. 使用 document.write() 可以向文档写入内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 5. //window 当前窗口 //document 当前窗口的页面 //表示当前的页面加载完会实现一个匿名的函数 ## javascript代码

//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.onload=function(){//当页面加载完成，我们需要绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tb1_fruit");//获取表格中的所有行var rows = fruitTbl.rows;for(var i = 0;i<rows.length;i++){var tr = rows[i];//1.绑定鼠标悬浮设置背景颜色事件//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件tr.onmouseover = showBGColor;//(没有小括号)tr.onmouseout = clearBGColor;//(没有小括号)//获取tr这一行的所有单元格var cells = tr.cells;var priceID = cells[1];//2. 绑定鼠标悬浮在单价格手势的事件priceID.onmouseover = showHand;}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){//event：当前发生的事件//event.srcElemnt:事件源//alert(event.srcElement);//为什么是TD,因为事件传递//alert(event.srcElement.tagName);   //TDif(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;//td.parentElement表示获取td的父元素->TRvar tr = td.parentElement;//如果想通过js代码设置某节点的样式，则需加上.styletr.style.backgroundColor = "navy";//tr.cells 表示获取这个tr中的所有的单元格var tds = tr.cells;for(var i = 0;i<tds.length;i++){tds[i].style.color="while";}}
}
//当鼠标离开时，恢复原始样式
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="green";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement;//cursor:光标  hand:手势形状td.style.cursor="hand";}
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/

javascrip使用进阶

HTML代码

<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" href="D:\JavaWeb学习\demo1.css">
<script type="text/javascript" src="D:\JavaWeb学习\javascriptdemo9.js"></script>
</head>
<body><div id="div_container"><div id="div_fruit_list"><table id="tb1_fruit"><tr>     <!--行--><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w20">操作</th></tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>              </tr><tr><td>西瓜</td><input type='text' size='4'/><td>3</td><td>20</td><td>60</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>菠萝</td><td>6</td><td>20</td><td>120</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>榴莲</td><td>50</td><td>3</td><td>150</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>总计</td><td colspan="4">999</td></tr></table></div></div>
</body>
</html>

CSS代码

body{margin:0;padding:0;}/*全部都是相对布局*/div{position:relative;float:left;}#div_container{width:80%;height:100%;border:0px solid blue;margin-left:10%;float:left;}
#tb1_fruit{width:100%;border:1px solid gray;line-height:28px;margin-top:120px;margin-left:20%;
}
#tb1_fruit,#tb1_fruit tr,#tb1_fruit th,#tb1_fruit td{border:1px solid gray;border-collapse:collapse;text-align:center;font-size:16px;font-family:"黑体";font-weight:lighter;color:green;
}
#div_fruit_list{width:100%;
}
.w20{width:20%;
}
.delImg{width:10px;
height:10px;
}

javascript代码

//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.οnlοad=function(){//当页面加载完成，我们需要绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tb1_fruit");//获取表格中的所有行var rows = fruitTbl.rows;for(var i = 1;i<rows.length-1;i++){var tr = rows[i];//1.绑定鼠标悬浮设置背景颜色事件//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件tr.onmouseover = showBGColor;//(没有小括号)tr.onmouseout = clearBGColor;//(没有小括号)//获取tr这一行的所有单元格var cells = tr.cells;var priceID = cells[1];//2. 绑定鼠标悬浮在单价格手势的事件priceID.onmouseover = showHand;//3.绑定鼠标点击单价单元格的事件，触发出现文本框，编辑修改单价priceID.οnclick=editPrice;}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){//event：当前发生的事件//event.srcElemnt:事件源//alert(event.srcElement);//为什么是TD,因为事件传递//alert(event.srcElement.tagName);   //TDif(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;//td.parentElement表示获取td的父元素->TRvar tr = td.parentElement;//如果想通过js代码设置某节点的样式，则需加上.styletr.style.backgroundColor = "navy";//tr.cells 表示获取这个tr中的所有的单元格var tds = tr.cells;for(var i = 0;i<tds.length;i++){tds[i].style.color="while";}}
}
//当鼠标离开时，恢复原始样式
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="green";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement;//cursor:光标  hand:手势形状td.style.cursor="hand";}
}
//当鼠标点击单价单元格时进行编辑修改
function editPrice(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var priceID = event.srcElement;//nodeType==3表示为文本节点，ElementNode(元素节点)：1。目的时判断当前priceID有子节点，而且第一个节点是文本节点，if(priceID.firstChild && priceID.firstChild.nodeType==3){//innerText 表示设置或者获取当前节点的内部文本var oldPrice = priceID.innerText;//innerHTML 表示设置当前的节点的内部HTMLpriceID.innerHTML="<input type='text' size='4'/>";//<td><input type='text' size='4'/></td>var input = priceID.firstChild;if(input.tagName=="INPUT"){input.value = oldPrice;//选中输入框内部的文本(自动选中输入框内的文本)input.select();//绑定输入框失去焦点事件，失去焦点，更新单价//onblur:表示失去焦点input.οnblur=updatePice;}}}
}
function updatePice(){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;//更新当前的小计这一个格子的值//priceTD.parentElement td的父元素是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;//由于innerText获取到的是字符串，则通过parseInt()强转为int类型var xj = parseInt(price) * parseInt(count);tds[3].innerText = xj;//更新总计updateZJ();}
}
//更新总计
//rows 行
//cells 列
function updateZJ(){var fruitTbl = document.getElementById("tb1_fruit");//获取列var rows = fruitTbl.rows;var sum = 0;//0为表头,length-1为总计/*如何取到一列数，先找到所在的行，在该行的第几个即为所找值*/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;
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/

javascrip使用进阶2

HTML代码

<html>
<head>
<meta charset="GBK">
<link rel="stylesheet" href="D:\JavaWeb学习\demo1.css">
<script type="text/javascript" src="D:\JavaWeb学习\javascriptdemo9.js"></script>
</head>
<body><div id="div_container"><div id="div_fruit_list"><table id="tb1_fruit"><tr>     <!--行--><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w20">操作</th></tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>              </tr><tr><td>西瓜</td><input type='text' size='4'/><td>3</td><td>20</td><td>60</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>菠萝</td><td>6</td><td>20</td><td>120</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>榴莲</td><td>50</td><td>3</td><td>150</td><td><img src="D:\JavaWeb学习\girl4\all.jpg" width="40" height="40"/></td>             </tr><tr><td>总计</td><td colspan="4">999</td></tr></table><hr/><div id="add_fruit_div"></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><td><input type="button" class="btn" value="添加"/></td><td><input type="button" class="btn" value="充填"/></td></tr></table></div></div>
</body>
</html>

javascrip代码

//window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
window.οnlοad=function(){//当页面加载完成，我们需要绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tb1_fruit");//获取表格中的所有行var rows = fruitTbl.rows;for(var i = 1;i<rows.length-1;i++){var tr = rows[i];//1.绑定鼠标悬浮设置背景颜色事件//showBGColor没有小括号，表示鼠标悬浮时，绑定此事件，而不是执行此事件tr.onmouseover = showBGColor;//(没有小括号)tr.onmouseout = clearBGColor;//(没有小括号)//获取tr这一行的所有单元格var cells = tr.cells;var priceID = cells[1];//2. 绑定鼠标悬浮在单价格手势的事件priceID.onmouseover = showHand;//3.绑定鼠标点击单价单元格的事件，触发出现文本框，编辑修改单价priceID.οnclick=editPrice;//7.绑定删除小图标的点击事件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,否则返回false;if(window.confirm("是否确认删除当前记录")){var img = event.srcElement;var tr = img.parentElement.parentElement;var fruitTbl = document.getElementById("tb1_fruit");fruitTbl.deleteRow(tr.rowIndex);updateZJ();}
}
}
/*
当鼠标悬浮时，显示背景颜色
*/
function showBGColor(){//event：当前发生的事件//event.srcElemnt:事件源//alert(event.srcElement);//为什么是TD,因为事件传递//alert(event.srcElement.tagName);   //TDif(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;//td.parentElement表示获取td的父元素->TRvar tr = td.parentElement;//如果想通过js代码设置某节点的样式，则需加上.styletr.style.backgroundColor = "navy";//tr.cells 表示获取这个tr中的所有的单元格var tds = tr.cells;for(var i = 0;i<tds.length;i++){tds[i].style.color="while";}}
}
//当鼠标离开时，恢复原始样式
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="green";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement;//cursor:光标  hand:手势形状td.style.cursor="hand";}
}
//当鼠标点击单价单元格时进行编辑修改
function editPrice(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var priceID = event.srcElement;//nodeType==3表示为文本节点，ElementNode(元素节点)：1。目的时判断当前priceID有子节点，而且第一个节点是文本节点，if(priceID.firstChild && priceID.firstChild.nodeType==3){//innerText 表示设置或者获取当前节点的内部文本var oldPrice = priceID.innerText;//innerHTML 表示设置当前的节点的内部HTMLpriceID.innerHTML="<input type='text' size='4'/>";//<td><input type='text' size='4'/></td>var input = priceID.firstChild;if(input.tagName=="INPUT"){input.value = oldPrice;//选中输入框内部的文本(自动选中输入框内的文本)input.select();//绑定输入框失去焦点事件，失去焦点，更新单价//onblur:表示失去焦点input.οnblur=updatePice;//8.在输入框上绑定键盘按下的事件，在此需要保证用户输入的是数字input.οnkeydοwn=ckInput;        }}}
}
//检验键盘按下的值
function ckInput(){var kc = event.keyCode;//console:控制台  log:打印到控制台//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 updatePice(){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;//更新当前的小计这一个格子的值//priceTD.parentElement td的父元素是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;//由于innerText获取到的是字符串，则通过parseInt()强转为int类型var xj = parseInt(price) * parseInt(count);tds[3].innerText = xj;//更新总计updateZJ();}
}
//更新总计
//rows 行
//cells 列
function updateZJ(){var fruitTbl = document.getElementById("tb1_fruit");//获取列var rows = fruitTbl.rows;var sum = 0;//0为表头,length-1为总计/*如何取到一列数，先找到所在的行，在该行的第几个即为所找值*/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;
}
/*--
1.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2. 点击按钮触发事件
<body>
<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
3. （1）JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法（2） document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。（3）innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
4.
使用 document.write() 可以向文档写入内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
5. //window 当前窗口
//document 当前窗口的页面
//表示当前的页面加载完会实现一个匿名的函数
*/

（四）javaweb 学习--javascript篇基础相关推荐

HTML，css和JavaScript的基础学习—JavaScript篇
HTML,css和JavaScript的基础学习-JavaScript篇 JavaScript是做什么的? JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型 ...
JNI学习开始篇基础知识数据映射及学习资料收集
JNI学习开始篇基础知识数据映射及学习资料收集 JNI介绍 JNI(Java Native Interface) ,Java本地接口. 用Java去调用其他语言编写的程序,比如C或C++. JNI ...
[Django]模型学习记录篇--基础
模型学习记录篇,仅仅自己学习时做的记录!!! 实现模型变更的三个步骤: 修改你的模型(在models.py文件中). 运行python manage.py makemigrations ,为这些修改创 ...
JavaWeb学习 JavaScript语法快速学习
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
python学习第一篇基础
上周报名了reboot python 课程,终于下决心要把python 搞好了,希望自己能坚持下来,并得到自己想要的成绩 #coding:utf-8 #呵呵 #print 'hello world' ...
python学习[第二篇] 基础二
控制结构 if 语句 # only if blockif condition:if_true_block# if_else blockif condition:if_true_block else:i ...
JavaWeb学习之HTML基础
HTML简介 1.1 HTML是英文 HyperText Markup Language 的缩写,它的意思是"超文本标记语言",用它编写出文档的文件的扩展名是".html ...
从零开始之驱动发开、linux驱动（六十四、内核调试篇--基础知识2[console的建立]）
上一节我们分析的earlay的printk知识,本节主要分析一下在内核启动后的printk的知识. 主要是通过下面函数实现的 after_dashes = parse_args("Booti ...
JavaScript语言基础(一)
1.通过学习JavaScript语言基础,我们应该了解关键字与标识符.掌握JavaScript常用的数据类型.熟悉常量与变量.熟悉运算符和表达式. JavaScript语言基础知识框架如下图所示: 此 ...

（四）javaweb 学习--javascript篇基础

文章目录

javascript （数据类型，方法）

javascrip使用

javascrip使用进阶

HTML代码

CSS代码

javascript代码

javascrip使用进阶2

HTML代码

javascrip代码

（四）javaweb 学习--javascript篇基础相关推荐

最新文章

热门文章