全栈工程师必须要掌握的前端JavaScript技能

作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL ，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公司中，职能划分并不明确，往往要一个人前后端全都会做， 所以作为一名全栈工程师或者后端工程师，掌握必备的前端知识，也是必不可少的一项技能。今天就着重讲解一下，作为一名全栈工程师，前端JavaScript方面的必须要掌握的相关知识。

什么是JavaScript?

在前端Web开发中，共有3种语言是开发者必须要掌握的，这3种语言一起组成了Web开发的基石：

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

JavaScript作为一种函数式优先，解释执行，轻量级的编程语言，是目前最为流行的编程语言之一。JavaScript起于浏览器脚本编程，兴于Web开发，却不止于前端脚本语言。目前JavaScript也已经支持后端编程，面向对象等，如Node.js。当然本文讲解的内容，主要是侧重于Web前端脚本语言进行讲解。

创建JavaScript方式

在日常开发中，创建JavaScript脚本一共有2种方式：

  1. 内嵌式：在Html页面中，通过定义【<script type="text/javascript">//javascript代码</script>】标签，内嵌JavaScript脚本。这种内嵌式写法，适用于和当前页面强相关的业务逻辑内容。
  2. 外链式：在通常开发中，为了方便维护，便于移植，JavaScript代码通常写在独立的文件中【如：index.js】，然后在前端Html页面中进行引入。外链式是目前普遍使用的一种方式。

关于两种创建形式，如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><script type="text/javascript">//内嵌式javascript代码var a=10;var b=2;var c=a+b;console.log('a+b='+c);</script><script src="js/index.js"></script><body></body>
</html>

 

变量定义

变量在进行业务逻辑处理及数据运算中，主要用于存储数据， 是承载数据的载体。主要通【var 变量名 = 变量值;】的形式进行定义。

构造变量名称（唯一标识符）的通用规则是：

  • 名称可包含字母、数字、下划线和美元符号
  • 名称必须以字母开头
  • 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
  • 名称对大小写敏感（y 和 Y 是不同的变量）
  • 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。变量命名，建议具有明确的含义，这样会更加方便理解与维护。

数据类型

在JavaScript中，根据变量所存储的数据内容的类型不同，可以分为不同的数据类型，主要有以下几种：

  • 数值类型number：用于表示数字，包括整数，单精度浮点数，双精度浮点数等，如： var num=10;//数值类型
  • 文本类型string：用于表示字符串，如： var text=”文本”;//字符串类型
  • 布尔类型boolean：用于表示逻辑上的真和假，只有两个值：true，false。如： var flag=true; //两个值，true,false表示真或假
  • 空类型：用于表示空，如：var  kong=null;//用于清空变量内容，表示空
  • 未定义：表示此变量只是被声明，并未赋值。如： var aa;// undefined 默认值。
  • 数组类型：用于存储多个相同类型的值。
  • 对象类型object：用于表示复杂的结果体，可以存储多个不同类型的值。注意：空类型，数组类型，都属于对象类型。

如何查看数据类型？通过typeof(数量名)的形式获取数据类型，然后再通过console.log()在浏览器输出的形式查看，如下所示：

var arr=[1,2,3,4,5];
console.log(typeof(arr));//输出object

运算符

运算符主要用于在不同的变量之间进行相应的业务逻辑处理，如：加，减，乘，除等，运算符主要有以下几种：

  • 算术运算符：用于对数字执行算数运算，如：加，减，乘，除：var sum=1+2-3*4/2;
  • 字符串拼接，用于将多个字符串拼接成一个字符串，不同文本之间用加号进行拼接。
  • 比较运算符：主要用于对不同变量之间进行比较，如：大于，小于，等于，大于等于，小于等于，恒等于，恒不等于，三元表达式等。
  • 逻辑运算符：主要是与，或，非，等逻辑上的运算。
  • 位运算符：主要是针对数字进行的一些位之间的运算，如：位与，位或，位非，异或，左移，右移等。

关于运算符之间的一些示例，如下所示：

var a=10;
var b=2.1;
var c=a+b;
console.log('a+b='+c);
var arr=[1,2,3,4,5];
console.log(typeof(arr));var flag1 = 2>3;
var flag2=2<3;
var flag3=2==2;//类型一致的比较
var flag4=2===’2’;//更准确，比较两个值是不是完全一致

注意：不同的运算符都有优先级，如果不同运算符进行组合运算，则需要注意优先级。

