【 JavaScript编程详解 -1 】什么是JavaScript ?

news2024/12/22 19:16:07

文章目录

  • 简介
    • `Java`与`JavaScript`的不同
    • Javascrpt可以做什么
  • JavaScript的构成
  • 为什么可以在浏览器中运行
  • 如何将 JavaScript 代码添加到网站?
    • 方法1- \<script\>标签内嵌JavaScript
    • 方法1- \<script\>标签引入外部JavaScript文件
    • 方法3- 内联 JavaScript
  • 编辑器推荐
    • HBuilder
    • Sublime Text
    • WebStorm
    • Visual Studio Code(VS Code)
    • Atom
  • 结论

🧨🧨🧨

大家好,我是搞前端的半夏 🧑,一个热爱写文的前端工程师 💻.
如果喜欢我的文章,可以关注 ➕ 点赞 👍 一起学习交流前端,成为更优秀的工程师~ 更多故事—点我探索新世界!

🧨🧨🧨

简介

JavaScript是一种非常强大的客户端脚本语言JavaScript主要用于增强用户与网页的交互。换句话说,你可以在JavaScript的帮助下使你的网页更加生动和互动。JavaScript也被广泛用于游戏开发移动应用程序开发。

1995年Brendan Eich 设计并开发了JavaScript。最先运行它的浏览器是当时最流行的Netscape 浏览器JavaScript最早被称为LiveScript。后来更名为JavaScript。很多初学者认为JavaScript和Java是一样的。事实上,JavaScriptjava没有任何关系。JavaScript只是一种脚本语言JavaScript 的语法主要受**C语言 ** 的影响。

JavaJavaScript的不同

  • JavaScript 是动态类型语言,Java是静态类型语言
  • JavaScript是弱类型的,Java 属于强类型
  • JavaScriptJava都支持面向对象。但是JavaScript是基于原型实现的,Java是基于类的。

Javascrpt可以做什么

  • VR/AR

  • 游戏

  • 服务端

  • 编写操作系统

  • 移动端应用

  • 桌面端应用

image-20230115154331006

JavaScript的构成

JavaScript最初设计是用来与网页元素(HTML/CSS)进行交互的编程语言。在浏览器中,JavaScript由三个主要部分组成.

  • 核心语法(例如:变量 函数 类…),ECMAScript 确定了JavaScript 的标准语法。
  • **文档对象模型 (DOM)**提供用于与网页上的元素进行交互的接口
  • 浏览器对象模型 (BOM) 提供用于与 Web 浏览器交互的浏览器 API。

为什么可以在浏览器中运行

实际上高级编程语言都是需要转成机器指令来执行的,JavaScript也不例外。 我们所编写的JavaScript程序无论是在浏览器或者Node环境下,最终都是需要被CPU执行的。CPU只认识自己的指令集、即机器语言。所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU可执行的指令。浏览器内嵌入了JavaScript引擎,帮助我们执行JavaScript

一开始,JavaScript引擎是作为解释器实现的。但是,现代 JavaScript 引擎通常作为实时编译器实现,这些编译器将 JavaScript 代码编译为字节码以提高性能。

当然也可以在任意搭载JavaScript引擎的设备中执行JavaScript。例如Nodejs在浏览器之外运行了V8引擎,这使得JavaScript可以在服务端运行。
JavaScript引擎总结:

  • Chrome 和 Opera 中的 JS引擎------V8引擎

  • Firefox中的JS引擎------SpiderMonkey引擎

  • Safari中的JS引擎------Nitro引擎和SquirrelFish引擎

  • IE中的JS引擎------Chakra引擎

  • Microsoft Edge中的JS引擎------ChakraCore引擎

image-20230115154657903

如何将 JavaScript 代码添加到网站?

JvaScript可以直接嵌入到网页中,也可以通过单独的.js文件引用。当用户访问该网页时,浏览器会加载并运行该脚本。

方法1- <script>标签内嵌JavaScript

<html>
<head>
	<title>Inline JavaScript</title>
	<script type="text/JavaScript">
		alert("Hello World");
	</script>
</head>
<body>
</body>
</html>

方法1- <script>标签引入外部JavaScript文件

外部JavaScript将代码存储在单独的**.js**文件中.然后在HTML页面中调用它。开发人员在处理大型项目时经常使用此方法,因为这样做可以使脚本井井有条。此外,它还允许您在多个 HTML 页面中重用脚本,这是许多开发人员非常重视的东西。

例如,将以下脚本添加到 HTML 页面可让您调用名为 script.js 的外部 JavaScript 文件.

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
	<button type="button" onclick="myFunction()">Select</button>
</body>
<script src="js/script.js"></script>
</html>

方法3- 内联 JavaScript

还可以将其脚本嵌入到 HTML 事件属性中,在触发事件时提示浏览器执行它,此脚本类型称为内联 JavaScript

<button onclick="alert('Click for more details')">Click</button>

编辑器推荐

HBuilder

