带你简单了解前端的学习历程

最新推荐文章于 2023-04-18 10:04:01 发布

小舟同学

最新推荐文章于 2023-04-18 10:04:01 发布

阅读量318

点赞数 1

分类专栏：前端框架文章标签： vue javascript js html ajax

本文链接：https://blog.csdn.net/qq_44021875/article/details/110949842

版权

前端框架专栏收录该内容

4 篇文章 3 订阅

订阅专栏

前言

本人不是主要开发前端方面的，但是作为一个菜鸟开发工程师，个人还是觉得有必须去了解一些前端方面的知识，那么在和前端开发进行交流的时候，可以避免自己被坑哈哈哈哈哈,同时也想明白关于前后端是如何进行联系的，以下的话是个人目前用实际接触用到过的一些前端

前端语言/库/组件/框架

HTML

什么是HTML？

HTML： Hyper Text Markup Language 超文本标签语言或者说网页的“源码”
浏览器：“解释和执行”HTML源码的工具
个人理解：如果没有其他加入，那么就是属于静态网页结构那种

HTML文档的基本结构

在这里插入图片描述

附: 统一的web标准：W3C

W3C：World Wide Web Consortium，万维网联盟
W3C的职能：负责制定和维护web行业标准

JavaScript

JS能做什么？我们重点学习什么？

JavaScript是作为脚本语言存在的，所以基本上它只是调用现有的底层API，也就是用其他低级语言所编写的模块，而JavaScript任务就是调用这些API去处理实际的问题。
JavaScript学习重点：表单验证

表单验证：
在向服务器提交前，先做判断输入的信息是否符合要求；
不符合的立即提示用户，符合的就把数据往服务器发送。
举例：中国----太平洋----美国

个人理解：JavaScript是动态美化网页（漂浮广告）、表单的输入验证（必须输入密码！）

JS的组成结构

在这里插入图片描述

JS的组成结构解释

（1）ECMAScript: 是一种语法标准（包含着语法，变量和数据类型，运算符，逻辑控制语句，关键字，保留字，对象）
（2）DOM： 浏览器对象模型
在这里插入图片描述
（3）DOM： 文档对象模型

JS的运行原理（见图）

在这里插入图片描述

JS的使用：内嵌、外部、缩写

JS的基本语法

脚本：平时写的代码。

1.内置JS代码

    <script type="text/javascript">
    <!--
        javascript语句; 
    -->
    </script>

2.document.write("");

   //输出一个字符串
   document.write("hello world");   //显示一行字符串
   document.write(1234);            //显示一行数字
   document.write(sname);           //显示变量的值

注意：
js区分大小写
js语句结尾尽量写分号
大部分语法与java相同
js中注释与java相同
3.声明变量
3.1 var 变量名=值;
3.2 变量名=值;
注意：
变量的数据类型由存入的数据来决定
在js中不明显区分单双引号。

   var i=100;     //i是数值型number
   var a='aabb';  //a是字符串型string
   var b="aabb";  //b是字符串型string

JS核心语法

变量、数据类型typeof()、输入输出、运算符号、控制语句、注释、语法约定

其他问题

Java与Javascript比较：
Java代码需要编译才能执行，而JS代码不需要编译就能执行；
Java是基于服务端的语言，JS是基于客户端的语言。

附：什么叫基于服务端和基于客户端？
简单理解，就是需要在服务端执行的或需要在客户端执行的。

提升前端用户体验、交互：
三大基友：html+css+js

使用概要
在这里插入图片描述

jQuery

简单介绍

在这里插入图片描述

jQuery数据交互

什么是ajax(Javascript And XML)?
Ajax 它是与服务器交换数据的技术，在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)
特点：
A.异步

异步和同步的区别:
同步是请求发过去,要等着回应;
异步不需要等回应,可以进行其他操作

B.局部刷新

什么是Json(JavaScript Object Notation)?
是一种基于 JavaScript 语法子集的开放标准数据交换格式。JSON 是基于文本的，轻量级的，通常被认为易于读/写。
异步的JavaScript和xml,跟后台交互,都用json

JQuery数据交互图
在这里插入图片描述

EasyUI

简单介绍

jQuery EasyUI是一组基于jQuery的UI插件集合体，就是一个组件库。而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
个人理解：
Jquery EasyUI是第三方基于Jquery框架开发的一款轻量级的，侧重于页面显示部分的框架，也可以称为插件。
一般在工作中的用法分为上，中，下，左，右面板一般在工作中使用上（企业logo,登录,退出）左（菜单）中（展示数据）