前端基础篇-深入了解 JavaScript(一)

文章目录

        1.0 JavaScript 概述

        2.0 JS - 引入方式

        3.0 JS - 基础语法

        4.0 JS - 数据类型

        5.0 JS - 函数

        6.0 JS - Array 数组

        7.0 JS - String 字符串


        1.0 JavaScript 概述

        JavaScript(简称:JS)是一门夸平台、面向对象的脚本语言。使用来控制网页行为,它能够使网页可交互。JavaScript 与 Java 是完全不同的语言,不论是概念还是设计。

        脚本语言是不用进行编译处理的,直接交给浏览器解析即可,而 Java 等编程语言则是需要通过编译器编译成二进制文件再进一步编译成机器码。

        2.0 JS - 引入方式

内部脚本引入:

        1)将 JS 代码定义在 HTML 页面中。 JS 代码必须位于 <script></script> 标签之间。

        2)在 HTML 文档中,可以在任意地方,放置任意数量的 <script> 。

        3)一般会把脚本置于 <body> 元素的底部,可改善显示速度。

代码如下:

<!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 JavaScript');</script>
</body>
</html>

外部脚本引入:

        1)将 JS 代码定义在外部 JS 文件中,然后引入到 HTML 页面中。

        2)外部 JS 文件中,只包含 JS 代码,不包含 <script> 标签。

        3)引入将标签中属性 src 赋值为外部 JS 文件路径。

        4)<script> 不能自闭合。

代码如下:

<!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="JS/demo.js"></script>;
</body>
</html>

外部文件:

        3.0 JS - 基础语法

        1)区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的。

        2)每行结尾的分号可有可无。

        3)注释:单行注释:// 注释内容

                        多行注释:/*注释内容*/

        4)大括号表示代码块。

        5)输出语句

        有三种方式:警告框、HTML 页面中、浏览器控制台

代码如下:

<!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>// 警告框输出:window.alert('Hello JS');// 页面中输出document.write('Hello JS');//写入浏览器控制台console.log('Hello JS');</script>
</body>
</html>

警告框:

页面中:

浏览器控制台:

        6)变量

        JavaScript 中用 var 关键字(variable 的缩写)来声明变量。JavaScript 是一门弱类型语言,变量可以存放不同类型的值。

        变量名需要遵顼如下规则:

        组成字符可以是任何字母、数字、下划线(_)或美元符号($)。数字不能开头,建议使用驼峰命名。

        var 特点:

                属于全局变量。可以重复定义,后一个会覆盖前一个变量的值。

        let 特点:

                let 也定义变量的一个关键字,但是用该关键字定义的变量是属于局部变量,一旦离开了作用域之后,访问不到该变量。并且在同一个区域内不能重复定义相同名字的变量名。

        const 特点:

                定义一个常量的关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变。

代码如下:

<!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>var id = 1;id = '张三';alert(id);</script>
</body>
</html>

运行结果为:

        4.0 JS - 数据类型

        JavaScript 中分为:原始数据类型和引用类型。

        原始数据类型:

        1)number:数字(整数、小数、NaN(Not a Number))

        2)string:字符串,单双引号都可以。

        3)boolean:布尔。true,false

        4)null:对象为空。

        5)undefined:当声明的变量未初始化时,该变量的默认子是 undefined

        用 typeof() 可以获取数据类型。

运算符:

        运算符还是很简单的,这里就不过多赘述了。但是注意的是 === 与 == 的区别,如图:

类型转换:

        1)字符串转数字:

                将字符串字面的值转为数字,如果字面值不是数字,则转为 NaN 。

        2)其他类型转为布尔类型:

                Number:0 和 NaN 为 false,其他转为 true 。

                String:空字符串为 false ,其他都转为 true 。

                Null 和 undefined :都转为 false 。

        5.0 JS - 函数

        函数(方法)是被设计为执行特定任务的代码块。

        JavaScript 函数通过 function 关键字进行定义,语法为:

