js脚本

1. JS的作用：

   • 描述显示的内容（HTML）
   • 修饰 HTML 标签（CSS）
   • 设置 HTML 标签的动作（JS）
   • JS特点：基于对象的编程语言，通过浏览器解释执行
   • 作用：表单验证、改变标签样式、获取和设置标签属性值

                表单验证:

                <form action="遍历数组的三种方式.html" οnsubmit="return checkAll()" >

                <input type = "submit"  value="判断"/>

                </form>

                

                <form action="遍历数组的三种方式.html" method = "get" id = "myForm">

                <input type = "button"  value="普通按钮" οnclick="checkForm()"/>

                </form>

                

                

function checkAll(){
    return checkName()&&checkPassWord()&&checkCell()&&checkMail()
}

function checkForm(){
    if (checkName()&&checkPassWord()&&checkCell()&&checkMail()){
        document.getElementById("myForm").submit();
    }
}

获取和设置标签属性值:

function checkMail(){
    let mail = document.getElementById("mail").value
    let mailInput = document.getElementById("mailInput");
    let count = 0;
    let countdian = 0;
    if(mail == ""){
        mailInput.innerHTML = "邮箱不能为空"
        mailInput.style.color = "red"
        return false;
    } 

改变标签样式

<script>

    let index = -1;
function scrollingDisplay(){
    if(arguments.length !== 0){
        index = arguments[0]
    }else{
            
                if(index == 5){
                    index =-1;
        }
        index ++;
    }
    
    let imgs =  document.getElementById("scroll_img").getElementsByTagName("li");
    let nums =  document.getElementById("scroll_number").getElementsByTagName("li");
    
    for (i = 0; i < imgs.length; i++) {
                if(i == index){
                    imgs[i].style.display = "block"
                    nums[i].className= "sroll_number_over"
                }else{
                    imgs[i].style.display = "none"
                    nums[i].className= "";
                }
            }
        
} 

<script>

<div class="scroll_mid">
            <ul id="scroll_img">
                <li><img src="images/dd_scroll_1.jpg"/></li>
                <li><img src="images/dd_scroll_2.jpg"/></li>
                <li><img src="images/dd_scroll_3.jpg"/></li>
                <li><img src="images/dd_scroll_4.jpg"/></li>
                <li><img src="images/dd_scroll_5.jpg"/></li>
                <li><img src="images/dd_scroll_6.jpg"/></li>
            </ul>
            <ul id="scroll_number">
                <li class="scroll_number_over" οnmοuseοver="numOver(0)" οnmοuseοut="numOut()">1</li>
                <li οnmοuseοver="numOver(1)" οnmοuseοut="numOut()">2</li>
                <li οnmοuseοver="numOver(2)" οnmοuseοut="numOut()">3</li>
                <li οnmοuseοver="numOver(3)" οnmοuseοut="numOut()">4</li>
                <li οnmοuseοver="numOver(4)" οnmοuseοut="numOut()">5</li>
                <li οnmοuseοver="numOver(5)" οnmοuseοut="numOut()">6</li>
            </ul>
        </div>

1. JS如何写在HTML页面中：

   • 直接写在标签中的属性中
   • 内嵌在页面中的<script>标签中
   • 定义独立的 JS 文件，在页面最后引入

2. JS的基本语法：

   • 定义变量：使用 let 关键字
   • 数据类型：undefined, boolean, number, string, object
   • 运算符：赋值运算符、算术运算符、比较运算符、逻辑运算符

3. 分支结构：

   • if 语句
   • if-else 语句
   • if-else-if 语句
   • switch 语句

4. 循环语句：

   • while 循环
   • for 循环

5. 函数：

   • 定义语法
   • 参数对象 arguments
   • 全局函数：parseInt(), parseFloat(), isNaN()

        parseInt(),parseFloat():

        

<input type = "button" onclick="displayAll()" value="显示100-1000的所有水仙花数"><script>function displayAll(){for(var m = 100; m<=999;m++){if(judgeNum(m) == m){alert(m);}}}function judgeNum(num){let hundersPlace = Math.floor(num/100);let onesPlace =	Math.floor(num%10);let tensPlace =	Math.floor(num%100/10);if((onesPlace*onesPlace*onesPlace + tensPlace*tensPlace*tensPlace+hundersPlace* hundersPlace* hundersPlace) == num){return num;}else{return 0;}}</script>

        isNaN()  :判断是否为非数值
            当值中包含非数值的字符 :true
            纯数值  :false  25.6
        eval(String):eval() 函数计算或执行参数。
            如果参数是表达式，则 eval() 计算表达式    
            例如:  eval("2+3") -->5

6内置对象
    1 Math对象
        Math.random()  : 0~1的随机数
        Math.ceil()
        Math.floor()
    2 Number对象
        toFixed(x); :设置数值保留x位小数位,x可省略不保留小数  
    3 Date对象

        let date =  new Date();
        let year =     date.getFullYear();
        let month =  1 +    date.getMonth();
        let dateMonth =     date.getDate();
        let week =    date.getDay;
        document.write(year+","+month+","+dateMonth+","+week)
    4 Array对象
    5 String对象
    6 RegExp 对象