zoukankan      html  css  js  c++  java
  • JavaScript 学习(一)

        此篇为学习笔记

    JS 简介

             JavaScript 是一种轻量级的脚本编程语言JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    JS 定义函数和调用函数

    <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
    <script>
        function changeImage()
        {
            //document代表页面,获取某个元素,元素可定义 id 
            element=document.getElementById('myimage')
            if (element.src.match("bulbon"))
            {
                element.src="/images/pic_bulboff.gif";
            }
            else
            {
                element.src="/images/pic_bulbon.gif";
            }
        }
    </script>
    

    定义方法也很简单 :

         function 方法名(参数){
             方法体
         }

    定义数据类型

           JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

    var length = 16;                                  // Number 通过数字字面量赋值 
    var points = x * 10;                              // Number 通过表达式字面量赋值
    var lastName = "Johnson";                         // String 通过字符串字面量赋值
    var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
    var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
    

    JS条件判断

    if (time<20)
    {
        x="Good day";
    }
    else
    {
        x="Good evening";
    }

    JS 定义对象及属性

    var person = {
        firstName:"John",
        lastName:"Doe",
        age:50,
        eyeColor:"blue"
    };

    JS 事件

    html事件

          发生某个事件调用某个 JS 函数,这是常见的场景

    JS for 循环

    for (var i=0;i<cars.length;i++)
    { 
        document.write(cars[i] + "<br>");
    }

    JS 简易表单认证

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <h1>JavaScript 验证输入</h1>
    
    <p>请输入 1 到 10 之间的数字:</p>
    
    <input id="numb">
    
    <button type="button" onclick="myFunction()">提交</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        var x, text;
    
        // 获取 id="numb" 的值
        x = document.getElementById("numb").value;
    
        // 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10
        if (isNaN(x) || x < 1 || x > 10) {
            text = "输入错误";
        } else {
            text = "输入正确";
        }
        document.getElementById("demo").innerHTML = text;
    }
    </script>
    
    </body>
    </html>
    持续更新..
  • 相关阅读:
    利用CSS计数函数counter()实现计数
    弹跳加载动画特效Bouncing loader
    HTML页面中解决内容元素随窗口变化布局变乱问题
    CSS中列表项list样式
    框模型中设置内容区域元素占地尺寸box-sizing属性
    PHP100视频教程-->视频下载
    HTML页面中5种超酷的伪类选择器:hover效果
    HTML中获取input中单选按钮radio数据(性别例子)
    HTML中 DOM操作的Document 对象详解(收藏)
    14、输入一个链表,从尾到头打印链表每个节点的值。
  • 原文地址:https://www.cnblogs.com/Benjious/p/10632529.html
Copyright © 2011-2022 走看看