
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello');
        // alert是弹出会话框显示字符串内容的API
    </script>
</body>
</html>

2.2 行内式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div onclick="alert('hello')">
        click
    </div>
</body>
</html>

运行以下代码后，初始页面如下：

点击文本后出现弹窗：

将js代码直接嵌入到html元素内部，进行点击div时才加载运行script标签；

2.3 外部式

在同目录下创建.js文件：

alert("hello");

在.html文件中插入.js文件：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="hello.js"> </script>
</body>
</html>

以上三种方式运行后显示页面均如下：

注：（1）HTML的注释是，CSS的注释是/* */，JS的注释是 //或 /* */；

（2）内嵌式与外部式都是在页面加载的时候执行script代码，行内式是在执行到html标签内容时才会执行script代码；

3. 输出

3.1 alert

（1）alert可以弹出一个警示对话框，从而看到输出；

（2）alert是一个模态对话框，即弹出来后会组织用户操作页面其他部分；

3.2 console.log

（1）console.log可以在控制台上进行输出；

（2）JavaScript没有字符、字符串的类型区分，单双引号均可（MySQL同）；


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log('hello world');
    </script>
</body>
</html>

在Chrome网页开发者工具栏console标签页就可以看到输出结果：

注：console.log并不能被认为是一种可以和用户进行交互的一种手段，而是可以帮助程序员进行调试；

4. 变量的使用

4.1 创建变量

4.1.1 使用var


<body>
    <script>
        var a=10;
        console.log(a);
        var b="hello";
        console.log(b);
    </script>
</body>

注：（1）使用var 变量名=初始值;

（2）JS定义变量不必写类型，其类型是通过初始化操作的值来确定的；

（3）JS中没有整数、小数类型，即不区分int与double，只有number类型；

4.1.2 使用let

注：（1）var属于老式写法，存在一些弊端，如：无法报错变量重复定义：


    <script>
        var a=10;
        var a=10;
        console.log(a);
    </script>

在Chrome网页console标签页可查看该代码可正常运行不报错：

但是let是新式写法，更接近主流语言C++,Java等写法；

试将var改为let再运行后查看console标签页：

会发现重复定义变量报错；

还有变量作用域的问题等等，故而let使用的更多；

4.1.3 动态类型变量


<body>
    <script>
        let a=10;
        console.log(a);
        a="hello";
        console.log(a);
    </script>
</body>

打开Chrome网页的console标签页可以查看运行结果：

注：（1）JavaScript是一个动态类型的编程语言，一个变量在程序运行过程中可以发生改变；

像C语言、C++、Java就是静态类型编程语言；

像Python、JS、PHP、Lua等就是动态类型编程语言；

（2）动态类型的优点在于代码非常灵活，但弊端在于一个变量的类型、数值以及相关方法与属性都是不确定的；

4.2 基本数据类型

（1）number：数字，不区分整数和小数；

（2）boolean：true和false；

（3）string：字符串类型；

（4）undefined：只有唯一的值undefined，表示未定义的值；（没有盒子）

（5）null：只有唯一的值null，表示空值；（空盒子）

4.3 运算符

JavaScript的运算符与Java基本相同，此处仅罗列不同或新增运算符：

试运行以下代码：


    <script>
        let a=10;
        let b='10';
        console.log(a==b);
        console.log(a===b);
        
        let c=1;
        let d=0;
        let e=true;
        let f=false;
        console.log(c==e);
        console.log(d==f);
    </script>

打开Chrome网页的console标签页查看运行结果：

在JavaScript中，不只有==判等符号，还有===判等符号：

（1）== ：比较相等（JS在进行不同类型的比较或运算时，会尝试尽可能地转成想同类型）

===：比较相等（不会进行隐式类型转换，先比较类型，类型不同则不等）

（2）!= 与 !== 同理；

注：像Java这种不太支持隐式类型转换的语言称为强类型语言，JS这种比较能支持隐式类型转换的语言称为弱类型语言；

5. 数组

5.1 创建数组

5.1.1 使用new关键字创建

        let arr=new Array();

5.1.2 使用字面量方式创建


        let arr2=[];
        let arr3=[1,2,3,4];

注：JavaScript中不要求数组元素是相同类型，故而以下写法是允许的：

        let arr4=[1,2.5,"hello",false];

