【JavaScript】JavaScript简介

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

阅读指南

  • 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,我们才认为他是动态页面;

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

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

相关文章

上市公司环境研究汇总数据集(2008-2022年)

数据简介&#xff1a;上市公司环境研究是指对上市公司在环境保护和可持续发展方面的表现和做法进行评估和研究。这些评估可以包括上市公司的环境风险、环境管理制度和政策、环境负债和环境绩效等方面。 上市公司环境研究可以帮助上市公司更好地了解自身的环境状况和风险&#…

FastAPI教程II

本文参考FastAPI教程https://fastapi.tiangolo.com/zh/tutorial Cookie参数 定义Cookie参数与定义Query和Path参数一样。 具体步骤如下&#xff1a; 导入Cookie&#xff1a;from fastapi import Cookie声明Cookie参数&#xff0c;声明Cookie参数的方式与声明Query和Path参数…

[单机版架设]新天堂2-死亡骑士338|带AI机器人

前言 今天给大家带来一款单机游戏的架设&#xff1a;新天堂2-死亡骑士338单机服务端—带AI机器人 如今市面上的资源参差不齐&#xff0c;大部分的都不能运行&#xff0c;本人亲自测试&#xff0c;运行视频如下&#xff1a; 新天堂2 搭建教程 此游戏架设不需要虚拟机&#xf…

android轮播图入门1——简单无限自动轮播图

目标 目标是实现一个简单的轮播图&#xff0c;特征如下&#xff1a; 只展示本地图片可以无限轮播&#xff0c;在第一帧时也可以向前轮播可以自动轮播 code 先上代码&#xff0c;需要事先准备几张本地图片当素材 MainActivity: package com.example.loopapplication;import…

1-Pandas是什么

Pandas是什么 Pandas 是一个开源的第三方 Python 库&#xff0c;从 Numpy 和 Matplotlib 的基础上构建而来&#xff0c;享有数据分析“三剑客之一”的盛名&#xff08;NumPy、Matplotlib、Pandas&#xff09;。Pandas 已经成为 Python 数据分析的必备高级工具&#xff0c;它的…

nginx 1024 worker_connections are not enough while connecting to upstream

现象 请求api响应慢&#xff0c;甚至出现504 gateway timeout&#xff0c;重启后端服务不能恢复&#xff0c;但重启nginx可以恢复。 解决方案 worker_connections使用了默认值 1024&#xff0c;当流量增长时&#xff0c;导致连接不够 在nginx.conf中修改连接数就可以了&…

pg_rman:备份和恢复管理工具#postgresql培训

pg_rman 是 PostgreSQL 的在线备份和恢复工具。 pg_rman 项目的目标是提供一种与 pg_dump 一样简单的在线备份和 PITR 方法。此外&#xff0c;它还为每个数据库集群维护一个备份目录。用户只需一个命令即可维护包括存档日志在内的旧备份。 #PG培训#PG考试#postgresql考试#pos…

基于Spring Boot与Vue的智能房产匹配平台+文档

博主介绍&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐&#xff1a;最热的500个选题…

深度解析:机器学习如何助力GPT-5实现语言理解的飞跃

文章目录 文章前言机器学习在GPT-5中的具体应用模型训练与优化机器翻译与跨语言交流&#xff1a;情感分析与问答系统&#xff1a;集成机器学习功能&#xff1a;文本生成语言理解任务适应 机器学习对GPT-5性能的影响存在的挑战及解决方案技术细节与示例 文章前言 GPT-5是OpenAI公…

【教学类65-04】20240625秘密花园涂色书04(通义万相)(图纸16:9,A4横板1张,一大168张纸168份)

背景需求 【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A4横版2张&#xff0c;一大3小 38张纸76份&#xff09;-CSDN博客文章浏览阅读118次。【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A…

ValidateAntiForgeryToken、AntiForgeryToken 防止CSRF(跨网站请求伪造)

