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

Posted 2022-12-01 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的常用类