JavaEE——简单认识JavaScript

文章目录

  • 一、简单认识 JavaScript 的组成
  • 二、基本的输入输出和简单语法
  • 三、变量的使用
  • 四、JS 中的动态类型
    • 图示解释常见语言的类型形式
  • 五、JS中的数组
  • 六、JS 中的函数
  • 七、JS 中的对象

一、简单认识 JavaScript 的组成

对于 JavaScript ，其中的组成大致分为下面的三类：

  • ECMAScript(简称 ES): JavaScript 语法
  • DOM: 页面文档对象模型, 对页面中的元素进行操作
  • BOM: 浏览器对象模型, 对浏览器窗口进行操作

在这里，因为是简单认识，所以我向大家简单描述 ES 部分和 DOM 中的较为常用的 API。

二、基本的输入输出和简单语法

1. 输入输出

输入： prompt
输出： alter
输出： console.log

2. 这里，我通过最简单的语句，向大家描述 JavaScript 的书写形式。

1.行内式

所谓行内式，就是直接嵌入到 html 的元素内部。

<div onclick="alert('hello js');">这是一个div点我下试试</div>

在这里插入图片描述
这里点击后，就会在页面中弹出这样的弹框。

2.内嵌式

将内容写入 script 标签中

    <script>
        alert("hi JavaScript")
    </script>

在这里插入图片描述
同样，打开网页就会弹出这样的弹窗。

3.外部式

就是将内容单独的写到 .js 文件中。

	alert('hello');

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

在这里插入图片描述

上面描述的就是 JavaScript 的三种代码形式。但是，要注意的是，这里的操作都会弹出一些对话框，会阻止用户进行界面上其他地方的操作。 这种对话框被称之为 “静态对话框”。

为了避免上述情况，在后面我会用另外一种方式，让代码运行的情况在 控制台显示。
使用 console.log 属性就可以在控制台实现打印。
console.log('hello world');
在这里插入图片描述

三、变量的使用

首先，在这里先展示一段代码：

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

在这里插入图片描述
通过上面的代码，我们可以明确的发现一件事情：
在 JS 中，变量的定义不必明确的写出类型！

注意：
在上面的代码中，我们定义变量使用的是 var 。但是，为了更加接近 C++，Java 主流语言，后面关于变量的定义均使用 let 进行定义！

四、JS 中的动态类型

动态类型： 一个变量在程序 运行过程中，类型可以改变。(典型语言：JS，Python，PHP…)
静态类型： 一个变量在程序 运行过程中，类型不能改变。(典型语言：C，Java，C++…)

阐述动态类型的优缺点：
优点：
代码的形式会相对灵活，因为定义一个元素不需要特别明确的类型.
缺点：
当前变量下面是什么类型，内部存储了什么样的值，都是不确定的。

了解 JS 中的几种类型

  • number: 数字. 不区分整数和小数.
  • boolean: true 真, false 假.
  • string: 字符串类型.
  • undefined: 只有唯一的值 undefined. 表示未定义的值.
  • null: 只有唯一的值 null. 表示空值.

这里需要注意 undefined 这个类型，在其他的语言中，如果那个元素没有定义直接报错。而 JS 不会报错，会返回一个 undefined。

解释 JS 中的 “隐式类型转换” 以及代码展示

    <script>
       let a = 10;
        console.log(a);
        a = 'hello';
        console.log(a);

        let c = true;
        let d = 1;
        console.log(c==d);
    </script>

在这里插入图片描述
我们可以发现，这里将不同类型尽可能的转换乘客相同的类型。
在先后面的代码中，出现了将 true 隐式转换为 1 了。

图示解释常见语言的类型形式

我们以 静态类型、动态类型 作为纵坐标。强类型、弱类型 作为横坐标。
如图所示：
在这里插入图片描述
目前所公认的，强类型相较于弱类型更好。
类型强，相当于不同类型之间的区分度就会高。编译器能做的检查工作就比较多，代码就不容易出错。

五、JS中的数组

1.创建数组

	let arr = [];

在 JS 中 [ ] 来表示数组

2.使用数组，在其中存入元素

   let arr1 = [1,'hello',true,[]];

我们可以发现，JS 中，数组中存储的元素不要求统一！可以是任何类型。

