JavaScript快速入门

目录

一、初始JavaScript

1、JavaScript是什么

2、JavaScript快速上手

3、引入方式

二、基础语法

1、变量

2、数据类型

3、运算符

三、JavaScript对象

1、数组

（1）数组的定义

a、使用 new 关键字创建

b、使用字面量方式创建（常用）

（2）数组操作

2、函数

（1）语法格式

（2）关于参数个数

（3）函数表达式

3、对象

（1）使用 字面量 创建对象[常用]

（2）使用 new Object 创建对象

（3）使用 构造函数 创建对象

一、初始JavaScript

1、JavaScript是什么

        JavaScript(简称JS),是一个脚本语言,解释型或者即时编译型语言。虽然它是作为开发Web页面的脚本语言而著名，但是也应用到了很多非浏览器的环境中。

        但它和Java没有半毛钱关系，只是名字相似，可以理解为是当年JavaScript为了蹭Java的热度，才起的这个名字。

        HTML、CSS、JavaScript之间的关系。如图：

        HTML： 网页的结构（骨）

        CSS：网页的表现（皮）

        JavaScript：网页的行为（魂）

2、JavaScript快速上手

        JavaScript是用<sript></script>标签包裹的，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<sr>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("Hello World")
    </script>
</body>
</html>

        结果如下：

3、引入方式

引入方式语法描述示例
行内样式直接嵌入到html内部

<input type="button" value="点我一下"

οnclick="alert('haha')">

内部样式定义<script>标签,写到script标签中

<script>

        alert("haha!");

</script>

外部样式定义<script>标签,通过src属性引入外部js文件<script src="???.js"></script>

        3种引入方式对比：

1、内部样式：会出现大量的代码冗余，不方便后期的维护，所以不常用。

2、行内样式：只适合于写简单样式，只针对某个标签生效。缺点是不能写太复杂的js。

3、外部样式：html 和 js 实现了完全分离，企业开发常用方式。

二、基础语法

        JavaScript虽然一些设计理念和Java相差甚远，但是在基础语法层面上还是有一些相似之处的。

1、变量

关键字解释示例
var早期JS中声明变量的关键字,作用域在该语句函数范围内var name='zhangsan';
lesES6种新增声明变量的关键字,作用域在该语句所在代码块内les name='zhangsan';
const声明变量的,声明变量后不能修改const name='zhangsan';

注意事项：

a、JavaScript是一门动态弱类型语言，变量可以存放不同类型的值（动态），例如：

<script>
        var name = "zhangsan";
        var age = 20;
</script>

        随着程序的运行，变量的类型可能会发生改变。（弱类型）

<script>
        var a = 10;//数字
        a = "haha";//字符串
</script>

        而Java是静态强类型语言，在变量声明时，需要明确定义变量的类型。如果不强制转换，类型不会发生变化。

b、变量名命名规则：

1）、组成字符可以是任何字母、数字、下划线（_）或美元符号（$）。

2）、数字不能开头。

3）、建议使用驼峰命名。

c、+ 表示字符串拼接，也就是把两个字符串首尾相接变成一个字符串。

d、\n 表示换行。

2、数据类型

        虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为：原始类型 和 引用类型，具体有如下类型：

数据类型描述
numbernumber,不区分小数和整数.
string

字符串类型.

字符串面值需要使用引号引起来,用双引号或者单引号皆可

booleantrue真,false假
undifined表示变量未初始化

        代码如下：

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

        var b = "hello";
        console.log(typeof b);//string

        var c = true;
        console.log(typeof c);//boolean

        var d;
        console.log(typeof d);//undefined

        var e = null;
        console.log(typeof e);//null
</script>

        结果如下：

3、运算符

        JavaScript中的运算符和Java用法基本相同。

运算符类型运算符
算术运算符+，-，*，/，%
自增自减运算符++，--
赋值运算符=，+=，-=，*=，/=，%=
比较运算符

<，>，<=，>=，！=，！==

== 比较相等（会进行隐式类型转换）

=== 比较相等（不会进行隐式类型转换）

逻辑运算符&&，||，！
位运算符

& 按位与

| 按位或

~ 按位取反