2020必备,前端程序员必备开发工具

HBuilder是专为前端打造的开发工具,具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP等特点。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

Sublime Text

2020必备,前端程序员必备开发工具

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如迷你地图,多选择,Python的插件,代码段,等等。完全可自定义键绑定,菜单和工具栏。Sublime Text的主要功能包括:拼写检查,书签,完整的Python API,Goto功能,即时项目切换,多选择,多窗口等等。

WebStorm

2020必备,前端程序员必备开发工具

WebStorm可以帮助您编写出色的代码。其智能编辑器具有代码完成,动态代码分析,代码格式化和重构,可提高您的工作效率,并将您的开发体验提升到一个全新的水平。

Visual Studio Code(VS Code)

2020必备,前端程序员必备开发工具

免费,开源,轻量,跨平台。笔者也正在使用功能,十分推荐!!!

Atom

2020必备,前端程序员必备开发工具

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。

结论

JavaScript 通常与 HTML 和 CSS 一起使用,为网站添加交互性。在某些情况下,JavaScript 可能会利用第三方库来提供高级功能,而无需开发人员每次都从头开始编写代码。

  • 易于学习并实施到某些网页元素或事件中
  • 由强大的开发人员社区提供支持
  • 减少发送到服务器的请求
  • 与许多其他语言兼容
  • 比其他编程语言更快、更轻量级

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

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

相关文章

蛇形矩阵(简单明了的方法)

T112524 【数组2】蛇形矩阵 题目来源 AC代码 #include<stdio.h>int main() {int arr[111][111];int n 0;scanf("%d",&n);int temp 0;int sum 1;while(temp<(2*n-2)){for(int i0;i<n;i){for(int j0;j<n;j){if((ij) temp){if(temp%2 0){arr[…

基于FPGA的时间数字转换(TDC)设计(三)

1.多相位TDC计时测试 以下为多相位TDC计时的测试。图1为多相位TDC计时的测试框图,利用信号发生器,产生两路同相位、具有固定延时的脉冲信号,一路作为Start信号,另外一路作为Stop信号。由于分辨率为312.5ps,因此以312.5ps为步进,对Stop信号进行延时,扫描一个周期,通过UA…

红米 12C earth Fastboot 线刷包 root TWRP 刷入magisk recovery卡刷

红米 12C earth Fastboot 线刷包 root TWRP 刷入magisk recovery卡刷 红米 12C (earth) 国行版 Fastboot 线刷包 & Recovery 卡刷包 ROM 红米 12C earth Fastboot 线刷包 root TWRP 刷入magisk recovery卡刷下载 红米 12C 稳定版 Fastboot 线刷包 要安装国行版 红米 12C F…

对笔试使用《剑指offer》吧(第十天)

跟着博主一起刷题 这里使用的是题库&#xff1a; https://leetcode.cn/problem-list/xb9nqhhg/?page1 目录剑指 Offer 62. 圆圈中最后剩下的数字剑指 Offer 64. 求12…n剑指 Offer 65. 不用加减乘除做加法剑指 Offer 62. 圆圈中最后剩下的数字 剑指 Offer 62. 圆圈中最后剩下的…

【BP靶场portswigger-客户端12】跨站点请求伪造CSRF-12个实验(全)

前言&#xff1a; 介绍&#xff1a; 博主&#xff1a;网络安全领域狂热爱好者&#xff08;承诺在CSDN永久无偿分享文章&#xff09;。 殊荣&#xff1a;CSDN网络安全领域优质创作者&#xff0c;2022年双十一业务安全保卫战-某厂第一名&#xff0c;某厂特邀数字业务安全研究员&…

YOLO家族系列模型的演变:从v1到v8(上)

YOLO V8已经在本月发布了&#xff0c;我们这篇文章的目的是对整个YOLO家族进行比较分析。了解架构的演变可以更好地知道哪些改进提高了性能&#xff0c;并且明确哪些版本是基于那些版本的改进&#xff0c;因为YOLO的版本和变体的命名是目前来说最乱的&#xff0c;希望看完这篇文…

Android 深入系统完全讲解(18)

3 su Root 的相关代码原理 在 Android4.4 的时候&#xff0c;我们经常能够看到 Root Apk&#xff0c;作为发烧友操作这个才算是真的会 Android。那么学习 su 的代码&#xff0c;就是非常有意义的事情。这一节来说下 su 是如何管理权限 的&#xff0c;如何调用授权 Apk&#xf…

撒贝宁搭档某网红,直播带货人气破十万,央视主持人能接私活吗

随着互联网的发展&#xff0c;直播已经司空见惯&#xff0c;直播带货更是成为家常便饭&#xff0c;尤其是那些有了名气的人。就在不久前&#xff0c;央视著名主持人撒贝宁&#xff0c;也开启了自己的直播带货首秀&#xff0c;不得不说央视主持人还是多才多艺。 在很短时间内&am…

SpringBoot 自定义拦截器