代码块Statement

代码块是JS中用于设置复杂程序的一种语法。几种常见的代码块，如下所示：

1. 条件代码块

条件代码块，主要用于判断根据不同条件，执行不同分支的语句，格式主要有以下3种：

//第一种，简单形
if (条件运算) {//满足条件时执行
}
//第二种，两分支形
if (条件运算) {//条件满足时执行
} else {//条件不满足时执行
}
//第三种，多分支形
if (条件运算1) {//条件1满足时执行
} else if (条件运算2) {//条件2满足时执行
} else {//条件都不满足时执行
}

 

2. 循环

循环主要用于多次执行相同的代码，且每次的执行参数不同。循环主要有以下几种：

  • for - 多次遍历代码块
  • for/in - 遍历对象属性
  • while - 当指定条件为 true 时循环一段代码块
  • do/while - 当指定条件为 true 时循环一段代码块

其中最常用的是for循环，格式如下所示：

for (语句 1; 语句 2; 语句 3) {要执行的代码块
}

 

代码块示例，综合使用循环和条件判断的示例如下所示：

//求0到100之间的偶数的和
var sum = 0;
for (var i = 0; i < 100; i++) {if (i % 2 == 0) {sum += i;}
}

函数function

函数被设计为执行特殊功能的代码块，作为一个整体，可以被重复的调用。函数通过 function 关键词进行定义，格式如下所示：

function name(参数 1, 参数 2, 参数 3) {要执行的代码
}

 

如上述求和的功能，就可封装成函数，然后进行调用，如下所示：

function getSum(start, end) {var sum = 0;for (var i = stasrt; i < end; i++) {if (i % 2 == 0) {sum += i;}}return sum;//return后面的代码将不再执行。
}
var sum1=getSum(0,100);//0,100之间的偶数和
var sum2=getSum(100,200);//100,200之间的偶数和

 

上述函数封装以后，就可以方便的调用，以实现特定的功能，那么，如果想要根据不同的输入，实现不同的逻辑，如：某些情况下实现奇数逻辑，另些情况下实现偶数逻辑，要如何做呢？

在这种情况下，可以将特殊的逻辑提取出来，由调用方进行实现，即调用时输入的奇数求和的逻辑，就实现奇数求和；输入的是偶数求和的逻辑，就实现偶数的求和。或者其他的逻辑。具体如下所示：

//条件求和
function getSumWithCondition(start, end, fn) {var sum = 0;for (var i = stasrt; i < end; i++) {if (fn(i)) {sum += i;}}return sum;}
//通过函数和条件处理相结合，可以完成一些相对复杂的逻辑的处理
var result = getSumWithCondition(1, 100, function(n) {if (n % 2 === 0) {return true;} else {return false;}
});

数组Array

数组主要用于存储相关格式的一组数据。格式为：var array-name = [item1, item2, ...]; 如：var arr=[1,2,3,4,5];

数组的一些属性及使用方法，如下所示：

var arr = [1, 2, 3, 4, 5];//数组的属性：
var len = arr.length //数组的长度
var a = arr[1]; //数组的索引
arr.push(6) //往数组的末尾添加元素
arr.unshift(-1) //往数组的开头添加元素。
arr.forEach(funciton(item, index) {console.log(item);
});

对象object

对象是一个整体，存储不同类型的数据。关于对象的使用方式，如下所示：

var obj = {name: ’小六’,age: 18
};
obj.name //访问某个值for (var k in obj) {console.log(k, obj[k])
}

DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。整个页面，就是一个可视化树状结构，如下所示：

通过JavaScript操作页面上的对应的标签及其属性，属于DOM范畴内的相关内容。主要包含以下几个方面：

1. 获取Html元素

通过JavaScript获取Html元素，主要有以下几种方式：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

具体示例，如下所示：

