JavaScript 基础知识(二)

前面已经介绍HTML和CSS，这两个是网页结构和样式，而负责控制网页行为的是javascript。浏览器上直接可以解释执行，而独立运行就需要nodejs集成运行环境。

01 - JavaScript函数定义和调用

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数定义

函数就是可以重复使用的代码块, 使用关键字 function 定义函数。

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
</script>

函数调用

函数调用就是函数名加小括号，比如:函数名(参数[参数可选])

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数调用
    fnAlert();
</script>

上面这种函数是没有返回值的，下面定义有参数且有返回值的函数。

带参且有返回值的函数

定义函数时，函数如果有参数，参数放到小括号里面，函数如果有返回值，返回值通过 return 关键字来返回

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

这里的参数定义的时候叫形参，调用的时候叫实参。
函数中'return'关键字的作用:
1、返回函数中的值

2、执行完return函数执行结束
说明：
函数定义的格式：

 function 函数名(参数[参数可选]){  
      // 函数的代码实现  
      ...  
  }

函数调用的格式：

函数名(参数[参数可选])

02 - JavaScript变量的作用域

作用域是可访问变量的集合。

变量作用域的介绍

变量作用域就是变量的使用范围，变量分为:

局部变量
全局变量

定义：
在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

局部变量

变量在函数内声明，变量为局部变量，具有局部作用域。

局部变量：只能在函数内部访问。

<script type="text/javascript">
    function myalert()
    {
        // 定义局部变量
        var b = 23;
        alert(b);
    }
    myalert(); // 弹出23
    alert(b);  // 函数外使用出错
</script>

全局变量

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
        // 修改全局变量
        a++;
    }
    myalert();
    alert(a);  // 弹出13    
</script>

说明：

局部变量只能在函数内部使用
全局变量可以在不同函数内使用

03 - JavaScript条件语句

条件语句用于基于不同的条件来执行不同的动作。

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

条件语句

在 JavaScript 中，我们可使用以下条件语句：
1.    if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
2.    if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
3.    if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
4.    switch 语句 - 使用该语句来选择多个代码块之一来执行
格式：

if (condition)
{
    当条件为 true 时执行的代码
}

示例：

if (5<20)
{
    a="helle js";
}

if...else条件语句:

请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

格式：

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

示例：

var x = 5;
if (x<20)
{
    x=5;
}
else
{
    x=20;
}

switch语句:
switch 语句用于基于不同的条件来执行不同的动作。
语法：

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="test" type="text" />
    <script>
        var x;
        var d = new Date().getDay();
        switch (d) {
            case 0: x = "今天是星期日";
                break;
            case 1: x = "今天是星期一";
                break;
            case 2: x = "今天是星期二";
                break;
            case 3: x = "今天是星期三";
                break;
            case 4: x = "今天是星期四";
                break;
            case 5: x = "今天是星期五";
                break;
            case 6: x = "今天是星期六";
                break;
        }

        window.onload = function () {
            var ss = document.getElementById("test");
            ss.value = x

        }
    </script>

</body>

</html>

运行结果：

比较运算符

假如 x = 5, 查看比较后的结果：

比较运算符	描述	例子
==	等于	x == 8 为 false
===	全等(值和类型)	x === 5 为 true; x === "5" 为 false
!=	不等于	x != 8 为 true
>	大于	x > 8 为 false
<	小于	x < 8 为 true
>=	大于或等于	x >= 8 为 false
<=	小于或等于	x <= 8 为 true

比较运算符示例代码：

var iNum01 = 12;
var sNum01 = '12';

if(iNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换
if(sNum01==12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// "===" 符号不会转换符号两边的数据类型
if(sNum01===12){
    alert('相等！');
}
else{
    alert('不相等！')
}

// 多条件判断
var sFruit = "苹果";
if (sFruit == "苹果") {
    alert("您选择的水果是苹果");
} else if (sFruit == "鸭梨") {
    alert("您选择的水果是鸭梨");
} else {
    alert("对不起，您选择的水果不存在!")
}

说明：

条件语句三种写法：

if 语句适用于单条件判断
if else 语句适用于两种条件的判断(成立和不成立条件判断)。
if else if else 语句适用于多条件判断

04 - JavaScript获取标签元素

如果要控制页面行为，通常我们通过标签元素，来操作标签元素。

获取标签元素

可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>
<div id="div1">这是一个div元素</div>

说明:

上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。
解决方法有两种:
第一种方法：将javascript放到页面最下边：

<div id="div1">这是一个div元素</div>

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>

第二种方法：设置页面加载完成执行的函数，在执行函数里面获取标签元素。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

说明：

onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。

获取标签元素需要等待页面加载完成，使用document.getElementById('标签id')。

知识点回顾

本节介绍了javascript的函数定义和调用、变量作用域、条件语句和获取标签元素。
1、函数定义、无参无返回值函数和有参有返回值函数
2、变量分为局部和全局变量、局部变量无法在全局作用域中使用
3、条件语句是用来控制程序走向
4、js是通过内置对象document来获取标签元素，通常有8种方式，这里只介绍四种常用，如：

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）

补充一下：

DOM的含义：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

工欲善其事，必先利其器！

posted @ 2023-02-05 22:37 全栈测试开发日记阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

全栈测试开发日记

像蚂蚁一样工作，像蝴蝶一样生活

JavaScript 基础知识(二)

01 - JavaScript函数定义和调用

02 - JavaScript变量的作用域

03 - JavaScript条件语句

04 - JavaScript获取标签元素

公告