前端之javascript2
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端之javascript2，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含20198字，纯文字阅读大概需要29分钟。
内容图文
js组成和标签获取元素
javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法(比如通过id或者标签来获取元素并赋予颜色之类的样式)
3、BOM 浏览器对象模型 操作浏览器的一些方法(比如控制浏览器弹出窗口或者控制台打印数据)
标签获取元素
获取元素的第二种方法
document.getElementsByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。
关于性能，如果在循环时，有一个固定的值每次都要去查询一次，应该将那个固定的值先在外面定义好；
标签获取元素示例-各行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function () {
// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
var aLi = document.getElementsByTagName('li');
// 读取选择集内元素的个数
//alert(aLi.length); // 弹出13
var iLen = aLi.length;
//给一个li设置背景色
//aLi[0].style.backgroundColor = 'gold';
// 不能给选择集设置样式属性
//aLi.style.backgroundColor = 'gold';
/*
同时给所有的li加背景色
for(var i=0;i<iLen;i++)
{
aLi[i].style.backgroundColor = 'gold';
}
*/
var oUl = document.getElementById('list1');
var aLi2 = oUl.getElementsByTagName('li');
var iLen2 = aLi2.length;
for (var i = 0; i < iLen2; i++) {
if (i % 2 == 0) {
aLi2[i].style.backgroundColor = 'gold';
}
}
}
</script>
</head>
<body>
<ul id="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
标签获取元素示例-各行换色
字符串操作方法
js操作数据的能力还是没有后端强，所以一般是由后端处理好数据后，再传给前端，但前端有时候也会需要自己处理数据；
字符串处理方法
- 1、字符串合并操作：“ + ”
- 2、parseInt() 将数字字符串转化为整数
- 3、parseFloat() 将数字字符串转化为小数
- 4、split() 把一个字符串分隔成字符串组成的数组
- 5、charAt() 获取字符串中的某一个字符
- 6、indexOf() 查找字符串是否含有某字符
- 7、substring() 截取字符串 用法： substring(start,end)（不包括end）
- 8、toUpperCase() 字符串转大写
- 9、toLowerCase() 字符串转小写
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);
字符串操作方法实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的处理方法</title>
<script type="text/javascript">
var iNum01 = 12;
var sNum02 = '24';
var sTr = 'abc';
// 数字和字符串相加等同于字符串拼接
//alert(iNum01+sNum02); // 弹出 1224
//alert(sNum02+sTr); // 弹出 24abc
var sTr02 = '12.35';
//将字符串的小数转化成整数
//alert(parseInt(sTr02)); // 弹出12
//将字符串的小数转化成小数
//alert(parseFloat(sTr02));
var sTr03 = '2017-4-22';
var aRr = sTr03.split("-");
//alert(aRr); // 弹出['2017','4','22'];
var aRr2 = sTr03.split("");
//alert(aRr2); // 弹出['2','0','1','7','-','4','-','2','2']
var sTr04 = '#div';
var sTr05 = sTr04.charAt(0);
// alert(sTr05); 弹出 #
var sTr06 = 'abcdef microsoft asldjfl';
var iNum03 = sTr06.indexOf('microsoft');
var iNum04 = sTr06.indexOf('yahei');
//alert(iNum03); // 存在 弹出字符串对应的索引值 7
//alert(iNum04); // 不存在 弹出 -1
var sTr07 = 'abcdef123456edfg';
var sTr08 = sTr07.substring(6, 12);
var sTr09 = sTr04.substring(1);
//alert(sTr08);
//alert(sTr09);
var sTr10 = 'abcdef';
var sTr11 = sTr10.toUpperCase();
alert(sTr11);
var sTr12 = '1234j3290850ljdlsjlfajdlkskdfj';
var sTr13 = sTr12.split('').reverse().join('');
alert(sTr13);
</script>
</head>
<body>
</body>
</html>
字符串操作方法实例
定时器
定时器在javascript中的作用
- 1、制作动画
- 2、异步操作
- 3、函数缓冲与节流
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
定时器简单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function myalert(){
alert('hello world!');
}
// 只执行一次的定时器,第一个参数是函数名，或者是匿名函数，第二个参数是时间，单位是毫秒，不写单位
//var timer01 = setTimeout(myalert,2000);
// 关闭只执行一次的定时器
//clearTimeout(timer01);
// 反复执行的定时器
//var timer02 = setInterval(myalert,1000); 改成下面匿名函数的写法：
var timer02 = setInterval(function(){
alert('hello world!');
},1000)
//关闭反复执行的定时器
//clearInterval(timer02);
</script>
</head>
<body>
</body>
</html>
定时器简单实例
定时器盒子移动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var iLeft = 0;
/*
var timer = setInterval(moving,30);
function moving(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
}
*/
var timer = setInterval(function(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
if(iLeft>700)
{
clearInterval(timer);
}
},30);
}
</script>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
position:absolute;
left:0;
top:100px;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
定时器盒子移动实例
盒子往复运动动画示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
var iLeft = 0;
var iSpeed = 3;
/*
var timer = setInterval(moving,30);
function moving(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
}
*/
var timer = setInterval(function () {
iLeft += iSpeed;
oDiv.style.left = iLeft + 'px';
if (iLeft > 700) {
iSpeed = -3;
}
if (iLeft < 0) {
iSpeed = 3;
}
}, 20);
}
</script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: gold;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
盒子往复运动动画示例
无缝滚动示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.list_con {
width: 1000px;
height: 200px;
border: 1px solid #000;
margin: 10px auto 0;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
.list_con ul {
list-style: none;
width: 2000px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.list_con li {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}
.btns_con {
width: 1000px;
height: 30px;
margin: 50px auto 0;
position: relative;
}
.left, .right {
width: 30px;
height: 30px;
background-color: gold;
position: absolute;
left: -40px;
top: 124px;
font-size: 30px;
line-height: 30px;
color: #000;
font-family: 'Arial';
text-align: center;
cursor: pointer;
border-radius: 15px;
opacity: 0.5;
}
.right {
left: 1010px;
top: 124px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('slide');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
//通过标签获取元素，获取的是选择集，加上下标才能获取到元素
var oUl = oDiv.getElementsByTagName('ul')[0];
var iLeft = 0;
var iSpeed = -2;
var iNowspeed = 0;
//将ul里面的内容复制一份，整个ul里面就包含了10个li
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
function moving() {
iLeft += iSpeed;
// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
if (iLeft < -1000) {
iLeft = 0;
}
//当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
if (iLeft > 0) {
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
var timer = setInterval(moving, 30);
oBtn01.onclick = function () {
iSpeed = -2;
};
oBtn02.onclick = function () {
iSpeed = 2;
};
// 当鼠标移入的时候
oDiv.onmouseover = function () {
iNowspeed = iSpeed;
iSpeed = 0;
};
// 当鼠标移出的时候
oDiv.onmouseout = function () {
iSpeed = iNowspeed;
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul>
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
无缝滚动示例
定时器制作时钟示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
function fnTimego() {
var sNow = new Date();
// 获取年份
var iYear = sNow.getFullYear();
// 获取月份，月份是从0到11，0表示一月，11表示十二月
var iMonth = sNow.getMonth() + 1;
var iDate = sNow.getDate();
// 星期是从0到6,0表示星期天
var iWeek = sNow.getDay();
var iHour = sNow.getHours();
var iMinute = sNow.getMinutes();
var iSecond = sNow.getSeconds();
var sTr = '当前时间是：' + iYear + '年' + iMonth + '月' + iDate + '日 ' + fnToweek(iWeek) + ' '
+ fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);
oDiv.innerHTML = sTr;
}
// 刚开始调用一次，解决刚开始1秒钟空白的问题
fnTimego();
setInterval(fnTimego, 1000);
function fnToweek(n) {
if (n == 0) {
return '星期日';
} else if (n == 1) {
return '星期一';
} else if (n == 2) {
return '星期二';
} else if (n == 3) {
return '星期三';
} else if (n == 4) {
return '星期四';
} else if (n == 5) {
return '星期五';
} else {
return '星期六';
}
}
function fnTodou(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
}
</script>
<style type="text/css">
div {
text-align: center;
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
定时器制作时钟示例
定时器制作倒计时示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
function fnTimeleft() {
//实际开发中需要读取后台的时间，可以通过ajax来读取
var sNow = new Date();
// 未来时间：4月30日晚24点
var sFuture = new Date(2017, 3, 30, 24, 0, 0);
//计算还有多少秒
var sLeft = parseInt((sFuture - sNow) / 1000);
//计算还剩多少天
var iDays = parseInt(sLeft / 86400);
// 计算还剩多少小时
var iHours = parseInt((sLeft % 86400) / 3600);
// 计算还剩多少分
var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60);
// 计算还剩多少秒
var iSeconds = sLeft % 60;
var sTr = '距离5月1日还剩：' + iDays + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分' + fnTodou(iSeconds) + '秒';
oDiv.innerHTML = sTr;
}
fnTimeleft();
setInterval(fnTimeleft, 1000);
function fnTodou(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
}
</script>
</head>
<style type="text/css">
div {
text-align: center;
font-size: 30px;
color: pink;
}
</style>
<body>
<div id="div1"></div>
</body>
</html>
定时器制作倒计时示例
倒计时关闭弹框/丐版示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.menu {
height: 80px;
background-color: gold;
position: fixed;
width: 960px;
top: 0px;
left: 50%;
margin-left: -480px;
}
p {
text-align: center;
}
.popup {
width: 500px;
height: 300px;
border: 1px solid #000;
background-color: #fff;
position: fixed;
left: 50%;
margin-left: -251px;
top: 50%;
margin-top: -151px;
z-index: 9999;
}
.popup h2 {
background-color: gold;
margin: 10px;
height: 40px;
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
opacity: 0.5;
z-index: 9998;
}
.pop_con {
display: none;
}
</style>
</head>
<body>
<div class="menu">菜单文字</div>
<div class="pop_con" style="display: block">
<div class="popup">
<h2>弹框的标题</h2>
<br>
<br>
<br>
<p>还有5秒钟关闭弹框</p>
</div>
<div class="mask"></div>
</div>
<input type="button" name="" value="弹出弹框">
<p>网页文字</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
...
<p>网页文字</p>
</body>
</html>
倒计时关闭弹框/丐版示例
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
- 1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
- 2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
//全局变量
var a = 12;
function myalert()
{
//局部变量
var b = 23;
alert(a);
alert(b);
}
myalert(); //弹出12和23
alert(a); //弹出12
alert(b); //出错
</script>
变量作用域示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//函数外部定义的是全局变量，函数内部和外部都可以访问
var iNum01 = 12;
// 重复定义，后面的会覆盖前面的值
//var iNum01 = 14;
function myalert(){
//var iNum01 = 24;
// 函数内部定义的是局部变量，函数内部可以访问，外部不能访问
var iNum02 = 36;
alert(iNum01);
iNum01 += 10;
}
function myalert02(){
alert(iNum01);
}
myalert(); // 弹出 12
myalert02(); // 弹出 22
//alert(iNum02); 出错！
</script>
</head>
<body>
</body>
</html>
变量作用域示例
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function changecolor(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}
changecolor();
封闭函数：
(function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
}()
封闭函数示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
/*
function myalert(){
alert('hello world!');
}
myalert();
转换成封闭函数的写法：
*/
/*(function(){
alert('hello world!');
})();*/
//封闭函数的第二种写法：
/*!function(){
alert('hello world!');
}();*/
~function () {
alert('hello world!');
}();
var iNum01 = 12;
function myalert02() {
alert('hello world!');
}
// 在封闭函数前加一个“;” , 可以避免js压缩时候出错。
(function () {
var iNum01 = 24;
function myalert02() {
alert('hello hello!');
}
alert(iNum01);
myalert02();
})();
alert(iNum01);
myalert02();
</script>
</head>
<body>
</body>
</html>
封闭函数示例
闭包
什么是闭包
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
function aaa(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
}
var ccc = aaa(2);
ccc();
ccc();
改写成封闭函数的形式：
var ccc = (function(a){
var b = 5;
function bbb(){
a++;
b++;
alert(a);
alert(b);
}
return bbb;
})(2);
ccc();
ccc();
用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
(function(i){
aLi[i].onclick = function(){
alert(i);
}
})(i);
}
}
</script>
......
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
2、私有变量计数器，外部无法访问，避免全局变量的污染
<script type="text/javascript">
var count = (function(){
var a = 0;
function add(){
a++;
return a;
}
return add;
})()
count();
count();
var nowcount = count();
alert(nowcount);
</script>
内置对象
1、document
document.grtElementById document.grtElementByTagName document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值
3、Math
Math.random 获取0-1的随机数 Math.floor 向下取整 Math.ceil 向上取整
location的属性1示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
// 存储上一个页面的地址：
//var sUrl = document.referrer;
var oBtn = document.getElementById('btn01');
oBtn.onclick = function () {
//window.location.href = sUrl;
window.location.href = "http://www.baidu.com";
}
}
</script>
</head>
<body>
<input type="button" name="" value="跳转" id="btn01">
</body>
</html>
location的属性1示例
location的属性2示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oBody = document.getElementById('body01');
var sData = window.location.search;
alert(sData);
var sHash = window.location.hash;
alert(sHash);
if (sData != '') {
var aRr = sData.split("=");
var iNum = aRr[1];
if (iNum == 1) {
oBody.style.backgroundColor = 'gold';
} else if (iNum == 2) {
oBody.style.backgroundColor = 'green';
} else {
oBody.style.backgroundColor = 'pink';
}
}
}
</script>
</head>
<body id="body01">
<h1>007页面</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="007window-location的属性02.html">链接到007页面</a><br><br>
<a href="007window-location的属性02.html?aa=1">链接到金色背景007页面</a><br><br>
<a href="007window-location的属性02.html?aa=2">链接到绿色背景007页面</a>
<br><br>
<a href="007window-location的属性02.html?aa=3">链接到粉色背景007页面</a>
<br><br>
</body>
</html>
location的属性2示例
math对象示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iPi = Math.PI;
var arr = [];
for (var i = 0; i < 100; i++) {
// Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1
var iNum = Math.random();
arr.push(iNum);
}
//alert(arr);
console.log(arr);
//向下取整，去掉小数部分
alert(Math.floor(5.6)); // 弹出5
//向上取整，去掉小数部分，整体加1
alert(Math.ceil(5.2))
// 10 - 20 之间的随机数
var iN01 = 10;
var iN02 = 20;
var arr2 = [];
for (var i = 0; i < 40; i++) {
// 生成从10到20的随机数
var iNum02 = Math.floor((iN02 - iN01 + 1) * Math.random()) + iN01;
arr2.push(iNum02);
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
math对象示例
面向对象
面向过程与面向对象编程
1、面向过程：所有的工作都是现写现用。
2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。
javascript对象
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。
创建对象的方法
1、单体
<script type="text/javascript">
var Tom = {
name : 'tom',
age : 18,
showname : function(){
alert('我的名字叫'+this.name);
},
showage : function(){
alert('我今年'+this.age+'岁');
}
}
</script>
2、工厂模式
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function(){
alert('我的名字叫'+this.name);
};
o.showage = function(){
alert('我今年'+this.age+'岁');
};
o.showjob = function(){
alert('我的工作是'+this.job);
};
return o;
}
var tom = Person('tom',18,'程序员');
tom.showname();
</script>
2、构造函数
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showname = function(){
alert('我的名字叫'+this.name);
};
this.showage = function(){
alert('我今年'+this.age+'岁');
};
this.showjob = function(){
alert('我的工作是'+this.job);
};
}
var tom = new Person('tom',18,'程序员');
var jack = new Person('jack',19,'销售');
alert(tom.showjob==jack.showjob);
</script>
3、原型模式
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.showname = function(){
alert('我的名字叫'+this.name);
};
Person.prototype.showage = function(){
alert('我今年'+this.age+'岁');
};
Person.prototype.showjob = function(){
alert('我的工作是'+this.job);
};
var tom = new Person('tom',18,'程序员');
var jack = new Person('jack',19,'销售');
alert(tom.showjob==jack.showjob);
</script>
4、继承
<script type="text/javascript">
function fclass(name,age){
this.name = name;
this.age = age;
}
fclass.prototype.showname = function(){
alert(this.name);
}
fclass.prototype.showage = function(){
alert(this.age);
}
function sclass(name,age,job)
{
fclass.call(this,name,age);
this.job = job;
}
sclass.prototype = new fclass();
sclass.prototype.showjob = function(){
alert(this.job);
}
var tom = new sclass('tom',19,'全栈工程师');
tom.showname();
tom.showage();
tom.showjob();
</script>
调试程序的方法
1、alert
2、console.log
3、document.title
调试js方法示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oBody = document.getElementById('body01');
var iNum01 = 12;
// alert 会阻止程序的运行
//alert(iNum01);
console.log(iNum01);
oBody.style.backgroundColor = 'gold';
var iNum02 = 24;
var iNum03 = 36;
//alert(iNum02);
console.log(iNum02);
setInterval(function () {
iNum03++;
//console.log(iNum03);
document.title = iNum03;
}, 100)
}
</script>
</head>
<body id="body01">
</body>
</html>
调试js方法示例
类型转换
1、直接转换 parseInt() 与 parseFloat()
alert('12'+7); //弹出127
alert( parseInt('12') + 7 ); //弹出19
alert( parseInt(5.6)); // 弹出5
alert('5.6'+2.3); // 弹出5.62.3
alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9
2、隐式转换 “==” 和 “-”
if('3'==3)
{
alert('相等');
}
// 弹出'相等'
alert('10'-3); // 弹出7
3、NaN 和 isNaN
alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN
内容总结
以上是互联网集市为您收集整理的前端之javascript2全部内容，希望文章能够帮你解决前端之javascript2所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】