【JavaScript】JavaScript简介

news2024/12/23 6:11:43

希望文章能给到你启发和灵感~
如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏 支持一下博主吧~

阅读指南

  • JavaScript入门(1)————JavaScript简介
  • 开篇说明
  • 一、什么是JavaScript
  • 二、JavaScript的使用
  • 2.1 开发工具的选择
    • 2.2 JavaScript引入方式
  • 三、概念和解惑

JavaScript入门(1)————JavaScript简介

在这里插入图片描述

开篇说明

在学习任何知识之前,我们首先要明白的就是他的概念,即它是什么,干嘛的,有什么用,所以本专栏的第一篇,我会在学习JavaScript之前,带大家了解一下我们要学习的JavaScript究竟是什么?

一、什么是JavaScript

即JS,他是一种嵌入到HTML页面中的编程语言;说到JS,我们往往会将它和CSS,HTML相关联,这是前端中最核心的技术;

用博主的大白话来说,前端开发就是一栋建筑,HTML是建筑的整体框架CSS就是内外饰的装潢,而JS就是控制大楼的运转,如电梯升降,灯光感应,排污系统和供电等;

因此,只要我们知道这三者的关系后,我们就能知道一个网页我们是如何做出来的了;HTML和CSS只是美丽的皮囊,而JS是让皮囊更加栩栩如生的工具;

二、JavaScript的使用

2.1 开发工具的选择

目前针对JS的开发工具太多了,Hbuilder,Dreamweaver, SublimeText, VSCode等等,这个就根据个人喜好来选择了,开发经验比较丰富的用VSCODE的居多,作为入门来说,Hbuilder是最好的选择,我在之后的演示中,使用的是Hbuilder X,这是专为前端开发者设计的;

现在我们可以先创建一个项目,默认选择一个空项目

在这里插入图片描述

接着右键我们刚创建的项目创建一个JS文件;

在这里插入图片描述
在这里插入图片描述

2.2 JavaScript引入方式

JavaScript中的引入方式有三种方式:

  • 外部JavaScript

所谓外部引入,即HTML文件和JS代码是分开存放的,然后在HTML文件中通过<Script>标签来引入代码;

在这里插入图片描述
外部引入是比较常见的方式,因为在网页可维护性能上最好,在HTML中我们只要通过script标签src属性,指定我们的js文件路径就能做到引入了;引入的位置可以是在head中,也可以在body中

  • 内部JavaScript

内部引入,就是HTML代码和JS代码放在同一个文件中,而JS代码的内容都写在script标签内;这里可以看到,我们就不用src属性了,而是直接在<script></script>标签内进行相关代码的写入了;

在这里插入图片描述

这里的document.write(“”)表示在页面输出一个内容;

  • 元素上的事件JavaScript

举个例子🌰:事件中调用JS
在这里插入图片描述

这里就是在button元素中的onclick事件上直接编写JS代码;

实现效果:
在这里插入图片描述
举个例子🌰:事件中调用函数

在这里插入图片描述

这里就是在button元素中的onclick事件上直接编写调用函数;

三、概念和解惑

【问】JavaScript 和Java有什么关系?
【答】这点只能说他们有点关系,但不多,JS在设计上借鉴了一点Java,如命名规范之类的,但本质上却是不同,Java是面向对象的,JS更像是函数编程,所以在应用上也决定了Java会更加广泛,而Js更多用在网页前端;

【问】我的网页上使用了JS,是不是就是一个动态页面?
【答】未必,首先需要弄清一个概念,我们日常说的动态页面,不是代表页面会“动”就叫动态页面,而是指是否有后端参与数据交互,如Java开发中,用到的JSP后端技术结合JS,我们才认为他是动态页面;

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

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

相关文章

UE5材质之HLSL:深度

UE4/5的Custom节点&#xff1a;在VScode使用HLSL&#xff08;新手入门用&#xff09;_vscode写hlsl-CSDN博客 效果&#xff1a; 材质节点&#xff1a; 自定义节点代码&#xff1a; float3 rayStepViewDir*-1; float4 inputTexTexture2DSample(TexObject,TexObjectSampler,uv)…

yolov8obb角度预测原理解析

