Javascript

2022-12-03 11:51:13

JavaScript

1.Javascript的介绍

javascipt是运行在浏览器端的脚本语言，由浏览器解释执行的，简称js它能够让网页和用户有交互功能，增加良好的用户体验效果。

前端三大块： 1.HTML （结构）2. CSS（样式） 3.Javascript(行为)

2.JavaScript的使用方式

<!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>

  <!-- 内嵌式 -->

    <script>

​    alert('我是内嵌式的js代码！')

  </script>

    <script src="js/main.js"></script>

</head>

<body>

  <!-- 行内式 -->

  <input type="button" value="按钮" onclick="alert('你点我了')">

</body>

</html>

3.变量的定义和使用

<!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>

    <script>

​    //定义数字类型的变量

​    var iNum1 = 1;

​    var fNum1 =2.5;

​    //定义字符串

​    var sStr = '里斯';

​    //定义boolean类型

​    var bIsok = true;

​    // 定义undefind类型

​    var unData;

​    // 定义空对象

​    var oData = null;

​    // 定义JavaScript对象

​    var oPerson = {

​      name: '里门',

​      age: 29

​    }

​    alert(iNum1);

​    alert(fNum1);

​    alert(bIsok);

​    alert(oPerson)

​    alert(oPerson.name)

​    alert(oPerson.age)

​    // 查看数据类型使用typeof

​    alert(typeof(iNum1));

​    alert(typeof(bIsok));

​    alert(typeof(unData));

​    alert(typeof(oData));

​    // 由于js历史原因，设计之前没有null类型，null值归属于object类型，后续语言迭代后也没有进行修改

​    console.log(oPerson.name);

​    // 同时定义多个变量

​    var iNum2 =3, sStr =4;

​    console.log(iNum2)

  </script>

</head>

<body>

</body>

</html>

4.函数的定义和调用

<!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>
    <script>
        // 定义函数的关键字function
        function fnShow(){
            alert('我是一个有返回值的参数');
        };
        // 调用函数
        fnShow()
        function fnSum(iNum1,iNum2){
            var iResult = iNum1 + iNum2;
            return iResult
            alert('测试代码');
        }
        var iNum = fnSum(1,2)
        alert(iNum)
        // return关键字的特点： 可以为函数提供返回值，return后的代码不再执行
    </script>
</head>
<body>
    
</body>
</html>

5.全局变量和局部变量

<!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>
    <script>
        function fnShow()
        {
            // 局部变量
            var iNum = 1;
            alert(iNum)
        }
        // 调用函数
        fnShow()
        // 在函数外定义的变量可以在不同的函数内使用，并且不同函数可以共享全局变量
        var iNum1 = 1; 
        function fnModify()
        {
            alert(iNum1);
            iNum1 = 5;
            // ++ 等价于 += 1
            iNum1++
            alert(iNum1)
        }
        fnModify()
        // js可以数字类型与字符串直接进行相加，把数字自动
        alert("函数外访问的全局变量 ：" + iNum1);
    </script>
</head>
<body>
    
</body>
</html>

6.条件判断比较运算符

<!-- 条件语句语法

if 语句 -只有当指定条件为True时，使用该语句来执行其他代码

if ... else 语句 -当条件为true时执行代码，当条件为false时执行其他代码

if ... else if ...else 语句 -使用该语句来判断多条件，执行条件成立的语句

-->

7.获取标签元素

<!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>
    <!-- <script>
        // document js的内置对象，html的文档对象、
        // 如果获取的对象是null，表示标签没有获取成功
        var oDiv = document.getElementById('div1');
        alert(oDiv);
    </script> -->
    <!-- <script>
        function fnLoad(){
            var oDiv = document.getElementById('div1');
            alert(oDiv);
        }
        window.onload=fnLoad;
    </script> -->
    <script>
        window.onload=function(){
            var oDiv = document.getElementById('div1');
            alert(oDiv);
        }
    </script>
</head>
<body>
   <div id="div1">这是一个div标签</div> 
