zoukankan html css js c++ java

三、web应用中常见的内容

在本章中，我们将讨论 JavaScript 的基本元素并介绍 JavaScript 语言的其他方面，比如循环、数组和函数

共有的html页面

<!DOCTYPE html>
<html>
<head>
    <title>Make Your Own Bingo Card</title>
    <link rel="stylesheet" href="../css/script01.css">
    <script src="../js/script01.js"></script>
</head>
<body>
<h1>Create A Bingo Card</h1>
<table>
    <tr>
        <th>B</th>
        <th>I</th>
        <th>N</th>
        <th>G</th>
        <th>O</th>
    </tr>
    <tr>
        <td id="square0">&nbsp;</td>
        <td id="square5">&nbsp;</td>
        <td id="square10">&nbsp;</td>
        <td id="square14">&nbsp;</td>
        <td id="square19">&nbsp;</td>
    </tr>
    <tr>
        <td id="square1">&nbsp;</td>
        <td id="square6">&nbsp;</td>
        <td id="square11">&nbsp;</td>
        <td id="square15">&nbsp;</td>
        <td id="square20">&nbsp;</td>
    </tr>
    <tr>
        <td id="square2">&nbsp;</td>
        <td id="square7">&nbsp;</td>
        <td id="free">Free</td>
        <td id="square16">&nbsp;</td>
        <td id="square21">&nbsp;</td>
    </tr>
    <tr>
        <td id="square3">&nbsp;</td>
        <td id="square8">&nbsp;</td>
        <td id="square12">&nbsp;</td>
        <td id="square17">&nbsp;</td>
        <td id="square22">&nbsp;</td>
    </tr>
    <tr>
        <td id="square4">&nbsp;</td>
        <td id="square9">&nbsp;</td>
        <td id="square13">&nbsp;</td>
        <td id="square18">&nbsp;</td>
        <td id="square23">&nbsp;</td>
    </tr>
</table>
<p><a href="script01.html" id="reload">Click here</a> to create a new card</p>
</body>
</html>

3.1 循环

window.onload = initAll;

function initAll() {
    for (var i=0; i<24; i++) {
    var newNum = Math.floor(Math.random() * 75) + 1;
    document.getElementById("square" + i).innerHTML = newNum;
    }
}

window.onload = initAll;
这行代码在脚本 3-3 中。当窗口完成加载时，它调用 initAll()函数。

3.2 将值传递给函数

//通过将值传递给 setSquare()函数，脚本更容易阅读和理解了
window.onload = initAll;
function initAll() {
    for (var i=0; i<24; i++) {
    setSquare(i);
    }
}

function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var newNum = Math.floor(Math.random() * 75) + 1;
    document.getElementById(currSquare). innerHTML = newNum;
}

3.3 探测对象

检查浏览器是否有能力理解你要使用的对象，进行这种检查的方法称为对象探测（object detection）。

js中if关于变量的真假的问题
参考
为false的情况：

"" 空字符串
为0的数字
为null的对象
为undefined的对象
布尔值false

//对象探测是脚本开发人员的重要工具
window.onload = initAll;

function initAll() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
        setSquare(i);
        }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
    }
}

function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var newNum = Math.floor (Math.random() * 75) + 1;
    document.getElementById(currSquare).innerHTML = newNum;
}

3.4 处理数组

数组是一种可以存储一组信息的变量。与变量一样，数组可以包含任何类型的数据：文本字符串、数字、其他JavaScript对象。在声明数组时，将数组的元素放在圆括号中，以逗号分隔，如下所示：
var newCars = new Array("YunNan", "CahgnSha", "ShenZhen");

//这个脚本限制了每一列中值的范围
window.onload = initAll;
function initAll() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
            setSquare(i);
        }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
    }
}
function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace [thisSquare] * 15;
    var newNum = colBasis + Math.floor (Math.random() * 15) + 1;
    document.getElementById(currSquare) innerHTML = newNum;
}

3.5 处理有返回值的函数

//函数可以返回一个值，然后脚本可以使用这个值
window.onload = initAll;
function initAll() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
            setSquare(i);
        }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
    }
}
function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace [thisSquare] * 15;
    var newNum = colBasis + getNewNum() + 1; //这里运行新函数
    document.getElementById(currSquare).innerHTML = newNum;
}
//这里新加的
function getNewNum() {
    return Math.floor(Math.random() * 15);
}

