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标签用于编写内部代码

相关文章
|
4天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
15 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
1天前
|
缓存 前端开发 JavaScript
高效开发现代 Web 应用:从前端到后端的最佳实践
在开发现代 Web 应用时,前端和后端技术的选择对项目的性能、可维护性和用户体验至关重要。本文将探讨如何通过现代工具和框架来优化前端和后端开发流程。我们将分析前端技术(如 React 和 Vue.js)与后端技术(如 Node.js 和 Django)的集成,并提供实际案例来展示如何实现高效开发。无论是对新手还是经验丰富的开发者,本指南都提供了宝贵的洞见和实用的技巧,以帮助提高开发效率并构建出色的 Web 应用。
|
1天前
|
缓存 编解码 前端开发
优化Web应用性能的前端技巧:从加载时间到用户体验
在现代Web开发中,提升前端性能不仅仅是为了缩短页面加载时间,更是为了提供更流畅的用户体验。本文将探讨几种有效的前端优化技术,包括懒加载、代码拆分、资源压缩以及浏览器缓存策略。通过具体实例和最佳实践,读者将能够掌握如何系统地提高Web应用的响应速度,减少资源消耗,并最终改善用户的整体体验。
|
4天前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
6天前
|
前端开发 JavaScript
Web前端项目(一)- 迷宫游戏
【8月更文挑战第13天】本项目采用HTML页面,结合了JS和CSS创建一个简单的迷宫游戏,游戏特色包括自动寻路功能和可进行迷宫路线的更新。页面整体采用“毒药水式”的色彩搭配,给人一种迷幻,科技之感。并且为了大家能够二次创作,我在代码中标明了详细的注释
30 0
Web前端项目(一)- 迷宫游戏
|
3天前
|
JavaScript 前端开发 测试技术
Web中的JavaScript
Web中的JavaScript
|
4天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
5天前
|
JavaScript 前端开发 应用服务中间件
【qkl】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
【区块链】JavaScript连接web3钱包,实现测试网络中的 Sepolia ETH余额查询、转账功能
|
5天前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
12 0