3.访问数组中的元素

        let arr1 = [1,'hello',true,[]];
        console.log(arr1[0]);
        console.log(arr1[1]);
        console.log(arr1[2]);
        console.log(arr1[3]);
        console.log(arr1[100]);

在这里插入图片描述
在这里我们发现，越界的访问，并没有造成代码的出错，而是产生了 undefined 。

此时，如果我们给 arr1[100] 进行赋值会产生什么情况？

        arr1[100] = 'haha';
        console.log(arr1[100]);

在这里插入图片描述
如图，我们发现，添加值成功了。

到此，我们就可以发现 JS 中的数组与 Java 在存储元素上有着很大的不同了。

JS 的数组，并不是传统意义上的数组(只能按下标来取)，而是含有一个 “键值对” 这样的特性了。
可以理解为 数组 + Map 这样的混血。

4.JS 中的 for 语句
这里的 for 语句有下面三种写法

        let arr = ['小明','小红','小军'];
        arr[100] = '小亮'
        //遍历数组元素
        for(let i = 0; i < arr.length; i++){
            console.log(arr[i]);
        }
        console.log('----------------------');
        for(let i in arr){
            //此处的 i 是数组的下标
            console.log(arr[i]);
        }
        console.log('----------------------');
        for (let elem of arr) {
            console.log(elem);
        }

在这里插入图片描述
如上图所示，我们会发现，for 循环的条件不同，对应的，这里得到的结果也就会有所不同。

5. 删除数组中的元素——splice 方法删除。

splice(startlndex, count, 边长参数…)
这个方法有四中不同的使用方式。

startlndex： 表示从下标为什么位置的地方开始删除。
count： 表示向后删除几个元素。

用法，就是将后面变长参数的内容，替换到前面的指定区域之中。

  • 如果后面没有变长参数，就相当于删除。
        arr.splice(2,1);
        console.log(arr);

在这里插入图片描述

  • 如果后面的变长参数和前面指定的区间个数一样，此时就是 修改/替换。
        arr.splice(2,1,'替换元素');
        console.log(arr);

在这里插入图片描述

  • 确定下标位置，向后元素数量为 0 ，写如边长参数，此时就会将元素插入到指定位置处。
        arr.splice(1,0,'插入的元素');
        console.log(arr);

在这里插入图片描述

六、JS 中的函数

1.认识 JS 中的函数

在这里插入图片描述
简单实现一个方法

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

我们会发现，这里的函数在定义时并没有对元素给出类型。
所以，同样在传输元素时对元素也没有限定要求。

2. JS 中函数的特性

  • 当实参个数少于形参个数，多余出来的形参的值就是 undefined。
        function add(x,y){
            return x+y;
        }
        console.log(add(10));

在这里插入图片描述

  • 函数表达式
   let add2 = function(){
       let result = 0;
       		for(let elem of arguments){
                result += elem;
            }
       return result;
   }

如上述代码所示，我们先定义了一个匿名函数，然后将函数赋值给一个 add2 变量。

在 JS 中，可以像普通变量一样，将函数赋值给一个变量。
同时，也可以将函数作为另一个函数的参数，或者将函数作为另一个函数的返回值。(在 Java 中这样是不行的)

解释 “将函数作为另一个函数的返回值”
在这里插入图片描述
这种是将 two 中的具体实现方式告诉 one 进行操作。
在这里插入图片描述
这个方法并不知道 two 中具体的实现方式，只是获取其中的最终结果。

3.展示 js 中变量的作用域

        let num = 1;
        function test1(){
            let num = 2;

            function test2(){
                let num = 3;
                console.log('test1:'+num);
            }
            test2();
            console.log('tese2:'+num);
        }
        test1();
        console.log('global:'+num);

在这里插入图片描述

七、JS 中的对象

我们知道 JS 不是面向对象的编程语言，但是在里存在着对象的概念。
同样的，这里所说的对象就和 Java 中的差别很大了。

在 JS 中，没有封装，继承，多态。甚至没有 类！
虽然没有类，但是，所有的对象类都是 object

代码展示对象的创建：

        let student = {
            name: '小明',
            age: '18',
            height: '179',
            weight:'76',
            sing: function(){
                console.log("赞美太阳");
            }
        };

这里有一个常用的写法，我们已经知道所有的对象类都是 object。

        let person = new Object();
        person.name = '李强';
        person.age = 19;
        student.sing = function(){
            console.log('赞美太阳');
        }

