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;
    }
}
    1. 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 = "";
    }
}
  • 相关阅读:
    Spring Boot----整合SpringCloud
    python apscheduler学习
    Java8 Lambda
    Java Json操作
    python 环境相关
    大数据 Hadoop 单机版安装
    大数据 CDH 6.2 安装
    Java8 时间API
    python 字符串方法
    《JavaScript高级程序设计》笔记——第一章到第三章
  • 原文地址：https://www.cnblogs.com/phtjzzj/p/7667260.html
Copyright © 2011-2022 走看看