Javascript

简介: Javascript

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>
AI 代码解读

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)

​    // 查看数据类型使用typeofalert(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>
AI 代码解读

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>
AI 代码解读

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>
AI 代码解读

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> -->
AI 代码解读

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>
AI 代码解读

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>
AI 代码解读

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
AI 代码解读

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>
AI 代码解读

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>
AI 代码解读
目录
打赏
0
0
0
0
5
分享
相关文章
hbase源码系列(六)HMaster启动过程
这一章是server端开始的第一章,有兴趣的朋友先去看一下hbase的架构图,我专门从网上弄下来的。
2150 0
R语言中的数据类型转换:解决常见问题的技术指南
【8月更文挑战第28天】数据类型转换是R语言编程中的一项基本技能,对于确保数据处理的准确性和效率至关重要。本文介绍了R中的基本数据类型及其转换方法,并探讨了解决常见问题的一些技巧。掌握这些知识和技巧,将有助于你更加高效地利用R语言进行数据分析和统计建模。
阿里云身份安全与密评合规实践分享
本次分享由阿里云智能集团高级安全产品专家易鑫和九州云腾安全产品专家杨念念主讲,聚焦云上密码服务助力企业密评合规及阿里ADAS在企业上云过程中的身份安全管理。
287 7
数字孪生在航空航天领域的应用
数字孪生技术在航空航天领域的应用日益广泛,从设计、制造、测试到运营和维护,全面革新了传统工作模式。通过创建物理实体的虚拟复制品,实现实时模拟、预测和优化,显著提升产品性能、安全性和经济效益。具体案例如嫦娥五号探测器和C919客机的成功应用,展示了数字孪生技术的巨大潜力和未来前景。
怎么把Python脚本打包成可执行程序?
该文档介绍了如何将Python脚本及其运行环境打包成EXE可执行文件,以便在不具备Python环境的计算机上运行。首先确保Python脚本能够正常运行,然后通过安装PyInstaller并使用`--onefile`参数将脚本打包成独立的EXE文件。此外,还提供了去除命令行窗口和指定可执行文件图标的详细方法。这些步骤帮助用户轻松地将Python程序分发给最终用户。
118 3
怎么把Python脚本打包成可执行程序?
【Python】已解决:UnicodeEncodeError: ‘utf-8’ codec can’t encode character ‘\udf76’ in position 32: surrog
【Python】已解决:UnicodeEncodeError: ‘utf-8’ codec can’t encode character ‘\udf76’ in position 32: surrog
156 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问