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天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
1天前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
1天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
11 0
|
2天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
56 1
前端JS发起的请求能暂停吗?
|
3天前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
15 4
|
3天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
8 3
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
7 0
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
5天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
21 2