整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 开发人员的主要基本技能是?

JavaScript 开发人员的主要基本技能是?

序员之所以欣赏JavaScript软件开发,是因为他们能够利用JavaScript构建客户喜欢的高度互动网站。

作者 | PaulAzorín

译者 | 弯月,责编 | 刘静

出品 | CSDN(ID:CSDNnews)

以下为译文:

如今,JavaScript非常流行,它非常灵活,被GitHub评为世界上最常用的编程语言。JavaScript在Web开发中占据了主导地位,大约有95%的网站都或多或少地使用了该语言。

程序员之所以欣赏JavaScript软件开发,是因为他们能够利用JavaScript构建客户喜欢的高度互动网站。他们可以创造出悬停菜单、动画、视频、幻灯片等功能的Web页面。

优秀的JavaScript开发人员了解这种语言的来龙去脉。招聘经理应该确保求职者对以下主题有充分的了解,而且还能够以通俗易懂的方式解释给人听。

控制流

对于JavaScript开发人员而言,控制流是至关重要的概念,其定义了计算机完成一组语句的顺序。

代码历来都是按顺序读取的:从上到下。然而,有些脚本会利用条件结构来改变代码的执行顺序。JavaScript开发人员可以将这些脚本融合到自己的网页中,以提高响应速度并杜绝通信上的浪费。

例如,如今大多数公司只接受求职者通过网络递交的申请和简历。求职者在网上选择自己相中的职位,然后上传简历,并通过填写表格交代清楚自己的联系方式和工作经历。

JavaScript开发人员可以通过编写脚本来警告用户表格中的某些字段不能为空,同时拒绝不合法的表格,这可以让网站更具响应性并避免浪费时间。

在提交表格失败后,申请人可以快速跳转到漏掉的空白框(下方有一个显眼的红色标记),填写信息,然后重新提交表格。

添加一个简单的脚本就可以为求职者提供实时反馈,并且还可以防止求职者和HR专业人员在查找这些信息上浪费时间。

经验丰富的开发人员应该能够解释条件结构的优点,并详细说明如何将这类的脚本添加到网页中。

错误处理

出错再所难免,在软件开发领域尤其如此,即使是经验最丰富和最受尊敬的程序员有时也会犯下严重的错误。

研究表明,软件工程师平均“每提交1000行代码就会产生15-50个错误”。

顶级的开发人员明白错误是不可避免的,而且他们知道如何找到错误并修复错误。面试官可以要求求职人员讲述以往工作中出现的错误,以及他们找到解决方案的过程,这可以更多地了解他们解决问题的方法。

函数

JavaScript和其他流行的编程语言(比如Java和Python等)的一个重大区别在于:函数的使用方法。JavaScript的独特之处在于它允许程序员在代码中将函数作为独立的个体。

JavaScript编程更简单,因为开发人员可以创建更简短、更易读的代码。

此外,由于JavaScript将函数视为基本对象,因此工程师可以创建高阶函数,并将某个函数作为参数传递给另一个函数。如此一来,程序员无需编写更多代码即可增加应用程序的复杂性。

范围

对JavaScript的作用域有深入的了解将有助于工程师编写更具可读性的代码,并减少工作中的错误。

JavaScript拥有两种作用域:全局和局部。全局指的是无论变量位于何处,你都可以从代码的任意位置读取和编辑的该变量。

另一方面,局部作用域指的是只能在函数中更改的变量。只有对这些术语有深入了解的JavaScript开发人员才能编写良好的代码,并通过严格的访问级别来杜绝人为错误。

在聘用JavaScript开发人员之前,经理必须确保该开发人员对范围以及如何提高最终软件的质量有扎实的了解。

软件的安全性

数据隐私是高科技行业面临的最重要的挑战之一。数据泄露的数量每年都在持续增加,研究表明“平均每39秒”就有黑客闯入一台计算机。

许多公司选择与国外的JavaScript开发公司合作,目的是为了寻找网络开发项目的安全专家。但是,开发团队内部的每个成员都对软件安全负有不可推卸的责任。