用途&#xff1a;防止CSRF&#xff08;跨网站请求伪造&#xff09;。 用法&#xff1a;在View->Form表单中: aspx&#xff1a;<%:Html.AntiForgeryToken()%> razor&#xff1a;Html.AntiForgeryToken() 在Controller->Action动作上&#xff1a;[ValidateAntiForge…

AI复活亲人市场分析:技术、成本与伦理挑战

“起死回生”这种事&#xff0c;过去只存在于科幻电影里&#xff0c;但今年&#xff0c;被“复活”的案例却越来越多。 2月底&#xff0c;知名音乐人包晓柏利用AI“复活”了她的女儿&#xff0c;让她在妈妈生日时唱了一首生日歌&#xff1b;3月初&#xff0c;商汤科技的年会上…

windows 10 安装tcping 使用教程

1 官网下载:tcping下载 2 复制tcping 到win10系统目录C:\Windows\System32 3 tcping 网址测试,可以指定端口 4 tcping 测试端口联通 5 tcping http模式

JFreeChart 生成Word图表

文章目录 1 思路1.1 概述1.2 支持的图表类型1.3 特性 2 准备模板3 导入依赖4 图表生成工具类 ChartWithChineseExample步骤 1: 准备字体文件步骤 2: 注册字体到FontFactory步骤 3: 设置图表具体位置的字体柱状图&#xff1a;饼图&#xff1a;折线图&#xff1a;完整代码&#x…

实验2 色彩模式转换

1. 实验目的 ①了解常用的色彩模式&#xff0c;理解色彩模式转换原理&#xff1b; ②掌握Photoshop中常用的颜色管理工具和色彩模式转换方法&#xff1b; ③掌握使用Matlab/PythonOpenCV编程实现色彩模式转换的方法。 2. 实验内容 ①使用Photoshop中的颜色管理工具&#xff…

如何高效安全的开展HPC数据传输,保护数据安全?

高性能计算&#xff08;HPC&#xff09;在多个行业和领域中都有广泛的应用&#xff0c;像科学研究机构、芯片IC设计企业、金融、生物制药、能源、航天航空等。HPC&#xff08;高性能计算&#xff09;环境中的数据传输是一个关键环节&#xff0c;它涉及到将数据快速、安全地在不…

淘宝扭蛋机小程序开发:为消费者带来新的潮玩乐趣

在当下的消费市场&#xff0c;潮玩消费已经成为了年轻人的新宠&#xff0c;预计在近几年间潮玩市场的销售额将达到千亿元&#xff01;其中扭蛋机市场更是吸引了各个阶段的消费群体&#xff0c;在市场巨大的发展前景下&#xff0c;同时也吸引了众多投资者入局&#xff0c;市场竞…

linux普通: rocketmq的安装测试与可视化界面安装,git的 (linux) 安装

全文目录,一步到位 1.前言简介1.2 常规mq对比1.3 专栏传送门(rabbitmq) 2. rocketmq使用及安装2.0 开放端口2.1 rocketmq版本说明2.2 具体操作2.2.1 修改文件2.2.2 具体启动指令ps: 查看日志 2.3.3 jps查看java进程2.3.4 测试运行情况> 步骤一: 临时指定nameserver注册中心位…

Ai中式吐槽漫画项目,Stable Diffusion自动生成漫画,10分钟一个原创

一、AI中式吐槽漫画&#xff1a;释放情绪的新途径 年轻人的生活充斥着工作、学习和家庭的压力&#xff0c;我们迫切需要一种方式来释放这些负面情绪。AI中式吐槽漫画&#xff0c;以其幽默诙谐的方式&#xff0c;将生活中的烦恼和压力转化为一幅幅引人发笑的漫画&#xff0c;不…

[OtterCTF 2018]General Info

基本信息要求查找ip 和主机名 查看 hivelist volatility.exe -f .\OtterCTF.vmem --profileWin7SP1x64 hivelist 0xfffff8a000024010 0x000000002d50c010 \REGISTRY\MACHINE\SYSTEM打印出注册表信息 volatility.exe -f .\OtterCTF.vmem --profileWin7SP1x64 printkey -o 0xff…