var block = document.getElementById(id);
block.textContent = ’文本内容’;
var contents = document.getElementsByName(name); //伪数组
var contents = document.querySelectorAll(‘p’); //标签选择器获取
var contents = document.querySelectorAll(‘#container p’); //id选择器
var contents = document.querySelectorAll(‘.text’); //类名
var content = document.querySelector(‘.text’); //返回首个满足条件的标签
content.previousElementSibling.textContext = ’’; //上一个兄弟节点
content.nextElementSibling.textContent = ’’; //下一个兄弟节点
var container = content.parentNode; //父节点标签
var items = container.children;

2. 样式处理

通过JavaScript也可以为Html元素设置对应的样式属性。示例如下所示：

var block = document.getElementById(id);
block.style.width = ’80 px’;
block.style.height = ’80 px’;
block.style.backgroundColor = ’red’;
block.className = ’’; //通过设置类名，也可以设置样式

注意：虽然CSS和JavaScript都可以设置样式， 但是非特殊情况下， 建议采用CSS设置样式

3. 文本处理

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

4. 事件监听

当用户需要和系统进行交互时，可以通过点击Html元素触发对应的事件，如：单击事件，双击事件，以及选择事件，切换事件等。事件主要是告诉系统，需要做哪些操作。

事件监听主要有以下几种形式：

var block = document.getElementById(id);
block.onclick=function(){}block.addEventListener(‘click’,function(){});
//同一类型事件，可以添加多个而不会覆盖
block.addEventListener(‘click’,function(){});

 

综合应用【轮播图】

本示例主要综合应用了Html，JavaScript，CSS样式，实现轮播图功能。主要如下所示：

Html代码，如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><link href="./css/index.css" type="text/css" rel="stylesheet" /><body><div class="container"><ul><li><img src="imgs/one.jpg"></li><li><img src="imgs/two.jpg"></li><li><img src="imgs/three.jpg"></li><li><img src="imgs/four.jpg"></li><li><img src="imgs/five.jpg"></li></ul><div class="dot"><span class="circle"></span><span class="circle"></span><span class="circle"></span><span class="circle"></span><span class="circle"></span></div></div><div class="bottom"><button id="prev">上一个</button><button id="next">下一个</button></div><script src="./js/index.js" type="text/javascript"></script></body>
</html>

 

CSS样式代码

html,
body {width: 100%;height: 100%;margin: 0px;padding: 0px;
}.container {width: 100%;height: 50%;text-align: center;margin-bottom: 10px;
}.container ul {width: 50%;height: 100%;position: relative;left: 25%;margin-left: 0px;margin-right: 0px;padding-left: 0px;padding-right: 0px;
}.container ul li {width: 100%;height: 100%;list-style: none;position: absolute;
}.container ul li img {width: 100%;height: 100%;transition: all 2s;opacity: 0;
}.container ul li .active {opacity: 1;
}.bottom {text-align: center;
}.container .dot {width: 100%;height: 15px;position: relative;margin-top: -40px;z-index: 5;opacity: 1;
}.container .dot .circle {width: 10px;height: 10px;border-radius: 5px;border: 1px solid greenyellow;background-color: white;display: inline-block;opacity: 1;}

 

JavaScript代码

console.log("----------begin-----------");
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = -1;
prev.addEventListener('click', function() {var images = document.querySelectorAll('.container ul li img');var circles = document.querySelectorAll('.container .dot .circle');var len = images.length;if (index <= 0) {index = len;}images.forEach(function(item, index) {item.className = '';});circles.forEach(function(item, index) {item.style.backgroundColor = 'white';});images[index - 1].className = 'active';circles[index - 1].style.backgroundColor = 'red';index = index - 1;
});next.addEventListener('click', function() {var images = document.querySelectorAll('.container ul li img');var circles = document.querySelectorAll('.container .dot .circle');var len = images.length;if (index >= len - 1) {index = -1;}images.forEach(function(item, index) {item.className = '';});circles.forEach(function(item, index) {item.style.backgroundColor = 'white';});images[index + 1].className = 'active';circles[index + 1].style.backgroundColor = 'red';index = index + 1;
});
setInterval(function() {next.click();
}, 3000);
console.log("----------end-----------");

 

示例效果图，如下所示：

以上就是全栈工程师必须要掌握的前端JavaScript技能全部内容。希望可以抛砖引玉，一起学习，共同进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/142182.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL数据库基础知识要点总结

MySQL数据库基础知识要点总结

目录 前言 一.数据库构成 1.1 表 1.2 关系 1.3 索引 1.4 查询语言 1.5 数据库管理系统 二.数据类型 2.1 整数 2.2 浮点 2.3 日期与时间 2.4 字符串 三.约束条件 3.1 主键约束 3.2 唯一约束 3.3 外键约束 3.4 非空约束 3.5 默认值约束 总结 前言 数据库是…
阅读更多...
产品经理认证(UCPM)备考心得

产品经理认证(UCPM)备考心得

UCPM是联合国训练所CIFAL中心颁发的产品经理证书。如今&#xff0c;ESG是推动企业可持续发展的新潮流。UCPM作为一种可持续发展证书&#xff0c;为我们带来了一套先进科学、系统全面的产品管理模式&#xff0c;是产品管理领域公认的权威证书。那么&#xff0c;如何准备这张证书…
阅读更多...
js中哪些地方会用到window？

js中哪些地方会用到window？

前言 Window 对象是JavaScript中的顶层对象&#xff0c;它代表了浏览器中打开的窗口或者标签页。浏览器中打开的每一个窗口/标签页都会有一个对应的 Window 对象。在浏览器中&#xff0c;全局作用域的 this 就是指向 Window 对象。 正文 在 JavaScript 中&#xff0c;window 对…
阅读更多...
Css 美化滚动条

Css 美化滚动条

/*设置滚动条宽度为 6px*/ ::-webkit-scrollbar {width: 6px; } /*设置背景颜色&#xff0c;并设置边框倒角&#xff0c;设置滚动动画&#xff0c;0.2 */ ::-webkit-scrollbar-thumb {background-color: #0003;border-radius: 10px;transition: all .2s ease-in-out; } /*设置滚…
阅读更多...
【算法分析与设计】算法概述

【算法分析与设计】算法概述

目录 一、学习要点二、算法的定义三、算法的性质四、程序(Program)五、问题求解(Problem Solving)六、算法的描述七、算法分析的目的八、算法复杂性分析&#xff08;一&#xff09;算法时间复杂性分析&#xff08;二&#xff09;算法渐近复杂性1、渐进上界记号-大O符号2、渐进下…
阅读更多...
Java笔记三

Java笔记三

包机制&#xff1a; 为了更好地组织类&#xff0c;Java提供了包机制&#xff0c;用于区别类名的命名空间。 包语句的语法格式为&#xff1a;pack pkg1[. pkg2[. pkg3...]]; 般利用公司域名倒置作为包名&#xff1b;如com.baidu.com&#xff0c;如图 导包&#xff1a; 为了能够…
阅读更多...
顺序读写函数的介绍：fscanf fprintf

顺序读写函数的介绍：fscanf fprintf

目录 函数介绍&#xff1a; fprintf&#xff1a; 将结构体变量s的成员列表内容写入文件中&#xff1a; 文件效果&#xff1a;已经进行了格式化&#xff0c;3.140000是最明显的效果&#xff0c;因为float需要补齐0来补充精度 和printf的对比&#xff1a; 不同之处&#xff…
阅读更多...
苹果电脑专业的条形码工具iBarcoder：助力高效条形码生成，提升工作效率

苹果电脑专业的条形码工具iBarcoder：助力高效条形码生成，提升工作效率

iBarcoder for mac是Mac os平台上的一款优秀条码生成软件。它可以帮助用户建立不同类型的条形码&#xff0c;并允许用户设计并打印自己的条码标签&#xff0c;创建条码图形的零售包装、书籍、贴纸等。 在iBarcoder中&#xff0c;用户可以方便地创建专业的条形码标签&#xff0…
阅读更多...
Java8实战-总结34

Java8实战-总结34

Java8实战-总结34 重构、测试和调试使用 Lambda 重构面向对象的设计模式观察者模式责任链模式 重构、测试和调试 使用 Lambda 重构面向对象的设计模式 观察者模式 观察者模式是一种比较常见的方案&#xff0c;某些事件发生时&#xff08;比如状态转变&#xff09;&#xff0…
阅读更多...
【excel密码】如何给excel设置带有密码的只读模式

【excel密码】如何给excel设置带有密码的只读模式

大家提起只读模式&#xff0c;应该都不会联想到密码&#xff0c;想起excel密码可能会想到打开密码或者工作表保护。今天给大家分享如何设置带有密码的只读模式。 打开excel文件&#xff0c;将文件进行【另存为】设置&#xff0c;然后停留在保存路径的界面中&#xff0c;我们点…
阅读更多...
笔记2.2：网络应用基本原理

笔记2.2：网络应用基本原理

一. 网络应用的体系结构 &#xff08;1&#xff09;客户机/服务器结构&#xff08;Client-Server, C/S&#xff09; &#xff08;2&#xff09;点对点结构&#xff08;Peer-to-Peer&#xff0c;P2P&#xff09; &#xff08;3&#xff09;混合结构&#xff08;Hybrid&#x…
阅读更多...
js制作柱状图的x轴时间, 分别展示 月/周/日 的数据

js制作柱状图的x轴时间, 分别展示 月/周/日 的数据

背景 有个需求是要做一个柱状图, x 轴是时间, y 轴是数量. 其中 x 轴的时间有三种查看方式: 月份/周/日, 也就是分别查看从当前日期开始倒推的最近每月/每周/每日的数量. 本篇文章主要是用来制作三种不同的 x 轴 从当前月开始倒推月份 注意 getMonth() 函数可以获取当前月份…
阅读更多...
【数学建模】2023华为杯研究生数学建模F题思路详解

【数学建模】2023华为杯研究生数学建模F题思路详解

强对流降水临近预报 我国地域辽阔&#xff0c;自然条件复杂&#xff0c;因此灾害性天气种类繁多&#xff0c;地区差异大。其中&#xff0c;雷雨大风、冰雹、龙卷、短时强降水等强对流天气是造成经济损失、危害生命安全最严重的一类灾害性天气[1]。以2022年为例&#xff0c;我国…
阅读更多...
基于C++实现的3D野外赛车驾驶游戏源码+项目文档+汇报PPT

基于C++实现的3D野外赛车驾驶游戏源码+项目文档+汇报PPT

项目介绍&#xff1a;本项目实现了一个户外场景下的赛车游戏&#xff0c;可以通过键盘控制赛车的移动&#xff0c;视角为第二人称视角。场景中有汽车&#xff0c;建筑&#xff0c;道路&#xff0c;天空等物体&#xff0c;拥有光照和阴影的效果。通过粒子系统模拟尾气效果&#…
阅读更多...
Spring Boot与Spring Security的跨域解决方案

Spring Boot与Spring Security的跨域解决方案

目录 一、什么是跨域问题 二、Spring Boot和Spring Security介绍 三、如何解决Spring Boot与Spring Security的跨域问题 一、什么是跨域问题 跨域问题&#xff08;Cross-Origin Resource Sharing&#xff0c;简称CORS&#xff09;是指在Web开发中&#xff0c;浏览器出于安全…
阅读更多...
vue+express、gitee pm2部署轻量服务器

vue+express、gitee pm2部署轻量服务器

一、代码配置 前后端接口都保持 127.0.0.1:3000 vue创建文件 pm2.config.cjs module.exports = {apps: [{name: xin-web, // 应用程序的名称script: npm, // 启动脚本args: run dev, // 启动脚本的参数cwd: /home/vue/xin_web, // Vite 项目的根目录interpreter: none, // 告…
阅读更多...
[动物文学]走红年轻人化身“精神动物”，这届年轻人不想做人了

[动物文学]走红年轻人化身“精神动物”，这届年轻人不想做人了

数据洞察流行趋势&#xff0c;敏锐把握流量风口。本期千瓜与您分享近期小红书八大热点内容&#xff0c;带您看热点、追热门、借热势&#xff0c;为您提供小红书营销布局风向标。 「动物文学」走红 年轻人化身“精神动物” 其实&#xff0c;这届年轻人“不想做人”很久了………
阅读更多...
Kubernetes组件和架构简介

Kubernetes组件和架构简介

目录 一.概念简介 1.含义&#xff1a; 2.主要功能&#xff1a; 3.相关概念&#xff1a; 二.组件和架构介绍 1.master&#xff1a;集群的控制平面&#xff0c;管理集群 2.node&#xff1a;集群的数据平面&#xff0c;为容器提供工作环境 3.kubernetes简单架构图解 一.概…
阅读更多...
使用vue-cli脚手架工具搭建vue工程项目以及配置路由

使用vue-cli脚手架工具搭建vue工程项目以及配置路由

vue-cli是用node编写的命令行工具&#xff0c;我们需要进行全局安装。打开命令行终端&#xff0c;输入如下命令&#xff1a; 1 $ npm install -g vue-cli 这里使用的是npm&#xff0c;为了开发的便利&#xff0c;推荐安装cnpm&#xff0c;这样运行指令会更迅速&#xff0c;安…
阅读更多...
描述符——设备描述符

描述符——设备描述符

文章目录 描述符定义描述符实现描述符含义 描述符定义 描述符实现 /*** brief Device descriptor.*/ typedef struct __attribute__ ((packed)) {uint8_t bLength ; /**< Size of this descriptor in bytes. */uint8_t bDescriptorType ; /**< DEVICE D…
阅读更多...
最新文章

Copyright @ 2022~2023