5.2 数组元素的访问与修改


        let arr=['Mike','Mary','Jhon'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr);
        arr[1]='Lucy';
        console.log(arr);

打开Chrome网页的console标签页，查看运行结果：

注：（1）如果超出下标范围访问数组元素：


        let arr=['Mike','Mary','Jhon'];
        console.log(arr[100]);
        console.log(arr[-1]);

运行结果为：

程序仍然正常执行，并未因为下标越界而异常终止；

（2）试运行以下代码：


        let arr=['Mike','Mary','Jhon'];
        console.log(arr);
        console.log('arr[100]= '+arr[100]);
        arr[-1]="xxxx";
        console.log(arr);
        arr[100]="yyyy";
        console.log(arr);
        arr["hello"]="zzzz";
        console.log(arr);

运行结果为：

JS的数组不仅是一个传统意义的数组，更是一个数组+Map的混合体，即带有“键值对”性质，很多动态类型语言都是如此，如PHP；

5.3 数组的遍历


        let arr=['Mike','Mary','Lucy'];
        console.log('方法1：for循环')
        for(let i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        console.log('方法2：for-each1')
        for(let i in arr){
            // i为数组元素下标
            console.log(arr[i]);
        }
        console.log('方法3：for-each2')
        for(let elem of arr){
            // elem为数组元素
            console.log(elem);
        }

运行结果如下：

5.4 新增与删除数组元素

5.4.1 数组尾插元素 push


        let arr=['Mike','Mary','Lucy'];
        console.log(arr);
        arr.push('Jike');
        console.log(arr);

运行结果如下：

5.4.2 数组删除元素 splice

splice不仅可以用于删除元素，还可以用来插入、删除等等，


solice(startIndex, count, 变长参数)
// 会将变长参数替换到参数位置指定区间之内
// 如果没有变长参数，即删除；
// 如果变长参数个数=指定区间元素个数，即修改；
// 如果变长参数个数>指定区间元素个数，即新增；

试运行以下代码：


        let arr=['Mike','Mary','Lucy','Jike'];
        console.log(arr);
        arr.splice(2,1);
        console.log(arr);
        arr.splice(2,0,'John');
        console.log(arr);

运行结果如下：

6. 函数

6.1 语法格式


// 创建函数/函数声明/函数定义
function 函数名(形参列表){
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)         // 不考虑返回值
返回值=函数名(实参列表)  // 考虑返回值

注：（1）JS函数定义时不需要写返回值类型；

（2）JS不是面向对象的编程语言，故而也不存在封装、继承、多态等特点；

示例如下：


        function add(x,y){
            return x+y;
        }
        console.log(add(10,2));
        console.log(add('hello','world'));
        console.log(add(10,true));
        console.log(add(undefined,10));
        console.log(add(undefined,'10'));

运行结果为：

注：（1）undefined与数字相加，是将undefined转换为"undefined"再与数字相加，即最终结果不是一个数字，会返回NaN，即not a number；

但undefined与字符串相加，即为字符串拼接；

6.2 参数个数

（1）如果实参个数少于形参个数，则多出的形参值为undefined：


        function add(x,y){
            return x+y;
        }
        console.log(add(10));
        console.log(add('10'));

运行结果为：

（2）如果实参个数比形参个数多，则多出的实参不参与运算：


        function add(x,y){
            return x+y;
        }
        console.log(add(10, 20,30));

运行结果如下：

注：（1）每个函数内部会自动定义一个arguments变量，相当于一个数组，包含了所有实参，故而可以使用arguments获取到所有实参：


        function add(){
            let result=0;
            for(let elem of arguments){
                result += elem;
            }
            return result;
        }
        console.log(add(10));
        console.log(add(10,20));
        console.log(add(10,20,30));
        console.log(add(10,20,30,40));

运行结果如下：

对于JS这样的动态类型语言来说，不需要重载这样的语法；

6.3 函数表达式


        let add = function(){
            let result=0;
            for(let elem of arguments){
                result+=elem;
            }
            return result;
        }

注：（1）这种函数写法是：先定义了一个匿名函数，再将匿名函数赋值给一个add变量，这个add变量就是一个function类型变量：

        console.log(typeof(add));

且function类型变量是可以调用的，即在该种函数定义方式下，以下代码仍然可以正常运行：

        console.log(add(10,20,30));

JS中可以像普通变量一样将函数赋值给一个变量，同时也可以把函数作为一个函数的参数，或者把函数作为另一个函数的返回值，这一点Java是无法做到的；

6.4 作用域

JS中，有作用域链的概念，即：JS会先在当前作用域找，如果没有，依次向上层作用域找，直至全局作用域，如果仍然查询无果，就报错或undefined；

示例代码1：


        let num=1;
        function test1(){
            let num=2;
            function test2(){
                let num=3;
                console.log("test2:"+num);
            }
            test2();
            console.log("test1:"+num);
        }
        test1();
        console.log("global:"+num);

运行结果如下：

示例代码2：


        let num=1;
        function test1(){
            let num=2;
            function test2(){
                console.log("test2:"+num);
            }
            test2();
            console.log("test1:"+num);
        }
        test1();
        console.log("global:"+num);

运行结果如下：

当在test2函数中查找num无果，就会向上查找，找到定义在test1函数中的num=2，故而打印2；

7.对象

首先需要明确：JS不是面向对象的编程语言，但是存在对象的概念；

故而JS中关于对象的设定与Java差别很大，JS中没有封装、继承、多态，甚至没有类；

在JS中没有类，所有的对象类型都是Object；

JS的对象是有属性也有方法的；

7.1 创建对象方式1：使用字面值常量


        let student={
            name:'Mike',
            age:20,
            height:180,
            weight:75,
            learn:function(){
                console.log("JavaScript");
            },
            leisure:function(){
                console.log("Entertainment");
            }
        };
        console.log(student.name);
        console.log(student.age);
        student.learn();
        student.leisure();

运行结果如下：

7.2 创建对象方式2：使用new Object


        let student = new Object();
        student.name="Mike";
        student.age=20;
        student.learn=function(){
            console.log("JavaScript");
        }
        student.leisure=function(){
            console.log("Entertainment");
        }

注：

（1）这种创建方式中的对象的属性、方法都不是提前约定好的，随时都可以新增属性或方法；

（2）其实还可以通过构造函数创建对象，但是并不常用；

（3）在JS的ES6版本中，引入了class关键字，JS也可以定义类，再通过类创建对象，更接近Java了；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/87794

华为OD机试 -基站维修工程师（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_华为od基站维修工程师

小王是一名基站维护工程师，负责某区域的基站维护。某地方有n个基站（1基站之间的距离s（0基站x到基站y的距离，与基站y到基站x的距离并不一定会相同。小王从基站1出发，途经每个基站1次，然后返回基站1，... [详细]

踩

article

华为OD机试 - 用户调度（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_js 华为od 用户调度

在通信系统中有一个常见的问题是对用户进行不同策略的调度，会得到不同系统消耗的性能。假设由N个待串行用户，每个用户可以使用A/B/C三种不同的调度策略。不同的策略会消耗不同的系统资源，请你根据如下规则进行用户调度，并返回总的消耗资源数。规则是... [详细]

踩

article

华为OD机试 - 寻找路径（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_华为od 二叉树也可以用数组来存储, 给定一个数组,树的根节点的值储存在下标1,

二叉树也可以用数组来存储，给定一个数组，树的根节点的值储存在下标1对于储存在下标n的节点，他的左子节点和右子节点分别储存在下标2*n和2*n+1并且我们用-1代表一个节点为空。给定一个数组存储的二叉树，试求从根节点到最小的叶子节点的路径，路... [详细]

踩

article

华为OD机试 - 任务调度（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_js 面试题大量任务的调度

为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1s内新增的任务个数，且每秒都有新增任务，假设GPU最多一次执行n个任务，一次执行耗时1s在保证GPU不空闲的情况下，最少需要多长时间执行完成。... [详细]

踩

article

华为OD机试 - 射击比赛（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_od 射击比赛思路

给定一个射击比赛成绩单包含多个选手若干次射击的成绩分数请对每个选手按其最高三个分数之和进行降序排名输出降序排名后的选手ID序列。_od射击比赛思路od射击比赛思路射击比赛题目给定一个射击比赛成绩单包含多个选手若干次射击的成绩分数请对每个选手... [详细]

踩

article

华为OD机试 - 找到它（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_华为od机考javascript输入

找到它是个小游戏，你需要在一个矩阵中找到给定的单词假设给定单词HELLOWORLD，在矩阵中只要能找HELLOWORLD就算通过注意区分英文字母大小写，并且你只能上下左右行走不能走回头路。_华为od机考javascript输入华为od机考j... [详细]

踩

article

华为OD机试 - 打印文件（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_华为od 有5台打印机打印文件,每台打印机有自己的待打印队列。因为打印的文件内容

有5台打印机打印文件，每台打印机有自己的待打印队列。因为打印的文件内容有轻重缓急之分，所以队列中的文件有1~10不同的优先级，其中数字越大优先级越高。打印机会从自己的待打印队列中选择优先级最高的文件来打印。如果存在两个优先级一样的文件，则选... [详细]

踩

article

华为OD机试 - 运动会（JavaScript） | 机试题+算法思路+考点+代码解析【2023】_js机考运动会

这道题可以按照身高和体重进行排序，具体的做法是：先将身高相同的学生按照体重从小到大排序，然后再将身高不同的学生按照身高从小到大排序。因此，我们可以将每个学生的信息保存在一个数组中，然后使用。为原创内容，该部分版权由OD联盟共同拥有，并授权组... [详细]

踩

article

【华为OD机试 2023】打印机队列（C++ Java JavaScript Python）_打印机队列java题目

因为打印的文件内容有轻重缓急之分，所以队列中的文件有1~10不同的代先级，其中数字越大优先级越高。每个测试用例第一行给出发生事件的数量N（0队列_的那个文件。打印机会从自己的待... [详细]

踩

article

【满分】【华为OD机试真题2023 JS】打印文件_华为od机试真题2023(javascript)

打印文件题目描述：有5台打印机打印文件，每台打印机有自己的待打印队列。因为打印的文件内容有轻重缓急之分，所以队列中的文件有1~10不同的优先级，其中数字越大优先级越高。打印机会从自己的待打印队列中选择优先级最高的文件来打印。如果存在两个优先... [详细]

踩

article

【Javascript】remove()删除当前节点和removeChild()删除子节点用法_javascript删除节点

介绍JavascriptremoveChild()删除子节点的方法，具体详情如下所示：在Javascript中，。_javascript删除节点javascript删除节点文章目录删除当前节点document.getElementById(... [详细]

踩

article

Javascript removeChild()删除节点及删除子节点的方法

下面给大家介绍JavascriptremoveChild()删除节点的方法，具体详情如下所示：在Javascript中，只提供了一种删除节点的方法：removeChild()。removeChild()方法用来删除父节点的一个子节点。语法：... [详细]

踩

article

【JavaEE】网络编程 TCP/UDP

网络编程~~~【JavaEE】网络编程TCP/UDP作者主页：paperjie_博客本文作者：大家好，我是paperjie，感谢你阅读本文，欢迎一建三连哦。本文于《JavaEE》专栏，本专栏是针对于大学生，编程小白精心打造的。笔者用重金(时... [详细]

踩

article

javaEE - 21（ 15000字 Tomcat 和 HTTP 协议入门 -2）

15000字Tomcat和HTTP协议入门第二篇javaEE-21（15000字Tomcat和HTTP协议入门-2）一：HTTP响应1.1认识“状态码”(statuscode)状态码表示访问一个页面的结果.(是访问成功,还是失败,还是其他的... [详细]

踩

article

编程开发(C/C++&Java&Python&JavaScript&Go&PHP&Ruby&Perl&R&Erlang)

使用Docker快速部署主流编程语言的开发、编译环境及其常用框架，包括C、C++、Java、Python、JavaScript、Go、PHP、Ruby、Perl、R、Erlang等。在今后采用编程语言开发和测试时，将再也不用花费大量时间进行... [详细]

踩

article

JavaScript 跨窗口通信（Cross-Window Communication）

在现代Web开发中，跨窗口通信是一种常见需求。它允许在不同的窗口或框架之间传递数据和消息，从而实现各种功能。本章将介绍如何在JavaScript中实现跨窗口通信。跨窗口通信的常见场景跨窗口通信的不同方法每种方法的优缺点如何选择合适的跨窗口通... [详细]

踩

article

python julia go_一键把你的 Java ,Go, PHP , Node/JavaScript, Python , Ruby, Julia 函数变成一个服务...

fxPoorman'sfunctionasaservice.IntroductionfxisatooltohelpyoudoFunctionasaServiceonyourownserver.fxcanmakeyourstatelessfu... [详细]

踩