SpringBoot 自定义拦截器 目录SpringBoot 自定义拦截器一、自定义拦截器二、编写控制器三、添加拦截器对象&#xff0c;注入到容器的配置类中另一种写法四、最后application运行一、自定义拦截器 创建登录拦截器 com/bjpowernode/springbootinterceptor02/interceptor LoginI…

改进YOLOv7系列:结合丰富的梯度流信息模块,来自YOLOv8的核心模块

&#x1f4a1;统一使用 YOLOv7 代码框架&#xff0c;结合不同模块来构建不同的YOLO目标检测模型。&#x1f31f;本项目包含大量的改进方式,降低改进难度,改进点包含【Backbone特征主干】、【Neck特征融合】、【Head检测头】、【注意力机制】、【IoU损失函数】、【NMS】、【Loss…

【Linux操作系统】进程优先级和进程切换

文章目录一.进程优先级1.三段论谈优先级2.PRI和NI二.进程切换1.进程的四个特性2.上下文数据保护和恢复一.进程优先级 1.三段论谈优先级 什么是优先级&#xff1f;它等同于权限吗&#xff1f; 定义: cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority…

SpringBoot + MDC 实现全链路调用日志跟踪

写在前面MDC介绍MDC使用MDC 存在的问题解决MDC存在的问题写在前面通过本文将了解到什么是MDC、MDC应用中存在的问题、如何解决存在的问题基于 Spring Boot MyBatis Plus Vue & Element 实现的后台管理系统 用户小程序&#xff0c;支持 RBAC 动态权限、多租户、数据权限、…

Shader踩坑笔记UV操作

一、UV坐标范围0-1 // 坐标范围 0-1&#xff0c;原点在画布左下角 vec2 uv FRAGCOORD.xy / iResolution.xy; 有两个变量 1、FRAGCOORD是godot引擎自带的变量表示纹理坐标 2、iResolution我自定义的变量&#xff0c;输入画布尺寸 使用uniform关键词可以创建自定义变量 比…

戴尔电脑怎么录屏?这6个方法教你轻松录屏

无论您是需要录制屏幕活动以创建在线发布的演示文稿、录制网络研讨会的屏幕以供日后参考&#xff0c;还是出于任何其他原因——如果您使用的是戴尔或类似 PC&#xff0c;您有多种选择。那么&#xff0c;让我们来谈谈如何在戴尔笔记本电脑上进行屏幕记录。 在戴尔笔记本电脑上录…

机器人介绍、应用、前景

机器人介绍、应用、前景1 介绍1.1 定义1.2 作用1.3 发展历程1.4 分类1.5 三大顾虑1.6 前景2 种类工业机器臂协作机械臂工业移动机器人复合机器人扫地机器人服务机器人机器狗人形机器人无人机3 技术3.1 机器人学分类3.2 功能分类3.2.1 感知3.2.2 决策3.2.3 执行AGV减震机构减速机…

经典问题:Python实现生产者消费者模式的多线程爬虫

Python实现生产者消费者模式的多线程爬虫1. 多组件的Pipeline技术架构2. 生产者消费者爬虫的架构3.多线程数据通信的queue.Queue4. 代码编写实现生产者消费者爬虫1. 多组件的Pipeline技术架构 复杂的事情一般都不会一下子做完&#xff0c;而是会分很多中间步骤一步步完成。 …

二十七、Kubernetes中DaemonSet(DS)控制器详解

1、概述 在kubernetes中&#xff0c;有很多类型的pod控制器&#xff0c;每种都有自己的适合的场景&#xff0c;常见的有下面这些&#xff1a; ReplicationController&#xff1a;比较原始的pod控制器&#xff0c;已经被废弃&#xff0c;由ReplicaSet替代 ReplicaSet&#xff…

LeetCode题目笔记——2293. 极大极小游戏

文章目录题目描述题目难度——简单方法一&#xff1a;模拟代码/Python方法二&#xff1a;优化本地修改代码/python代码/C总结题目描述 给你一个下标从 0 开始的整数数组 nums &#xff0c;其长度是 2 的幂。 对 nums 执行下述算法&#xff1a; 设 n 等于 nums 的长度&#x…

理论——加密法

前言写C写多了&#xff0c;给大伙换换口味&#xff0c;这篇文章将会给大家带来几种加密法&#xff0c;以后写情书有素材了吧&#xff1f;还不快谢谢我~正文凯撒加密法简介在密码学中&#xff0c;恺撒密码是一种最简单且最广为人知的加密技术。它是一种替换加密的技术&#xff0…

因果推断6--多任务学习(个人笔记)

目录 1多任务学习 1.1问题描述 1.2数据集 1.3网络结构 1.4结果 2因果推断使用多任务方式 2.1DRNet 2.2Dragonet 2.3Deep counterfactual networks with propensity-dropout 2.4VCNet 3思考 1多任务学习 keras-mmoe/census_income_demo.py at master drawbridge/ke…