从零开始学 Web 之 JavaScript(一)JavaScript概述

简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

img_25336e0b5504f9a5b326090f41d9dcd7.png

一、JavaScript 概述

1、JavaScript简介

JavaScript历史
要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。

为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。

ECMAScript
因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。所以简单说来就是,ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢?因为JavaScript是网景的注册商标。不过大多数时候,我们还是用JavaScript这个词。如果你遇到ECMAScript这个词,简单把它替换为JavaScript就行了。

JavaScript版本
JavaScript语言是在10天时间内设计出来的,虽然语言的设计者水平非常NB,但谁也架不住“时间紧,任务重”,所以,JavaScript有很多设计缺陷。

此外,由于JavaScript的标准——ECMAScript在不断发展,最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了,所以,讲到JavaScript的版本,实际上就是说它实现了ECMAScript标准的哪个版本。

由于浏览器在发布时就确定了JavaScript的版本,加上很多用户还在使用IE8这种古老的浏览器,这就导致你在写JavaScript的时候,要照顾一下老用户,不能一上来就用最新的ES6标准写,否则,老用户的浏览器是无法运行新版本的JavaScript代码的。

以上简介来自:廖雪峰的官方网站

2、JS作用

  • 验证表单(以前的网速慢)
  • 页面特效(PC端的网页效果)
  • 移动端(移动web和app)
  • 异步和服务器交互(AJAX)
  • 服务端开发(nodejs)

3、语言类型

js是一种脚本语言,不仅是脚本语言还是弱类型的脚本语言。

脚本语言是一种解释性语言,解释性语言是相对于编译性语言而言的。

编译型语言:编译代码,把代码编译成CPU认识的语言(文件),然后整体的执行。

解释型语言:一行一行解析,解析一行执行一行。

弱类型语言:简单理解定义一个变量,可以有多种数据类型。(如:var)

4、前端组成

HTML:提供网页上显示的内容(结构)

CSS:美化网页(样式)

JavaScript:控制网页行为(行为)

5、js组成

js = ECMAScript + DOM + BOM + 高级

ECMAScript(前身为欧洲计算机制造商协会):JavaScript的语法规范

DOM(Document Object Model 的文档对象模型简称):JavaScript操作网页上元素的API

BOM(Browser Object Model 的浏览器对象模型简称):JavaScript操作浏览器部分功能的API

6、js书写位置

内嵌式:
  一般放在body的最后,有时放在head标签中(需要写页面加载函数)。
外链式:
  src=”外部js文件路径”

7、JS基础知识

输出语句

console.log("内容");       // 在控制台打印输出内容
alert("内容");                 // 弹窗显示内容
document.write("内容");   // 在页面书写内容,其内容可以识别标签,比如:document.write("<h1>你好</h1>")

其他语句

alert("内容");       // 弹出对话框
prompt("提示信息"); // 可以在弹出的对话框输入内容给后台
confirm("")           // 弹出对话框,有是否按钮

js代码的注意问题:

  1. 在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行。
  2. 如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行。
  3. script标签里面可以写的内容:type="text/javascript" 标准写法,或者language="JavaScript",都是可以省略的,原因是在html开头写了遵循h5标准。
  4. script标签可以出现多对。
  5. 如果使用引入外部js文件的方式,那么不要在script标签里面写任何js代码,如果想写,就新开一对script标签。

img_25336e0b5504f9a5b326090f41d9dcd7.png

img_964e5550b9dc423fcb4297d85f09ac10.png

目录
相关文章
|
18天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
21天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
65 0
|
21天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
23天前
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。
|
24天前
|
缓存 前端开发 JavaScript
超时空加速秘籍:揭秘JavaScript前端开发中的性能魔法,让您的Web应用瞬间穿越到未来!
【8月更文挑战第27天】本文介绍了一系列实用的JavaScript性能优化方法并提供了示例代码,包括减少DOM操作、使用事件委托、避免阻塞主线程、异步加载资源、利用浏览器缓存、代码分割以及使用Service Worker等技术,帮助开发者有效提升Web应用性能和用户体验。
33 2
|
28天前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
22 1
|
28天前
|
存储 前端开发 JavaScript
Web前端的奇幻之旅:探索JS数据类型的奥秘与差异
【8月更文挑战第23天】JavaScript是一种动态类型语言,提供多种内置数据类型支持信息的存储与操作。这些类型对Web前端开发者至关重要,直接影响代码性能与可读性。JavaScript数据类型主要分为两大类:原始数据类型(如Undefined、Null、Boolean等)与引用数据类型(如Object、Array等)。原始类型直接存储值,而引用类型存储指向数据的引用。原始类型不可变且存储在栈中,访问更快;引用类型则存储在堆中,可通过其引用进行修改。理解这些差异有助于编写高效、可维护的代码。
29 0
|
28天前
|
JavaScript 前端开发 开发者
JS 继承之谜:究竟有哪些神秘方法?Web 前端开发者必知的关键技巧待你揭开谜底!
【8月更文挑战第23天】JavaScript (JS) 是 Web 前端开发的关键语言,其中继承是面向对象编程的重要概念。本文探讨了 JS 中几种继承机制:原型链继承、构造函数继承及组合继承。原型链继承利用原型对象实现属性和方法的共享;构造函数继承通过在子类构造器内调用父类构造器实现私有属性的复制;组合继承结合两者优点,既支持属性共享又避免了属性被意外覆盖的风险。理解这些模式有助于开发者更高效地组织代码结构,提升程序质量。
27 1
|
28天前
|
前端开发 JavaScript 开发者
【Web 前端】彻底告别“this”指向困扰:从零开始掌握 JavaScript 中“this”的奥秘
【8月更文挑战第23天】在 JavaScript 中,`this` 关键字的指向是根据其调用上下文动态确定的,这对于 Web 前端开发者而言是一项核心技能。本文通过多个示例解释了 `this` 的指向规则:在对象方法中指向该对象,在独立函数中指向全局对象或 `undefined`,在事件处理器中指向触发事件的 DOM 元素,在构造函数中指向新创建的对象。此外,还介绍了一些技巧,如使用箭头函数、`bind` 方法以及在事件处理器中显式保存 `this` 的引用,以帮助开发者更好地理解和控制 `this` 的指向。
29 1
|
29天前
|
JavaScript 安全 前端开发
Node.js身份验证全攻略:策略与实践,打造坚不可摧的Web应用安全防线!
【8月更文挑战第22天】Node.js作为强大的服务器端JavaScript平台,对于构建高效网络应用至关重要。本文探讨其身份验证策略,涵盖从基于token至复杂的OAuth 2.0及JWT。Passport.js作为认证中间件,支持本地账号验证及第三方服务如Google、Facebook登录。同时介绍JWT轻量级验证机制,确保数据安全传输。开发者可根据应用需求选择合适方案,注重安全性以保护用户数据。
31 1