【前端入门】前端基本概念

最近实习,在的公司倾向于全栈开发,虽然之前都在写后端,对前端基本上是一点都不懂,经过一个月左右的项目锻炼,对前端React的开发有了一定的了解,整理下来,方便以后查看。

在入手前端开发之前,有必要先好好认识一下前端的一些概念,对他们是什么、干什么的有大致的了解,这样有利于构建一个相对全面的认识


前端概述

现代互联网应用大都由运行在服务器的后端程序和运行在各种终端设备的前端程序共同构成。

这里写图片描述

后端的代码、资源和数据是预先就部署或存储在后端并且运行在后端服务器上。而前端运行所需的代码、资源和数据都是来自后端的。前端从后端服务器安装或加载程序并运行在终端设备中,并且前端和后端通过网络进相互协作,最终向用户展示和实现 WEB 应用的全部内容和功能。

1.1 前端应用就是指运行在各种终端设备的程序及资源
  • HTML、CSS 和 JS 提供前端应用运行的代码
  • 图片和视频等为前端应用提供多媒体内容
  • 后端 API 为前端提供业务功能服务和数据访问服务
1.2 前端应用的核心运行环境是浏览器引擎
  • 浏览器引擎通过解析 HTML 来呈现应用页面的结构和内容
  • 浏览器引擎通过解析 CSS 来渲染应用页面的式样和风格
  • 浏览器引擎通过执行 JS 代码以实现应用页面的动态功能
  • 浏览器引擎帮助应用页面加载静态资源
  • 浏览器引擎可以实现与后端服务的功能和数据交互
1.3 前端开发的重点是编写和组织 HTML、CSS 和 JS 代码
  • 前端应用由一个或多个应用页面构成,应用页面也俗称为网页或简称为页面。只有一个页面的前端应用成为单页面应用,而多页面应用是通过多个页面间的静态或动态链接而相互管理起来的应用。
  • HTML 是描述页面结构和内容的语言,每个页面都有其对应的 HTML 文件,HTML 是页面的主文件。
  • CSS 是描述页面风格和式样的语言,CSS 是直接嵌入或间接引入到 HTML 页面中的。
  • JS 是实现页面动态功能的变成语言,JS 也直接嵌入或间接引入到 HTML 页面中的。

基本概念

2.1 JavaScript

一种动态的通用面向对象的编程语言

2.2 HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)是一种通过标签来描述网页的语言。HTML文档 = 网页。其中HTML5是下一代HTML标准

2.3 CSS

CSS 指层叠样式表 (Cascading Style Sheets),用来定义HTML元素展示样式。CSS3是最新的CSS标准

2.4 Ajax

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

2.5 JQuery

JQuery是一个JacaScript库,简化了JavaScript编程

2.6 React

Facebook开源的一种前端框架

2.7 Node

Node 是服务器的 JavaScript 运行环境,提供 API 与操作系统互动。Node可以类比为java的JVM

主要用途:

  • 开发前端应用
  • 快速搭建服务
  • 架设网站
2.8 DOM

DOM的全称为:Document Object Model。它是HTML文档的对象化描述,也是HTML元素与外界(如Javascript)的接口。

React就是在DOM的基础上创造虚拟DOM

2.9 Session

会话,通过在服务器记录信息确定用户身份

Cookie/Session机制详解

通过在客户端记录信息确定用户身份

2.11 ES6

ECMAScript 6 是JavaScript语言的下一代标准。ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你好!要入门前端的 WebSocket,你需要了解以下几个方面: 1. WebSocket 是什么? WebSocket 是一种在客户端和服务器之间进行实时双向通信的协议。它与传统的 HTTP 请求不同,能够实现服务器向客户端推送数据,而不需要客户端发送请求。 2. 如何使用 WebSocket? 在前端,你可以使用 JavaScript 中提供的 WebSocket API 来建立 WebSocket 连接。通过创建一个 WebSocket 对象,指定连接的 URL,你可以连接到服务器并进行通信。 3. 建立 WebSocket 连接: 使用 JavaScript 的 `new WebSocket(url)` 方法可以创建一个 WebSocket 对象。`url` 参数是指定服务器的地址。例如,`ws://example.com/socket`。 4. WebSocket API: WebSocket 对象提供了一些常用的方法和事件,用于控制连接和处理数据。常见的方法包括:`send()` 用于向服务器发送数据,`close()` 用于关闭连接。常见的事件包括:`onopen` 连接建立时触发,`onmessage` 接收到消息时触发,`onclose` 连接关闭时触发等。 5. 服务器端处理: WebSocket 是一种双向通信协议,它需要在服务器端进行相应的处理。服务器端可以使用不同的编程语言来实现 WebSocket 的功能,如 Node.js 的 `ws` 模块或其他编程语言的相应库。 如果你是前端 WebSocket 的初学者,我建议你先了解 WebSocket 的基本概念和使用方法,然后通过实践来深入学习并体验其功能。你可以找一些示例代码来尝试建立连接、发送消息和接收消息等操作。希望对你有所帮助!如果你有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值