js 中的对象有什么数据，有什么方法，这都不是提前约定好的，是可以随时添加的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/417399.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

多线程如何设计？一对多/多对一/多对多

多线程如何设计？一对多/多对一/多对多

二、14个多线程设计模式 参考原文&#xff1a;https://www.cnblogs.com/rainbowbridge/p/17443503.html single Thread 模式 一座桥只能通过一个人 Single Thread模式是一种单线程设计模式&#xff0c;即在一个应用程序中只有一个主线程、一个事件循环&#xff0c;对外只提…
阅读更多...
【C语言基础】：深入理解指针(一)

【C语言基础】：深入理解指针(一)

文章目录 一、内存和地址1. 内存2. 如何理解编址 二、指针变量和地址2.1 取地址操作符(&)2.2 指针变量和解引用操作符(*)2.2.1 指针变量2.2.2 如何拆解指针变量2.2.3 解引用操作符 2.3 指针变量的大小 三、指针变量类型的意义3.1 指针的解引用3.2 指针 - 整数3.3 void*指针…
阅读更多...
什么是物联网？

什么是物联网？

今天这篇文章写的相关内容就是带领大家了解什么是物联网&#xff0c;之前写的文章大多都是一些物联网的未来&#xff0c;行业的解决方案等&#xff1b;话不多说开始进入正题吧! 物联网(IoT)是一个包罗万象的术语&#xff0c;指的是越来越多的电子产品&#xff0c;它们不是传统的…
阅读更多...
vue2+elementui上传照片(el-upload 超简单)

vue2+elementui上传照片(el-upload 超简单)

文章目录 element上传附件&#xff08;el-upload 超详细&#xff09;代码展示html代码data中methods中接口写法 总结 element上传附件&#xff08;el-upload 超详细&#xff09; 这个功能其实比较常见的功能&#xff0c;后台管理系统基本上都有&#xff0c;这就离不开element的…
阅读更多...
计算机组成原理4-存储器的层次结构与程序访问的局部性原理

计算机组成原理4-存储器的层次结构与程序访问的局部性原理

1. 磁盘 1.磁盘的结构 磁盘由盘片构成&#xff0c;每个盘片包含两面 每面由一组称为磁道的同心圆组成 每个磁道划分为一组扇区&#xff0c;扇区之间由间隙隔开 同一半径上的所有磁道组成一个柱面2.磁盘的容量 容量&#xff1a;磁盘上可以存储的最大位数。 决定因素&#xff1a…
阅读更多...
【玩转408数据结构】线性表——双链表、循环链表和静态链表（线性表的链式表示 下）

【玩转408数据结构】线性表——双链表、循环链表和静态链表（线性表的链式表示 下）

知识回顾 在前面的学习中&#xff0c;我们已经了解到了链表&#xff08;线性表的链式存储&#xff09;的一些基本特点&#xff0c;并且深入的研究探讨了单链表的一些特性&#xff0c;我们知道&#xff0c;单链表在实现插入删除上&#xff0c;是要比顺序表方便的&#xff0c;但是…
阅读更多...
IDEA利用鼠标调整字体大小

IDEA利用鼠标调整字体大小

就可以按住ctrl和鼠标调节代码字体的大小啦&#xff01; 如果有用&#xff0c;记得给我来个赞~ 谢啦&#xff01;
阅读更多...
【python基础学习07课_函数基础课】

【python基础学习07课_函数基础课】

一、函数的基础知识 一、函数的作用是用来干什么的&#xff1f; 函数在编程中是一个组织好的、可重复使用的代码块&#xff0c;用于执行一个特定的任务。具体来说&#xff0c;函数的常见作用包括&#xff1a;1、执行计算或数据处理。 2、控制程序的流程&#xff0c;如条件判断…
阅读更多...
Java+SpringBoot+Vue+MySQL：员工健康管理技术新组合

Java+SpringBoot+Vue+MySQL：员工健康管理技术新组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
压缩式 交换式 碎片整理 ：（使碎片减少或没有）

压缩式 交换式 碎片整理 ：（使碎片减少或没有）