预测头 ultralytics/nn/modules/head.py class OBB(Detect):"""YOLOv8 OBB detection head for detection with rotation models."""def __init__(self, nc80, ne1, ch()):"""Initialize OBB with number of classes nc and la…

(笔记)Error: qemu-virgl: Failed to download resource “qemu-virgl--test-image“解决方法

错误&#xff1a; > Downloading https://www.ibiblio.org/pub/micro/pc-stuff/freedos/files/distributions/1.2/FD12FLOPPY.zip curl: (22) The requested URL returned error: 404Error: qemu-virgl: Failed to download resource "qemu-virgl--test-image" D…

基于QT开发的气体成分检测数据记录软件

1、软件概述 气体成分检测数据记录软件用于实现多种气体分析仪及相关设备实时数据的获取、存储和传送。目前支持的设备主要有气体分析仪、多通道进样阀箱、冷阱处理系统和气体采样处理系统。   气体成分检测数据记录软件可以根据实际应用需要进行配置&#xff0c;以实现不同应…

【PyQt】20-QTimer(动态显示时间、定时关闭)

QTimer 前言一、QTimer介绍二、动态时间展示2.1 代码2.2 运行结果 三、定时关闭3.1 介绍他的两种用法1、使用函数或Lambda表达式2、带有定时器类型&#xff08;高级&#xff09; 3.2 代码3.3 运行结果 总结 前言 好久没学习了。 一、QTimer介绍 pyqt里面的多线程可以有两种实…

使用 MongoDB 剖析开放银行:技术挑战和解决方案

开放银行&#xff08;或开放金融&#xff09;在银行业掀起了一股颠覆性浪潮&#xff0c;它迫使金融机构&#xff08;银行、保险公司、金融科技公司、企业甚至政府机构&#xff09;迎接一个透明、协作和创新的新时代。这种模式转变要求银行与第三方提供商&#xff08;TPP&#x…

RAID0、RAID1、RAID5、RAID10、软RAID

硬盘 连续空间 无法 扩容 每个raid对应每个raid卡&#xff0c;没有阵列卡就不能用raid lvm 非连续空间 可以动态扩容 raid 备份&#xff0c; 提高读写性能&#xff0c;不能扩容 raid 是磁盘的集合&#xff0c;按照排列组合的方法不 一&#xff0c;给 raid 去了不同的名字…

Webpack: 构建微前端应用

Module Federation 通常译作“模块联邦”&#xff0c;是 Webpack 5 新引入的一种远程模块动态加载、运行技术。MF 允许我们将原本单个巨大应用按我们理想的方式拆分成多个体积更小、职责更内聚的小应用形式&#xff0c;理想情况下各个应用能够实现独立部署、独立开发(不同应用甚…

[OtterCTF 2018]Closure

既然你从内存中提取了密码&#xff0c;你能解密rick的文件吗&#xff1f; 密码是知道了&#xff0c;加密文件 &#xff1f; flag 文件&#xff1f;dump 出来 已知这个勒索软件为HiddenTear&#xff0c;直接在网上找到解密程序HiddenTearDecrypter先将加密文件的末尾多余的0去掉…

javaScript利用indexOf()查找字符串的某个字符出现的位置

1 创建字符串 2 利用indexof()查询字符串的字符 3 利用while循环判断indexOf是否等于-1&#xff0c;不等于-1就打印一次并且索引号1去查下一个字符 //创建字符串var str1234567812311231;var indexstr.indexOf(1);//查询该字符while(index !-1)//indexOf()没有查到会返回-1{…

右键新建没有TXT文本文档的解决办法

电脑右键新建&#xff0c;发现没有txt了&#xff0c;我查网上办法都有点复杂&#xff0c;诸如注册表的&#xff0c;但是其实很简单&#xff0c;重启windows资源管理器就可以了。 点击重新启动&#xff0c;之后新建就有txt文档了。

基于Spring Boot的药房信息管理系统

1 项目介绍 1.1 研究的背景及意义 随着社会的飞速进步和药房行业竞争的白热化&#xff0c;传统的手工管理模式已难以适应药房信息管理的现代化需求。在计算机科学技术日臻完善的背景下&#xff0c;药房信息管理者们日益认识到运用计算机技术进行信息管理的迫切性和重要性。计…

昇思MindSpore学习总结五——网络构建

1、网络构建 神经网络模型是由神经网络层和Tensor操作构成的&#xff0c;mindspore.nn提供了常见神经网络层的实现&#xff0c;在MindSpore中&#xff0c;Cell类是构建所有网络的基类&#xff0c;也是网络的基本单元。一个神经网络模型表示为一个Cell&#xff0c;它由不同的子C…

创新探析:我国AIGC产业规模有望在2030年破万亿,创意设计行业或迎来全面革新

在科技日新月异的今天&#xff0c;人工智能生成内容&#xff08;AIGC&#xff09;与创意设计行业的结合正以前所未有的速度推动着产业变革。随着技术的不断突破和市场需求的日益增长&#xff0c;我国AIGC产业规模有望在2030年突破万亿元大关&#xff0c;这一宏伟目标不仅是对技…

VUE-CLI脚手架项目的初步创建与配置

首先创建一个VUE项目&#xff0c;注意选择版本为 2.6.10 打开APP.vue文件&#xff0c;并且删除APP.vue中多余的代码 创建index.vue文件 在此文件中写入如下图片中的代码来初步创建页面 创建router目录&#xff0c;并且创建index.js 文件如下 在终端输入npm run serve 运行 然后…

代码随想录-Day43

52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等…

[OtterCTF 2018]Recovery

里克必须找回他的文件&#xff01;用于加密文件的随机密码是什么 恢复他的文件 &#xff0c;感染的文件 &#xff1f; vmware-tray.ex 前面导出的3720.dmp 查找一下 搜索主机 strings -e l 3720.dmp | grep “WIN-LO6FAF3DTFE” 主机名 后面跟着一串 代码 aDOBofVYUNVnmp7 是不…

c++类和对象(三)日期类

类和对象 一.拷贝构造函数定义二.拷贝构造函数特征三.const成员函数权限权限的缩小权限的缩放大 四.隐式类型转换 一.拷贝构造函数定义 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存 在的类类型对象…

韩顺平0基础学Java——第33天

p653-674 坦克大战 继续上回游戏 将每个敌人的信息&#xff0c;恢复成Node对象&#xff0c;放进Vector里面。 播放音乐 使用一个播放音乐的类。 第二阶段结束了 网络编程 相关概念 &#xff08;权当是复习计网了&#xff09; 网络 1.概念:两台或多台设备通过一定物理设备连…

Java基础知识-集合类

1、HashMap 和 Hashtable 的区别&#xff1f; HashMap 和 Hashtable是Map接口的实现类&#xff0c;它们大体有一下几个区别&#xff1a; 1. 继承的父类不同。HashMap是继承自AbstractMap类&#xff0c;而HashTable是继承自Dictionary类。 2. 线程安全性不同。Hashtable 中的方…