</body>
</html> 
<!-- <script>
    var oDiv = document.getElementById('div1');
        alert(oDiv);
</script> -->

8.标签属性的获取和设置

<!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>
    <style>
        .btnstyle{
            background: yellow;
            /* font-size: 30px; */
        }
    </style>
    <script>
        window.onload=function(){
            // 根据id获取标签对像
            var oBtn = document.getElementById("btn1");
            // 获取标签的属性
           alert(oBtn.value); 
           alert(oBtn.type);
            // 设置标签属性
            oBtn.name = "hemingkang";
            // 设置样式的属性
            // oBtn.style.background="red";
            // 相当于设置class ，以后通过类选择器给标签添加样式
            // 注意点： class 这里变成className
            oBtn.className="btnstyle";
            oBtn.style.fontSize ="30px";
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
</body>
</html>

9获取和设置标签内容

<!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>

    <script>

​    window.onload = function(){

​      // 根据标签的id获取标签对象

​      var oDiv = document.getElementById("div1")

​      // 获取标签内容

​      alert(oDiv.innerHTML);

​      // 设置标签内容

​      oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"

​    }

  </script>

</head>

<body>

    <div id="div1">

​    我是caicai，我菜，需要不断的学习

  </div>

</body>

</html>

10数组的定义和数组的操作

// 数组里面的数据可以是不同类型的数据

<!-- 数组的定义 -->

// 实例化对象的创建 

var aList = new Array(1,2,3);



// 字面量方式创建

var aList2 = [1,2,3,['a','b','c']];



// 多维数组

// 多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组

var aList = [[1,2,3],['a','b','c']];



数组的操作

获取数组的长度

var aList = [1,2,3,4];

alert(aList.length); //弹出4

11循环语句

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有：

for

while

do-while （不管条件是否成立，至少执行一次）

<!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>
    <script>
        // // for 循环
        var array = [1, 4, 5];
        // for(var index=0; index < array.length; index++){
        //     result = array[index];
        //     alert(result)
        // }
        // var index = 0;
        // // while 循环
        // while(index < array.length){
        //     var oValue = array[index];
        //     alert(oValue)
        //     index++;
        // }
        var index = 5;
        do{
            alert('ok');
            // 这里需要完成取值操作,不管条件是否成立，至少执行一次
            var oValue = array[index];
                alert(oValue)
                index++;
        }while(index < array)
    </script>
</head>
<body>
</body>
</html>

12字符串拼接

字符串拼接使用：“+”运算符

字符串可以和数字直接进行合并

数字和字符串拼接会自动进行类型转换（隐式类型转换），把数字类型转换成字符串类型进行拼接

13定时器

13.1定时器在一段特定的时间后执行某段代码

13.2定时器的使用

js定时器有两种创建方式：

  1. seTimeout(func[,delay,param1,param2,...]);以指定的时间间隔（以毫秒计）调用一次定时器
  2. setInterval(func[,delay,param1,param2,...]):yellow_heart:以指定的时间间隔（以毫秒计）重复调用一个定时器

参数说明：

第一个参数func,表示定时器要执行的函数名

第二个参数delay,表示时间间隔,默认是0,单位是毫秒

第三个参数param1,表示定时器执行函数的第一个参数

<!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>
    <!--定时器1：根据指定的时间间隔延时调用指定的函数-->
    <script>
    //     function fnShow(name,age){
    //         alert("ok" + name + age);
    //         alert(tid)
    //         // 销毁定时器
    //         clearTimeout(tid);
    //     }
    // // 根据时间间隔调用一次函数的定时器
    // var tid = setTimeout(fnShow,1000,"hemingkang", 20)

    // 根据时间间隔重复函数的定时器
    function showIfo(name, age){
        alert("ok" + name + age);
        // 根据时间间隔重复函数的定时器

    }
    function fnStop(){
        alert(tid)
        clearInterval(tid);

    }
    var tid = setInterval(showIfo, 3000, "hekang", 20);
    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop();">
</body>
</html>
上一篇：进程


下一篇：RAID