^ 按位异或

移位运算符

<< 左移

>> 有符合右移（算术右移）

>>> 无符号右移（逻辑右移）

三元运算符条件表达式 ? true_value : false_value


 

        代码示例：

<script>
        console.log(age == age1);//true，会进行隐式转换,比较的是值，值是一样的
        console.log(age === age1);//false，不会进行隐式转换，类型不一样
        console.log(age == age2);//true，类型和值都一样
</script>

        执行结果：

Java和JavaScript不同之处总结：

1）计算 1 / 2 ：Java的结果是 0；JavaScript 的结果是 0.5。

2）== 比较相等：Java不会隐式转换；JavaScript会进行隐式转换，例子上面已经举出来了。

3）=== 比较相等：Java中没有，JavaScript表示的意思是进行比较时不会进行隐式转换，上面已经举出例子了。

4）!= 和 !== 分别对应上面的 2，3。

三、JavaScript对象

1、数组

（1）数组的定义

        创建数组有两种方式：

a、使用 new 关键字创建

        代码：

       //Array 的 A 要大写
       var arr = new Array();

        结果如下：

        

b、使用字面量方式创建（常用）

        代码：

    var arr1 = [];
    var arr2 = [1, 2, "haha", false];
    console.log(arr1);
    console.log(arr2);

        结果如下：

        

注意：JS的数组不要求元素是相同类型。（这一点和C，C++，Java等静态类型的语言差别很大；但Python，PHP等动态类型语言也是如此）

（2）数组操作

        1、读：使用下标的方式访问数组元素。（从0开始）

        2、增：通过下标新增，或者使用 push 进行追加元素。

        3、改：通过下标修改。

        4、删：使用 splice 方法删除元素。

        代码：

    <script>
        var arr = [1, 2, "haha", false];
        //读取数组
        console.log(arr[0]);//1
        //添加数组元素
        arr[4] = "add";
        console.log(arr[4]);//add
        console.log(arr.length);//5，获取数组的长度
        //修改数组元素
        arr[4] = "update";
        console.log(arr[4]);//update
        //删除数组元素
        arr.splice(4, 1);//都一个参数表示从下标为4的位置开始删除，第二个参数表示要删除多少个元素
        console.log(arr[4]);//undefined     元素已经删除，如果元素不存在，结果为undefined
        console.log(arr.length);//4，获取数组的长度
    </script>

        结果如下：

        

注意：

a、如果下标超出范围读取元素，则结果为 undefined

b、不要给数组名直接赋值，此时会把数组中的所有元素都搞没了。

        相当于本来 arr 是一个数组，重新复制后变成了字符串，代码如下：

        var arr = ["⼩猪佩奇", "⼩猪乔治", "⼩⽺苏西"];
        console.log(arr);
        arr = "猫猫汤姆";
        console.log(arr);

        结果如下：

        

2、函数

（1）语法格式

        格式如下：

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

// 函数调⽤
函数名(实参列表)          // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

        代码演示：

    <script>
        function hello() {
            console.log("hello");
        }
        //如果不调用函数，则没有执行打印语句
        hello();
    </script>

        结果如下：

注意：函数定义并不会执行函数体内容，必须调用函数才会执行，调用几次就执行几次。

（2）关于参数个数

        现有下面函数：

        function sum(a, b) {
            return a + b;
        }

a、实参个数比形参个数多时，则多出来的实参参数不参与函数运算

        代码：

        function sum(a, b) {
            return a + b;
        }
        
        console.log(sum(10, 20, 30));//30

        结果如下：

        

b、实参个数比形参个数少，则多出了的形参值为 undefined

        代码：

        function sum(a, b) {
            return a + b;
        }
        
        console.log(sum(10));//NaN，相当于 num2 位 undefined

        结果如下：

        

        当一个数值类型的变量与undefined进行数学运算时，结果会变为NaN（Not a Number），表示不是一个有效的数值。