交换式碎片整理 首先流程 是 p3这个程序在运行&#xff0c;p1p2p4 的话在等待 &#xff0c;然后p3这时要多用3个内存块&#xff0c;这是 p4 通过拷贝&#xff0c;将内存拷贝到磁盘上&#xff0c;对应的数据也是从主存中cp到磁盘此时主存多出3个内存块给p3继续使用 2.压缩式碎片…
阅读更多...
QML中动态增加表格数据

QML中动态增加表格数据

1.QML中的表格实现 import QtQuick 2.15 import QtQuick.Window 2.15import QtQuick.Controls 2.0 import Qt.labs.qmlmodels 1.0 import QtQuick.Layouts 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")TableModel{id:table_modelTabl…
阅读更多...
Transformer之self-attention

Transformer之self-attention

注意力是一个有助于提高神经机器翻译应用程序性能的概念。在这篇文章中&#xff0c;我们将看看Transformer&#xff0c;一个使用注意力来提高这些模型训练速度的模型。Transformer在特定任务中优于谷歌神经机器翻译模型。最大的好处来自于Transformer如何使自己适合并行化。 在…
阅读更多...
135.乐理基础-半音是小二度吗？全音是大二度吗？三全音

135.乐理基础-半音是小二度吗？全音是大二度吗？三全音

内存参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;134.乐理基础-音程名字的简写-CSDN博客 上一个内容里练习的答案&#xff1a; 半音可以与小二度划等号吗&#xff1f;全音可以和大二度划等号吗&#xff1f; 严格来说它们是不能划等号的&#xff0c;半音与全音是侧…
阅读更多...
Android Studio level过滤查看各个等级的日志

Android Studio level过滤查看各个等级的日志

Android Studio level过滤查看各个等级的日志 旧版as可以在下方的日志输出框选择debug、info&#xff0c;warn、error日志&#xff0c;新版的需要通过在过滤框手动/联想输入 level:xxx&#xff0c;过滤相应等级的日志&#xff0c;如图&#xff1a; android studio/idea返回/前进…
阅读更多...
vue使用gitshot生成gif

vue使用gitshot生成gif

vue使用gitshot生成gif 问题背景 本文将介绍vue中使用gitshot生成gif。 问题分析 解决思路&#xff1a; 使用input组件上传一个视频&#xff0c;获取视频文件后用一个video组件进行播放&#xff0c;播放过程进行截图生成图片数组。 demo演示上传一个视频&#xff0c;然后生…
阅读更多...
Python 从文件中读取JSON 数据并解析转存

Python 从文件中读取JSON 数据并解析转存

文章目录 文章开篇Json简介Json数据类型Json硬性规则Json数据转化网站Json和Dict类型转换json模块的使用Python数据和Json数据的类型映射json.dumps1.字典数据中含有**存在中文**2.json数据通过缩进符**美观输出**3.对Python数据类型中键进行**排序输出**4.json数据**分隔符的控…
阅读更多...
K8S常用kubectl命令汇总（持续更新中）

K8S常用kubectl命令汇总（持续更新中）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
Leetcode—63. 不同路径 II【中等】

Leetcode—63. 不同路径 II【中等】

2024每日刷题&#xff08;115&#xff09; Leetcode—63. 不同路径 II 动态规划算法思想 实现代码 class Solution { public:int uniquePathsWithObstacles(vector<vector<int>>& obstacleGrid) {int m obstacleGrid.size();int n obstacleGrid[0].size();…
阅读更多...
HTTPS 原理和常见面试题及解析

HTTPS 原理和常见面试题及解析

在互联网安全领域&#xff0c;HTTPS 是一个非常重要的协议&#xff0c;也是很多技术岗位面试中经常涉及的话题。下面我们来看一些关于 HTTPS 的常见面试题及答案解析。 ## 1. 什么是 HTTPS&#xff1f; **答案&#xff1a;** HTTPS 是 Hypertext Transfer Protocol Secure&am…
阅读更多...
杭州半日游 - 规划

杭州半日游 - 规划

杭州半日游 https://mbd.baidu.com/newspage/data/dtlandingsuper?niddt_4902055370698452252 11:00 到杭州站 》地铁1号线 30min 午餐可选&#xff1a; 新白鹿餐厅(银泰城店) 最近 17min 2km 知味观(湖滨总店) 30min 3km 》去码头&#xff0c;知味观(湖滨总店) 距此 120…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站