JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM

Posted LRcoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM相关的知识,希望对你有一定的参考价值。

1. javascript入门

静态网页技术

  • html:超文本标记语言 显示内容

  • CSS:层叠样式表 美化页面

  • JavaScript:页面动态交互和特效

    DHTML = HTML + CSS + JavaScript,动态HTML,只是动态效果,不是动态数据

  • jQuery:对 JavaScript 的封装

  • EasyUI:在 jQuery 基础上对 HTML 和 CSS 的封装

对于一个网页,HTML定义网页的结构,CSS描述网页的样子,JavaScript设置页面交互和特效。

1.1 JavaScript 定义和特点

JavaScript 是一种基于对象 (object-based) 和事件驱动 (Event Driven)的简单的并具有安全性能的脚本语言

  • ECMAScript:JavaScript的核心
  • DOM:文档对象模型,是 HTML 和 XML 的应用程序接口(API)。把整个页面规划成由节点层级构成的文档
  • BOM:浏览器对象模型,对浏览器窗口进行访问和操作

JavaScript特点

  • 脚本语言:不需要事先编译,只要有一个与其相适应的解释器就可以执行
  • 基于对象的语言:只是使用对象,相当于只有封装,没有继承和多态
  • 事件驱动:事件(Event)发生后(按下鼠标、移动窗口等),可能会引起相应的事件响应
  • 简单性:变量类型为弱类型
  • 安全性:只能通过浏览器实现信息浏览或动态交互
  • 跨平台性:依赖于浏览器本身,与操作平台无关
  • 缺点:各种浏览器对JavaScript的支持可能不同,显示效果可能不同

1.2 JavaScript的初步使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>认识JavaScript</title>
    <script type="text/javascript">
        //在浏览器写入内容  
        document.write("这就是JavaScript1<br>")
        document.write("这就是JavaScript2<br>")
    </script>
</head>

<body>
    这就是HTML;
</body>

</html>
<script>
    alert("你好呀")
</script>

1.3 数据类型

常量是存在数据类型的,变量直接用 var 声明即可

  • 数值型:整数(85) 和 浮点数(3.14)统称为数值
  • 字符串型:用 ‘’ 或者 “” 括起来的内容
  • 布尔型:true 或 false
  • 值:null,表示没有值,用于定义空的不存在的引用
  • 未定义值:undefined,表示变量虽然已经声明,但是还没有赋值
  • 复合数据类型:对象、数组

2. 基本语法

2.1 变量

JavaScript 中的变量是没有类型(弱类型)的

var int = 3;

2.2 运算符

类型运算符
算术运算符+ - * / % ++ --
赋值运算符=
比较运算符> < >= <= == === !=
逻辑运算符&& || !

注意: == 和 === 的区别

  • == 等值判断:先判断类型,类型一致则比较内容, 如果类型不一致,则先用 Number 转换为一致的类型后再比较内容
  • === 等同判断:先判断类型,类型不一致则直接 false, 类型一致则再比较内容

2.3 流程控制

  • 分支语句:if、switch

  • 循环语句:while循环、do-while循环、for循环、for-each循环

  • 跳转语句:break、continue、return

需要注意 for-each 循环,使用 in

2.4 引入外部文件

<script type="text/javascript" src="外部文件路径"></script>

2.5 综合代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript基本语法</title>

    <!--  引入外部的JS文件  -->
    <script type="text/javascript" src="js/myJs.js"></script>

    <script type="text/javascript">
        document.write("<h3>认识数据类型和变量</h3>")
        var x;
        document.write("x = " + x + "   " + typeof (x) + "<br>");    // 没有赋值,就是undefined
        x = null;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = 123;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = "lwclick";     // 单引号双引号都可以
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = true;         // 区分大小写, TRUE 则是变量名
        // x = TRUE; // 此时TRUE被理解成一个变量
        document.write("x = " + x + "   " + typeof (x) + "<br>");

        document.write("<h3>区分==和===</h3>");
        var a = '5';
        var b = 5;
        var c = 5;
        document.write((b == c) + "<br>");
        document.write((a == b) + "<br>"); // 自动类型转换
        document.write((b === c) + "<br>"); //
        document.write((a === b) + "<br>"); // 先判断类型,不一致则false

        console.info("for-each循环");
        var fruits = ["apple", 'banana', 'orange', 'pear', 'peach'];
        /**
             for ( var i = 0; i < fruits.length; i++ ) 
                console.log(fruits[i]);
             
         */
        // for-each 循环数组
        for (var index in fruits) //!!!!
            console.warn(index + "   " + fruits[index]);
        

        // for-each 循环对象
        // for (var elem in window) 
        //   console.info(elem);
        //
    </script>
</head>
<body>
</body>
</html>