顶级的工程师应当对目前保障软件安全的主要方法有扎实地了解,并且能够清楚地阐明每种方法的优点和缺点。

招聘经理应该要求求职者讲述保障软件安全的方法,并详细说明他们如何在以往的项目中确保数据隐私。

用户设计

用户设计是所有软件开发人员都应该掌握的基本技能。对于JavaScript开发人员而言尤为如此,他们需要负责构建美观且功能强大的网站,这些网站必须在外观和感觉上与消费者产生共鸣。

尽管用户界面和体验设计曾经被视为专业人员的工作,但是现代软件开发要求将最终用户的考虑因素融入软件开发生命周期的各个步骤。

优秀的程序员能够进行基本的市场研究,了解他们的目标客户,及时了解最新的用户设计趋势,并且还能够展示如何在以往的项目中成功地创建了直观且优美的产品。

总结

JavaScript对于现代Web开发至关重要。程序员可以利用JavaScript轻松快速地构建高度交互的网站、Web应用程序和移动应用。

然而,并非所有开发人员团队都完全相同。如果公司打算招聘自家的开发人员(而不是外包JavaScript的开发),则招聘经理必须具备根据知识和技术力来筛选候选人的能力。

为了提高开发项目的成功率,高管可以彻查JavaScript开发人员对于编程语言的掌握程度、相关经验以及是否愿意进一步深造自我。

原文:https://hackernoon.com/the-top-essential-skills-for-javascript-developers-7x1935sl

本文为 CSDN 翻译,转载请注明来源出处。

【END】

JS获取浏览器属性数据

<h3>你目前所使用的浏览器的数据:</h3>

<div class="data">

<script type="text/javascript">

var userAgent=navigator.userAgent.toLowerCase();

var browser=

(browser=userAgent.match(/qqbrowser\/([\d.]+)/))?"qqbrowser/"+browser[1]:

(browser=userAgent.match(/se\s+2.x/))?"sogou/2.x": //sougou

(browser=userAgent.match(/msie\s+([\d.]+)/))?"msie/"+browser[1]: //ie

(browser=userAgent.match(/chrome\/([\d.]+)/))?"chrome/"+browser[1]: //chrome

(browser=userAgent.match(/firefox\/([\d.]+)/))?"firefox/"+browser[1]: //firefox