（3）函数表达式

        处理上面这种直接定义函数，也可以使用赋值的方式定义函数。代码如下：

        var add = function() {
            var sum = 0;
            for(var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        console.log(add(10, 20));//30
        console.log(add(1,2,3,4));//10
        console.log(typeof add);//function，表示是函数

        执行结果：

        

        此时 形如 function() {   }，这样的写法定义了一个匿名函数（此时函数是没有函数名的，就称为匿名函数），然后将这个匿名函数用一个变量来表示，就可以通过这个变量 add 来调用函数了。

3、对象

在JS中，字符串、数值、数组、数组、函数都是对象，每个对象中包含若干的属性和方法。JavaScript的对象和Java的对象概念上基本一致，只是具体的语法表现形式差别较大。

        属性：事务的特征

        方法：事务的行为

（1）使用 字面量 创建对象[常用]

        字面量创建对象，是使用 { } 创建对象，下面创建一个student对象，代码：

    <script>
        var a = {};//创建了一个空的对象

        var student = {
            name: "蔡徐坤",
            height: 175,
            weight: 170,
            sayHello: function() {
                console.log("hello");
            }
        };
        
    </script>

特点

1、使用 { } 创建对象。

2、属性和方法使用键值对的形式来组织。

3、键值对之间使用逗号 " , " 分割，最后一个属性后面的逗号，可有可无。

4、键和值之间使用分号 " : " 进行分割。

5、方法的值是一个匿名函数 。

使用上面创建的对象的属性和方法，代码：

    <script>
        var a = {};//创建了一个空的对象

        var student = {
            name: "蔡徐坤",
            height: 175,
            weight: 170,
            sayHello: function() {
                console.log("hello");
            }
        };

        //1、使用 . 成员访问运算符来访问属性
        console.log(student.name);
        //2、使用 [ ] 访问属性，此时属性需要加上引号
        console.log(student['height']);
        //3、调用方法，记得要加上 ()
        student.sayHello();
        
    </script>

        方法不能用中括号 " [ ] "。

        结果如下：

（2）使用 new Object 创建对象

        代码：

        var student = new Object();//和创建数组类似
        student.name = "蔡徐坤";
        student.height = 175;
        student["weight"] = 170;
        student.sayHello = function() {
            console.log("hello");
        }
        
        console.log(student.name);
        console.log(student["weight"]);
        student.sayHello();

注意：使用 { } 创建对象，也可以随时使用 student.name = "蔡徐坤"; 这样的方式来新增属性。

（3）使用 构造函数 创建对象

        格式如下：

function 构造函数名(形参) {
    this.属性 = 值;
    this.⽅法 = function...
}
var obj = new 构造函数名(实参);

上面的 this 表示当前这个函数，加上 . 属性就表示这个函数的属性。和Java的一样。

注意：

1、在构造函数内部使用 this 关键字来表示当前正在构建的对象。

2、构造函数的函数名首字母一般是大写的。

3、构造函数的函数名可以是名词。

4、构造函数不需要 return。

5、创建对象的时候必须使用 new 关键字。

        使用构造函数重新创建猫咪对象，代码如下：

        function Cat(name, type, sound) {
            this.name = name;
            this.type = type;
            this.miao = function() {
                console.log(sound);// 别忘了作⽤域的链式访问规则
            }
        }

        var mimi = new Cat("咪咪", "中华田园猫", "喵");
        var xiaohei = new Cat("小黑", "波斯猫", "猫呜呜呜");
        var ciqiu = new Cat("刺球", "布鲁斯猫", "咕噜噜");

        console.log(mimi);
        mimi.miao;

        执行结果：

        ​​​​​​​

都看到这了，点个赞再走吧，谢谢谢谢谢

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

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

相关文章

byobu

byobu

byobu 终端多路复用器 一、byobu 安装二、byobu 使用三、其他终端多路复用器四、ssh byobu 远程协作 系统环境: linux(ubuntu,debian,kali) 一、byobu 安装 byobu 是包装过的tmux #sudo apt install tmux sudo apt install byobubyobu二、byobu 使用 创建窗口: Ctrl a c…
阅读更多...
Linux应用开发笔记（五）网络编程（二）多线程编程

Linux应用开发笔记（五）网络编程（二）多线程编程

文章目录 前言一、线程和进程1. 进程&#xff08;Process&#xff09;2. 线程&#xff08;Thread&#xff09;3. 二者的比较 二、多线程和多进程三. 代码编写1. 相关函数pthread_create( )函数pthread_exit( )函数pthread_join( )函数 2. 线程同步3. 互斥量4. 条件变量5. 实验代…
阅读更多...
数据结构-上三角矩阵存储方式[0知识掌握]

数据结构-上三角矩阵存储方式[0知识掌握]

目标&#xff1a;看完本文章你将会了解上三角矩阵的存储方式以及矩阵中数据的位置索引号如何求 难点&#xff1a;上三角矩阵的公式推导&#xff0c;上三角任意位置对应的存储位置。 一、准备知识 1.求和公式 前n项和&#xff1a;Sn n(a1an)/2 公差&#xff1a;d后项-前项…
阅读更多...
冯喜运：4.16中东对抗风暴下，黄金原油市场何去何从？

冯喜运：4.16中东对抗风暴下，黄金原油市场何去何从？

黄金行情走势分析&#xff1a;4小时图布林道开始收口&#xff0c;昨日下探至下轨附近&#xff0c;也是此前的起涨低点2320启稳上升&#xff0c;十字K线配合单阳拉起&#xff0c;重新去摸高上轨。目前4小时图处于摸高当中。周线和日线留意多空转换&#xff0c;摸高之后是强势延续…
阅读更多...
GPT提示词分享 —— 解梦

GPT提示词分享 —— 解梦

&#x1f449; 对你描述的梦境进行解读。 我希望你能充当一个解梦者。我将给你描述我的梦&#xff0c;而你将根据梦中出现的符号和主题提供解释。不要提供关于梦者的个人意见或假设。只提供基于所给信息的事实性解释。 GPT3.5的回答 GPT3.5 &#x1f447; 感觉有点傻&#xf…
阅读更多...
5.前后端分离

5.前后端分离

目录 一、前后端分离上传文件 1.在yml中设置port和localhost 2.如何使用postman测试上传文件的接口 二、如何导出excel文件 ​编辑1.在pom.xml中导包 2.在实体类中给每个字段添加注解&#xff0c;导出表格时&#xff0c;列名将会改为对应的中文 3.controller中方法的具体…
阅读更多...
AI大模型日报#0416：李飞飞《2024年人工智能指数报告》、Sora加入Adobe、李彦宏聊百度大模型之路

AI大模型日报#0416：李飞飞《2024年人工智能指数报告》、Sora加入Adobe、李彦宏聊百度大模型之路

​导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 刚刚&#xff0c;李飞飞团队发布《2024年人工智能指数报告》&#xff1a;10大趋势&#xff0c;揭示AI大模型的“喜”与“忧” 摘…
阅读更多...
origin绘图操作合集

origin绘图操作合集

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、图例去掉边框二、柱状图单独选中某一柱子修改颜色&#xff0c;柱状图中设置一个柱子的方法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…
阅读更多...
【LatentDiffusion 代码详解（1）】LatentDiffusion 的 yaml 解读

【LatentDiffusion 代码详解（1）】LatentDiffusion 的 yaml 解读

YAML 文件提供了一种清晰、简洁且易于理解的方式来描述配置信息&#xff0c;特别适用于机器学习模型的超参数调优和实验管理。 以 Latent Diffusion 官方代码仓库中的 https://github.com/CompVis/latent-diffusion/blob/main/configs/autoencoder/autoencoder_kl_32x32x4.yam…
阅读更多...
Spring Task 定时任务（含结合cron 表达式）

Spring Task 定时任务（含结合cron 表达式）

目录 一、Spring Task的介绍 二、使用方法 2.1 配置类启用定时任务支持&#xff1a; 2.2 同步定时任务 ​编辑2.3 fixedRate 可以看出不能满足我们的日常需求 那如何让其开启异步呢&#xff08;开启多个线程工作&#xff09; 三、Spring Task 结合cron表达式 3.1 corn 表…
阅读更多...
【Linux】解决虚拟机于主机不能共享文件的问题

【Linux】解决虚拟机于主机不能共享文件的问题

结论 不要使用xshell使用mobaxterm进行拖拽
阅读更多...
2.类和对象

2.类和对象

目录 1.类的引入 2.类的定义 3.类的访问限定符及封装 3.1访问限定符 ​编辑 ​编辑 3.2封装 4类的作用域 5.类的实例化 6.类的对象大小的计算 6.1如何计算类对象的大小 6.2类对象的存储方式猜测 6.3 结构体内存对齐规则 7.this指针 7.1this指针的引出 7.2this指针…
阅读更多...
uniapp h5项目上传图片到oss（纯前端）

uniapp h5项目上传图片到oss（纯前端）

需求&#xff1a;后端给前端一个oss上传地址&#xff0c;前端需要根据getCkOSSToken获取stsToken,使用client.put方法将图片上传成功&#xff0c;并且使用canvas压缩图片 效果图 废话不多说&#xff0c;直接上代码&#xff0c;代码可直接复制&#xff0c;运行 准备工作 cnpm…
阅读更多...
Pytorch(GPU版本)简介、安装与测试运行

Pytorch(GPU版本)简介、安装与测试运行

目录 Pytorch简介Pytorch安装查看CUDA版本Pytorch命令安装Pytorch测试运行Pytorch简介 PyTorch是一个开源的Python机器学习库，基于Torch，用于自然语言处理等应用程序。PyTorch既可以看作加入了GPU支持的numpy，同时也可以看成一个拥有自动求导功能的强大的深度神经网络。 2…
阅读更多...
中医圆运动规律

中医圆运动规律

目录 人体圆运动营气在十二经脉的运行规律子午流注与圆运动升降结合图 人体圆运动 营气在十二经脉的运行规律 营气在脉中&#xff0c;卫气在脉外 这个顺序也是子午流注的顺序 子午流注与圆运动升降结合图
阅读更多...
火绒安全的详细用法

火绒安全的详细用法

1. 引言 本章将介绍火绒安全软件的基本概述和用法。火绒安全是一款功能强大的安全软件，提供了多种保护功能和工具，可以帮助您保护计算机免受恶意软件、网络攻击和其他安全威胁的侵害。 2. 火绒安全的功能 火绒安全具有以下主要功能： 实时防护：火绒安全提供实时监测和防护…
阅读更多...
为硬刚小米SU7，华为智界S7整出了「梅开二度」操作

为硬刚小米SU7，华为智界S7整出了「梅开二度」操作

如今国产中大型新能源轿车市场&#xff0c;在小米 SU7 加入后&#xff0c;可算彻底活了过来。 过去几年&#xff0c;咱们自主新能源品牌在 20-30 万元级轿车上发力明显不足&#xff0c;老牌车厂比亚迪汉几乎以一己之力扛起销量担当。 随着新能源汽车消费升级、竞争加剧&#x…
阅读更多...
基于SSM的购物小程序01

基于SSM的购物小程序01

4.1系统架构设计 购物系统设计的系统项目的概述设计分析&#xff0c;主要内容有学习平台的具体分析&#xff0c;进行数据库的是设计&#xff0c;数据采用mysql数据库&#xff0c;并且对于系统的设计采用比较人性化的操作设计&#xff0c;对于系统出现的错误信息可以及时做出处…
阅读更多...
WordPress 多站点切换域名完整指南：详细步骤和注意事项

WordPress 多站点切换域名完整指南：详细步骤和注意事项

因为公司的需要&#xff0c;需要对 WordPress 多站点进行域名切换, 一开始我也找了相关的方案和教程&#xff0c;但是很可惜&#xff0c;国内这一块网上的资料几乎为0&#xff0c;所以我把实现的过程写了一篇文章分享出来&#xff0c;为后来的人铺路。 开始之前&#xff0c;先…
阅读更多...
红黑树（Red Black Tree）

红黑树（Red Black Tree）

红黑树&#xff08;Red Black Tree&#xff09; 红黑树&#xff08;Red Black Tree&#xff09; 是一种自平衡二叉查找树 红黑树是在1972年由Rudolf Bayer发明的&#xff0c;当时被称为平衡二叉B树&#xff08;symmetric binary B-trees&#xff09;后来&#xff0c;在1978年…
阅读更多...
最新文章

Copyright @ 2022~2023

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