3. 函数

  • 类似Java中的方法,是完成特定任务的代码语句块

  • 不用定义属于某个类,直接使用

  • JavaScript的函数分为系统函数和自定义函数

    • 系统函数

      parseInt()字符串值转换为数字

      parseFloat()字符串值转换成浮点数

      isNaN():判断是否是数字不是数字返回 true

      eval()字符串表达式转为数字(运算字符串内的表达式)

    • 自定义函数

      // 没有参数,没有返回值
      function func1() 
      
      
      // 有参数,没有返回值
      function func2(num1) 
          alert(num1) 
      
      
      // 有参数,有返回值
      function func3(num1, num2)   // 返回值也为 var,则直接不写
          return num1 + num2;
      
      
      // 类似于 Java 的匿名函数式定义
      var func4 = function() 
          alert('world!');
      ;
      
      // 调用时
      func2();  // 实参个数 < 形参个数                  num1 为 undefined
      func2(123);  // 实参个数 = 形参个数               正常使用
      func2(123, 'lwclick');  // 实参个数 > 形参个数    只用第一个参数
      
      var res = func3(123, 456);
      

      注意:如果有重名的函数,会调用最近的那一个

实例:计算器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
    </head>

    <script>
        function calc() 
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            if (isNaN(num1) || isNaN(num2)) 
                alert("请输入数字");
                // innerHTML:往元素的【中间】写内容
                document.getElementById("res").innerHTML = "结果:";
                return;
            
            var oper = document.getElementById("oper").value;
            if (num2 == 0 && oper == '/') 
                document.getElementById("res").innerHTML = "<span style='color: red'>除数不能为0</span>";
                return;
            
            var result;
            switch (oper) 
                case '+' : result = parseInt(num1) + parseInt(num2); break;
                case '-' : result = num1 - num2; break;
                case '*' : result = num1 * num2; break;
                case '/' : result = num1 / num2; break;
            
            document.getElementById("res").innerHTML = result;
        
    </script>

    <body>
        <form action="">
            第一个数:<input type="text" id="num1" name="num1" value="123"><br>
            第二个数:<input type="text" id="num2" name="num2"><br>
            运算符:<select id="oper" name="oper">
                        <option value="+"></option>
                        <option value="-"></option>
                        <option value="*"></option>
                        <option value="/"></option>
                    </select><br>
            <input type="button" value="计算" onclick="calc()">
        </form>

        <div id="res">结果:</div>
    </body>
</html>

4. 对象

JavaScript 提供了很多对象,比如 String、Math、Date 等,和Java中的使用基本相同,后续还有 BOM对象和 DOM对象

<script>
    document.write("------------String--------------<br>")
    var str = new String("lwclick");
    document.write(str.length + "<br>")
    document.write(str.charAt(2) + "<br>")
    document.write(str.indexOf('s') + "<br>")
    document.write(str.substr(2, 3) + "<br>")    // 从索引为2的开始截,截3位
    document.write(str.substring(2, 3) + "<br>") // 截取2 到 3中间的

    document.write("------------Date--------------<br>")
    var now = new Date();
    document.write(now.toLocaleString()+"<br>")
    document.write(now.getFullYear()+"<br>")
    document.write((now.getMonth() + 1) + "<br>")   // 0 - 11!!!!!!!
    document.write(now.getDate()+"<br>")
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    document.write(arr[now.getDay()] + "<br>")

    document.write("------------Math--------------<br>")
    document.write('' + Math.random())
</script>

5. 时钟效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时钟效果</title>
        <script>
            function showTime() 
                // 获取当前时间
                var now = new Date();

                // 写到指定位置
                document.getElementById("time").innerHTML = now.toLocaleString();

                // 第一种方式:放在自身函数里面,就会自己调用自己,需要结合 window.onload
                // window.setTimeout(showTime, 1000)  // setTimeout:多长时间后调用指定的函数【一次】
            

            window.onload = showTime; // 不能写 ()

            // 第二种方式:在自身函数外面设置 setInterval(showTime, 1000)  【每隔】多长时间调用一次函数
            var myClock = setInterval(showTime, 1000);

            function pauseClock() 
                window.clearInterval(myClock); // 清除计时
            

            function continueClock() 
                myClock = setInterval(showTime, 1000);
            
        </script>
    </head>
    <body>
        <div id="time"></div>
        <input type="button" value="暂停" onclick="pauseClock()" />
        <input type="button" value="继续" onclick="continueClock()" />
    </body>
</html>

6. 数组

JavaScript 中也有一维数组和二维数组的概念

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数组 array</title>
        <script>
            document.write("<h3>一维数组,第一种声明方式</h3>");
            var arr = ["apple", "banana", "orange", "pear", "peach"];

            document.write("<h3>一维数组,第二种声明方式</h3>");
            var arr = new Array("apple", "banana", "orange", "pear", "peach")

            document.write("<h3>一维数组,第三种声明方式</h3>");
            var arr = new Array(5);
            arr[0] = "apple";
            arr[1] = "banana";
            arr[2] = "orange";
            arr.length = 2;    // 只要前两个

            document.write("<h3>一维数组,第四种声明方式</h3>");
            var arr = new Array(5)以上是关于JavaLearn#(21)JavaScript入门基本语法函数基本对象数组事件DOM和BOM的主要内容,如果未能解决你的问题,请参考以下文章

JavaLearn#(22)jQuery介绍选择器事件动画DOM编程操作CSS表单验证

JavaLearn#(22)jQuery介绍选择器事件动画DOM编程操作CSS表单验证

JavaLearn#(25)Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述

JavaLearn#(25)Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述

JavaLearn # 面向对象编程_3

JavaLearn # Java的常用类