3.6 更新数组

//将数组的内容改为存储当前值是一种非常强大的技术
window.onload = initAll;
var usedNums = new Array(76);  //新加的数组
function initAll() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
            setSquare(i);
        }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
    }
}

function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace [thisSquare] * 15;
    var newNum = colBasis + getNewNum() + 1;
    
    //增加的判断用于判断此值有没有被使用了
    if (!usedNums[newNum]) {
        usedNums[newNum] = true;
        document.getElementById(currSquare).innerHTML = newNum;
    }
}

function getNewNum() {
    return Math.floor(Math.random() * 15);
}

3.7 使用do/while循环

//防止给定的列中出现重复的数字
window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
    if (document.getElementById) {
        for (var i=0; i<24; i++) {
            setSquare(i);
        }
    }
    else {
        alert("Sorry, your browser doesn't support this script");
 }
}
function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace [thisSquare] * 15;
    var newNum;

    do {
        newNum = colBasis + getNewNum() + 1;
    }
    while (usedNums[newNum]);
    usedNums[newNum] = true;
    document.getElementById(currSquare). innerHTML = newNum;
}

function getNewNum() {
    return Math.floor(Math.random() * 15);
}

3.8 让用户可以自己运行脚本

即不需要刷新页面点击按钮就可以做到刷新部分页面的功能

//增加了一个reload的点击事件的处理函数 anontherCard
window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
    if (document.getElementById) {
        document.getElementById("reload").onclick = anotherCard; //新加的点击事件
        newCard();
    }
    else {
    alert("Sorry, your browser doesn't support this script");
    }
}
function newCard() {
    for (var i=0; i<24; i++) {
        setSquare(i);
    }
}
function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace thisSquare] * 15;
    var newNum;
    do {
         newNum = colBasis + getNewNum() + 1;
    }
    while (usedNums[newNum]);
    usedNums[newNum] = true;
    document.getElementById(currSquare).innerHTML = newNum;
}
function getNewNum() {
    return Math.floor(Math.random() * 15);
}
//新加的函数，用于刷新游戏，先把usedNums数组全重置为false，
//然后重新生成了卡片，
//最后的return false即使点击<a>元素不会跳转到href指向的url
function anotherCard() {
    for (var i=1; i<usedNums.length; i++) {
        usedNums[i] = false; 
    }
    newCard();
    return false;
}

3.9 组合使用javascript和css

选择html中的元素，然后用className事件改变此元素的class，此处的class即css中定义的class的样式

window.onload = initAll;
var usedNums = new Array(76);
function initAll() {
    if (document.getElementById) {
        document.getElementById("reload").onclick = anotherCard;
        newCard();
    }
    else {
        alert("Sorry, your browser doesn't support this script"); 
    }
}
function newCard() {
    for (var i=0; i<24; i++) {
    setSquare(i);
    }
}
function setSquare(thisSquare) {
    var currSquare = "square" + thisSquare;
    var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var colBasis = colPlace [thisSquare] * 15;
    var newNum;
    do {
        newNum = colBasis + getNewNum() + 1;
    }
    while (usedNums[newNum]);
    usedNums[newNum] = true;
    document.getElementById(currSquare).innerHTML = newNum;
    document.getElementById(currSquare).className = "";
    document.getElementById(currSquare).onmousedown = toggleColor;
}
function getNewNum() {
    return Math.floor(Math.random() * 15);
}
function anotherCard() {
    for (var i=1; i<usedNums.length; i++) {
        usedNums[i] = false;
     }
    newCard();
    return false;
}

//新增的改变元素的class的函数，其中的evt即事件，
//evt.tartget即触发事件的对象同（window.event.srcElement）
function toggleColor(evt) {
    if (evt) {
        var thisSquare = evt.target;
    }
    else {
        var thisSquare = window.event.srcElement;
    }
    if (thisSquare.className == "") {
        thisSquare.className = "pickedBG";
    }
    else {
        thisSquare.className = "";
    }
}

查看全文

相关阅读:
markdown基本语法
 每天一个Linux命令：pwd(3)
每天一个Linux命令：cd(2)
每天一个Linux命令：ls(1)
每天一个Linux命令：man(0)
maven命令行创建项目问题
 Regular Expression
JS事件流
 canvas与svg区别
 js调试

原文地址：https://www.cnblogs.com/phtjzzj/p/7667260.html