(browser=userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?"safari/"+browser[1]: //safari

(browser=userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?"opera/"+browser[3]: //opera

"other browser";

//以上是条件运算符“?:"的嵌套使用

var browser4=browser.substr(0,6);

document.write("<table>");

document.write("<tr><td>" + "Browser:" + "</td>");

document.write("<td>" + browser4 + "</td></tr>" );

document.write("<tr><td>" + "Browser Version:" + "</td>");

document.write("<td>" + browser + "</td></tr>" );

document.write("<tr><td>" + "userAgent:" + "</td>");

document.write("<td>" + userAgent + "</td></tr>" );

var appVersion=navigator.appVersion.toLowerCase();

document.write("<tr><td>" + "appVersion:" + "</td>");

document.write("<td>" + appVersion + "</td></tr>" );

var appCodeName=navigator.appCodeName.toLowerCase();

document.write("<tr><td>" + "appCodeName:" + "</td>");

document.write("<td>" + appCodeName + "</td></tr>" );

var appName=navigator.appName.toLowerCase();

document.write("<tr><td>" + "appName:" + "</td>");

document.write("<td>" + appName + "</td></tr>" );

//var language=navigator.language.toLowerCase(); (ie下无此属性)

//document.write("language:" + language + "<br>" );

var platform=navigator.platform.toLowerCase();

document.write("<tr><td>" + "platform:" + "</td>");

document.write("<td>" + platform + "</td></tr>" );

document.write("</table>");

</script>

</div>

使用chrome显示网页内容如下:

使用firefox显示网页内容如下:

2 JS获取窗口数据

<h3>浏览器窗口数据:</h3>

<div class="data">

<table>

<col width="50%" />

<col width="50%" />

<tr><td>右边的数据反映浏览器窗口高宽的数据(单位是px,不包括上端的菜单栏和工具栏,也不包括下端的状态栏;按F11全屏显示或“还原”按钮并调整大小也会有不同的数据反馈。)</td>

<td>

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

<p>浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/> </p>

<p>浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/> </p>

</form>

</td></tr></table>

</div>

<script type="text/javascript">

var winWidth=0;

var winHeight=0;

function findDimensions() //函数:获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth=window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth=document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight=window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight=document.body.clientHeight;

//通过深入Document内部对body进行检测,获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight=document.documentElement.clientHeight;

winWidth=document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value=winHeight;

document.form1.availWidth.value=winWidth;

}

findDimensions();

//调用函数,获取数值

window.onresize=findDimensions;

</script>

使用chrome显示网页内容如下:

使用firefox显示网页内容如下:

-End-

单是网页中一个特定的区域,用来描述需要用户输入的页面内容,在用户输入具体信息后,提交到指定位置进行处理。

HTML 文档使用 form 标签表示表单,其下有:

  • input 标签:用于为 Web 的表单创建交互式控件,用来接收用户的数据,它可以接收的数据类型很多,有文本内容、密码框等多种数据类型。
  • select 和 option 标签:select 和 option 标签实现下拉列表框,select 标签用于显示可供用户选择的下拉列表,其中的每个选项都由 option 标签标识。

form 标签表示表单。form 标签有两个重要的属性,actionmethod 属性,其中 action 的属性值是表单提交的地址,method 的属性值是提交的方法。

其基本语法为:

<form action="表单提交地址" method="提交方法"></form>

method 属性规定了表单提交方式,最常用的有两种方式,分别是 GETPOST

GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器。POST 是将请求参数置于请求体内发送。这部分内容属于 JavaScript 的内容,同学们先了解即可,在后面的章节会详细讲解。

选择类表单元素是指单选框复选框

  • 单选框就是给出多个选项只能选择其中一个。
  • 复选框就是给出多个选项可以选择多个。

单选框和复选框的使用格式如下所示:

<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
 
  <!--重置按钮,可以把表单中已填写的信息给清除掉。-->
  <input type="reset" />

注意:使用单选框时,每个选项一定要设置相同的 name 值,否则就没有单选的效果。

使用 type="file" 表示文件类型表单元素,其使用格式为:

<input type="file" name="表单名字" accept="上传文件的格式" />

使用 type="submit" 表示发送类型表单元素,其使用格式为:

<input type="submit" name="表单名字" value="表单名" />

在 HTML 中,通过 selectoption 标签可以实现下拉列表框,select 标签用于显示可供用户选择的下拉列表,其中的每个选项都由 option 标签标识。

其语法格式为:

<select>
  <option>选项一</option>
  <option>选项二</option>
  <option>选项三</option>
</select>

select 有两个常用属性,如下所示:

属性

描述

multiple

设置下拉列表可以选择多项。

size

设置下拉列表选择几个表项。

option 有两个常用属性,如下所示:

属性

描述

selected

设置是否被选中。

value

设置列表项的默认值。

password 类型是密码输入框,其用法如下所示:

<input type="password" />

textarea 标签是多行文本标签,其用法如下所示:

<textarea name="名称" cols="列数" rows="行数"></textarea>

内嵌框架是指在当前的页面中再嵌入另外一个或多个网页。在 HTML 中,使用 iframe 标签来实现一个内嵌框架。

基本语法:

<iframe src="内嵌页面的链接地址" name="框架名"></iframe>

内嵌框架的常用属性:

属 性

可 取 值

描 述

frameborder

0、1

规定是否显示框架周围的边框

height

pixels

定义框架高度

width

pixels

定义框架宽度

name

自定义

框架名,用于超链接操作

scrolling

yes、no、auto

规定是否在框架中显示滚动条

src

引用页面地址

内嵌页面地址