web前端-前端三剑客之JavaScript

简介: JavaScript简介起源JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如∶用户名的长度,密码的长度,邮箱的格式等。

文章目录

JavaScript简介

起源

简史

时间表

实现

JavaScript的特点

JavaScript的输出

提示框输出alert

页面输出document.write

控制台输出console.log

JavaScript的书写位置

写在标签属性中(不推荐)

写在script标签中

JavaScript简介

起源

JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。

比如∶用户名的长度,密码的长度,邮箱的格式等。


简史

JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。

1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

市面上存在两个版本的JavaScript,一个网景公司的JavaScript和微软的JScript。

为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同定制了JS的标准名命名为ECMAScript(ES)。

image.png

image.png

  • 我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义却要更大一些。一个完整的JavaScript实现应该由以下三个部分构成:


image.png

同时这也是我们学习的内容。

JavaScript的特点

  1. 解释型语言
  2. 类似于c和java的语法结构
  3. 动态语言
  4. 基于原型的面向对象

JavaScript的输出

提示框输出alert

<script>
        alert('hello world')
</script>


image.png

页面输出document.write

<script>
        document.write('hello world!!');
</script>

image.png

控制台输出console.log

<script>
    console.log('hello world!!!!')
</script>

image.png

JavaScript的书写位置

写在标签属性中(不推荐)

  1. 写在onclick中
<button onclick="alert('hello world!!')">点击按钮</button>
<input type="submit" onclick="alert('hello world')">

a7068c63d4f8453c9e93ee59c8dceff7.gif

  1. 写在href中
<a href="javascript:alert('你好!!');">超链接标签</a>

效果:05782066d8994093bdd91b5d14bbff2d.gif

虽然可以写在标签的属性中,但是他们属于结构和行为耦合,不方便维护,因此不推荐使用。

写在script标签中

  1. 内部script
    在script标签中书写语句
 <script>
        alert('内部script');
 </script>

cd312eec1708454f9613adfb09738776.gif

  1. 外部script
    可以将js代码编写到外部js文件中,然后通过script标签引入。写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用。

html内连接外部JavaScript文件

<script src="./outscript"></script>

js代码

alert('这是外部script')

效果

cd312eec1708454f9613adfb09738776.gif

注意:script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略如果需要则可以在创建一个新的script标签用于编写内部代码

相关文章
|
1月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
354 108
|
1月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
362 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
1月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
1月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
60 2
|
6月前
|
JavaScript 前端开发 API
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
134 1

热门文章

最新文章