<!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>function functionName(参数1,参数2){// 要执行的代码alert('调用该函数');}functionName();</script>
</body>
</html>

        注意:

                形式参数不需要类型。因为 JavaScript 是弱类型语言。返回值也不需要定义类型,可以在函数内部直接使用 return 即可。

        调用:

                函数名称(实际参数列表),参数列表可以是多个。

        函数的第二种定义方式:

        

        var functionName1 = function(参数1,参数2...){// 要执行的代码} 

        调用方式还是一样的,函数名称(参数列表)。

        6.0 JS - Array 数组

        JavaScript 中 Array 对象用于定义数组。

定义方式如下:

// 方式一:
var 变量名 = new Array(元素列表);//方式二:
var 变量名 = [元素列表];

访问:

arr[索引] = 值;

        数组的特点:长度是可变的,类型也是可变的。

Array 属性:

        length:设置或返回数组中元素的数量。

Array 方法:

        forEach():遍历数组中每个有值的元素,并调用一次传入的函数。

        push():将新元素添加到数组的末尾,并返回新的长度。

        splice():从数组中删除元素。有两个参数,第一个参数是起始位置,第二个位置是删多少个数。

需要注意的是:普通的 for 循环会遍历数组中全部,而 forEach() 遍历数组中每个有值的元素。

        7.0 JS - String 字符串

        String 字符串对象创建方式有两种:

// 方式一:
var 变量名 = new String(".....");// 方式二:
var 变量名 = "";
var 变量名 = '';

String 属性:

        length:字符串的长度。

String 方法:

        charAt():返回在指定位置的字符。

        indexOf():检索字符串,返回下标。

        trim():去除字符串两边的空格。

        substring():提取字符串中两个指定的索引之间的字符,包前不包后。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++训练营:引用传递

大家好&#xff1a; 衷心希望各位点赞。 您的问题请留在评论区&#xff0c;我会及时回答。 一、引用传递 简单来说&#xff0c;“引用”就是给已有的变量起一个别名。引用并没有自己单独的内存空间&#xff0c;作为引用&#xff0c;它和原变量共用一段内存空间。引用的定义格…

算法空间复杂度计算

目录 空间复杂度定义 影响空间复杂度的因素 算法在运行过程中临时占用的存储空间讲解 例子 斐波那契数列递归算法的性能分析 二分法&#xff08;递归实现&#xff09;的性能分析 空间复杂度定义 空间复杂度(Space Complexity)是对一个算法在运行过程中临时占用存储空间大…

Springboot中Redis的配置使用

新建 向pom.xml中添加依赖&#xff0c;这个可以不用标注版本号 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 配置yml文件&#xff08;文件名不可以错…

钉钉与实在智能达成战略合作,实在Agent助力钉钉AI助理成为“新质生产力”

3月12日&#xff0c;浙江实在智能科技有限公司&#xff08;简称“实在智能”&#xff09;与钉钉&#xff08;中国&#xff09;信息技术有限公司&#xff08;简称“钉钉”&#xff09;签署战略合作协议&#xff0c;达成战略合作伙伴关系。 未来&#xff0c;基于双方创新领先的技…

echarts - 鼠标事件详解

一、echarts 事件概念 chart.on(eventName, query, handler);1. 鼠标事件类型 eventName ECharts 支持9种常规的鼠标事件类型&#xff0c;包括click、 dblclick、 mousedown、mousemove、mouseup、mouseover、 mouseout、 globalout、contextmenu事件。 click&#xff1a;鼠…

C语言【典型算法编程题】总结

以下最全总结! 一,分支结构 1,if 编写程序,从键盘上输入三角形的三个边长(实数),判断这三个边能否构成三角形(构成三角形的条件为:任意两边之和大于第三边),如果能构成三角形,则计算三角形的面积并输出(保留2位小数);如果不能构成三角形,则输出“Flase”字符…

OCR-free相关论文梳理

⚠️注意&#xff1a;暂未写完&#xff0c;持续更新中 引言 通用文档理解&#xff0c;是OCR任务的终极目标。现阶段的OCR各种垂类任务都是通用文档理解任务的子集。这感觉就像我们一下子做不到通用文档理解&#xff0c;退而求其次&#xff0c;先做各种垂类任务。 现阶段&…

App Inventor 2 Clipboard 拓展:实现剪贴板的复制粘贴功能

效果如下&#xff1a; 此 Clipboard 拓展由中文网开发及维护&#xff0c;最新版本 v1.0&#xff0c;基于 TaifunClipboard 开发。 使用方法 属性及方法很简单&#xff0c;默认操作成功后显示提示信息&#xff0c;SuppressToast设置为 假 后&#xff0c;则不显示提示信息。 经测…

工业界真实的推荐系统(小红书)-重排:多样性算法-MMR、DPP、结合业务规则

课程特点&#xff1a;系统、清晰、实用&#xff0c;原理和落地经验兼具 b站&#xff1a;https://www.bilibili.com/video/BV1HZ421U77y/?spm_id_from333.337.search-card.all.click&vd_sourceb60d8ab7e659b10ea6ea743ede0c5b48 讲义&#xff1a;https://github.com/wangsh…

掌握SWOT分析:深入了解企业战略利器

在当今充满挑战和机遇的商业世界中&#xff0c;SWOT分析成为了企业战略制定和执行的不可或缺的工具。SWOT分析是一种系统性方法&#xff0c;用于评估企业内部的优势和劣势&#xff0c;以及外部环境中的机遇和威胁。本文将深入探讨SWOT分析的各个方面&#xff0c;揭示其深层次的…

数据结构从入门到精通——堆

堆 前言一、二叉树的顺序结构及实现 (堆&#xff09;1.1二叉树的顺序结构1.2堆的概念及结构 二、堆的练习题答案 三、堆的实现3.1堆向下调整算法3.2堆的创建3.3建堆时间复杂度3.4堆的插入3.5堆的删除3.6堆的代码实现 四、堆的具体实现代码Heap.hHeap.cTest.c堆的初始化堆的销毁…

数据结构(二)——顺序表和链表的比较

1、存取(读/写)方式 顺序表可以顺序存取&#xff0c;也可以随机存取&#xff0c;在第i个位置上执行存取操作&#xff0c;顺序表仅需一次访问. 链表只能从表头开始依次顺序存取&#xff0c;链表在第i个位置执行存取则需从表头开始依次访问i次. 2、逻辑结构与物理结…

unity显示当前时间

1建立文本组件和一个空对象 2创建一个脚本并复制下面代码 using System.Collections; using System.Collections.Generic; using TMPro; using UnityEngine;public class showtime: MonoBehaviour {public TextMeshProUGUI time;private void Update(){string currentTime Sy…

sqllab第十五关通关笔记

知识点&#xff1a; 布尔盲注 无任何有价值的回显&#xff1b;但是回显信息只有两种&#xff08;区别正确和错误&#xff09;通过布尔盲注爆破处正确的信息利用过滤条件对数据进行过滤&#xff1b;只显示自己想要的信息 尝试进行admin admin登录发现没有任何的回显信息 通过b…

Baumer工业相机堡盟工业相机如何通过NEOAPISDK实现双快门采集两张曝光时间非常短的图像(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPISDK实现双快门采集两张曝光时间非常短的图像&#xff08;C&#xff09; Baumer工业相机Baumer工业相机定序器功能的技术背景Baumer工业相机通过NEOAPI SDK使用定序器功能预期的相机动作技术限制定序器的工作原理 Baumer工业相机通过NE…

视觉单目测距原理及实现

视觉单目测距原理及实现 结尾附赠非常宝贵的自动驾驶学习资料 附赠最全自动驾驶学习资料&#xff1a;链接

基于Java+SpringBoot+vue的智能农场管理系统详细设计和实现

基于JavaSpringBootvue的智能农场管理系统详细设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文…

printf的栈

#include<stdio.h> #include<stdlib.h> int main() {int *p;pmalloc(8);*p1;*p2;p--;printf("%d %d\n",*p,*p);return 0; }

SpringBoot(接受参数相关注解)

文章目录 1.基本介绍2.PathVariable 路径参数获取信息1.代码实例1.index.html2.ParameterController.java3.测试 2.细节说明 3.RequestHeader 请求头获取信息1.代码实例1.index.html2.ParameterController.java3.测试 2.细节说明 4.RequestParameter 请求获取参数信息1.代码实例…

如何在群晖用Docker本地搭建Vocechat聊天服务并无公网ip远程交流协作

文章目录 1. 拉取Vocechat2. 运行Vocechat3. 本地局域网访问4. 群晖安装Cpolar5. 配置公网地址6. 公网访问小结 7. 固定公网地址 如何拥有自己的一个聊天软件服务? 本例介绍一个自己本地即可搭建的聊天工具,不仅轻量,占用小,且功能也停强大,它就是Vocechat. Vocechat是一套支持…