JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 语句
JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" :
实例
document.getElementById("demo").innerHTML = "你好 Dolly";
尝试一下 »
分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
实例:
a = 5;
b = 6;
c = a + b;
以上实例也可以这么写:
a = 5; b = 6; c = a + b;
尝试一下 »
您也可能看到不带有分号的案例。 在 JavaScript 中,用分号来结束语句是可选的。 |
JavaScript 代码
JavaScript 代码是 JavaScript 语句的序列。
浏览器按照编写顺序依次执行每条语句。
本例向网页输出一个标题和两个段落:
实例
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始,以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落:
实例
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) :
<table class="reference" "style="width: 100%" style="border: 0px; margin: 4px 0px; padding: 0px; width: 729px; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; line-height: normal; text-align: start; white-space: normal;">
语句 | 描述 |
---|---|
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:
var person="Hege";
var person = "Hege";
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("你好 \
世界!");
不过,您不能像这样折行:
document.write \
("你好世界!");
您知道吗?
提示:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
程序开发过程中,我们始终要谨记的一点就是:程序是写给人看的,不是写给机器看的。任何项目开发,都必须要考虑到人员迭代,我们不能让下一个接手你代码的人,在看到你写的代码时会说出这样的话,“这个代码是人写出来的吗?可读性太差了”。因此,我们必须遵循一定的规范,让代码的可读性更强。
今天,我们就一起来看下前端开发过程所能涉及到的跟HTML有关的规范问题。
HTML5
在HTML文件中,推荐使用支持HTML5特性的文档声明,<!DOCTYPE html>。
首先是在文件的命名上,应当采用驼峰式命名,首字母小写,后面每个单词首字母大写,而且对于具体的文件应当具有语义化,能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发,甚至是组件化开发,在文件命名时更应该以模块名或者组件名来命名。
例如在写一个AngularJS应用时,由于会涉及到Controller,Service,Filter等概念,我们会分别建立一个文件,假如这个模块的名字是库存管理stockManage,我们可以这样来命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我们所说的语义化指的是使用具有语义化的标签,在H5中添加了类似于header, nav, article, section, aside, footer等标签,从单词的意思上我们也很容易看出标签的含义。
我们不推荐使用只有div标签的页面,例如
不推荐使用
而是应该使用以下这种带有语义化的标签。
推荐使用
img标签是网页用来显示照片的标签,在页面所有标签中占据的比例非常之高,但是在使用img标签时也有下面需要注意的点。
给定width和height属性
因为浏览器在加载图片的过程中,需要先下载图片,然后再解析图片的高度和宽度,如果不给img元素设定高度和宽度,这样在图片加载过程中会不断的计算,重排页面的布局,在网络不好的时候就会经常出现元素出现不规律移动的情况。因此给img元素设定width和height属性是必要的。
alt属性
img标签的alt属性表示的是在图片无法显示时,使用文字来代替显示,它可以用在以下几个场景中:
网路延迟太大
src属性指定路径出错
浏览器禁用图像
由于其有良好的信息提示效果,并且有助于网页SEO效果,强烈建议在img标签中使用alt属性。
而且很重要的一点是img标签的引入是需要呈现出与页面相关的内容,其他情况应该使用CSS样式实现。例如我们不推荐下面这种情况。
不推荐
而推荐使用下面这种情况
推荐使用
前端文件主要包括HTML页面文件,CSS样式文件和Javascript脚本文件。我们应该让三者各司其职,在HTML中不应该出现CSS和JS表达式;在JS文件中,不应该出现大量的HTML和CSS代码。在HTML文档中应当尽量少的引入CSS和JS文件。为了保证文件的纯净,我们应当遵循下面的原则。
一个HTML文件应该只引入一个CSS文件
合理运用JS合并技术(Gulp, Webpack插件),保证引入JS文件不多于两个
不使用行内脚本元素(<script>alert('Hello World')</script>)
不在标签上使用style内联样式
不要使用style属性
脚本加载在网页加载过程中是一个很耗性能的过程,如果把JS文件放在head标签里,它的加载会一直阻塞DOM的解析,造成页面延迟。
因此现在讲求的是脚本的异步加载过程,我们会使用到async关键字,考虑到浏览器的兼容性,我们推荐使用下面的方式加载脚本。
推荐方式
合理使用ID和锚点可以非常方便的实现当前页面间的跳转,现在越来越多的教程网页由于是单页面,经常会用到锚点跳转。
对锚点知识还不了解的,可以看看我写的这篇文章《神奇的html锚点,让你的网页在内部自由的跳转》。
今天这篇文章主要总结了前端开发过程中的HTML规范问题,相信大家也或多或少遇到过,希望这篇文章能加深大家的认识。
程序开发过程中,我们始终要谨记的一点就是:程序是写给人看的,不是写给机器看的。任何项目开发,都必须要考虑到人员迭代,我们不能让下一个接手你代码的人,在看到你写的代码时会说出这样的话,“这个代码是人写出来的吗?可读性太差了”。因此,我们必须遵循一定的规范,让代码的可读性更强。
今天,我们就一起来看下前端开发过程所能涉及到的跟HTML有关的规范问题。
HTML5
在HTML文件中,推荐使用支持HTML5特性的文档声明,<!DOCTYPE html>。
首先是在文件的命名上,应当采用驼峰式命名,首字母小写,后面每个单词首字母大写,而且对于具体的文件应当具有语义化,能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发,甚至是组件化开发,在文件命名时更应该以模块名或者组件名来命名。
例如在写一个AngularJS应用时,由于会涉及到Controller,Service,Filter等概念,我们会分别建立一个文件,假如这个模块的名字是库存管理stockManage,我们可以这样来命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我们所说的语义化指的是使用具有语义化的标签,在H5中添加了类似于header, nav, article, section, aside, footer等标签,从单词的意思上我们也很容易看出标签的含义。
我们不推荐使用只有div标签的页面,例如
不推荐使用
而是应该使用以下这种带有语义化的标签。
推荐使用
img标签是网页用来显示照片的标签,在页面所有标签中占据的比例非常之高,但是在使用img标签时也有下面需要注意的点。
给定width和height属性
因为浏览器在加载图片的过程中,需要先下载图片,然后再解析图片的高度和宽度,如果不给img元素设定高度和宽度,这样在图片加载过程中会不断的计算,重排页面的布局,在网络不好的时候就会经常出现元素出现不规律移动的情况。因此给img元素设定width和height属性是必要的。
alt属性
img标签的alt属性表示的是在图片无法显示时,使用文字来代替显示,它可以用在以下几个场景中:
网路延迟太大
src属性指定路径出错
浏览器禁用图像
由于其有良好的信息提示效果,并且有助于网页SEO效果,强烈建议在img标签中使用alt属性。
而且很重要的一点是img标签的引入是需要呈现出与页面相关的内容,其他情况应该使用CSS样式实现。例如我们不推荐下面这种情况。
不推荐
而推荐使用下面这种情况
推荐使用
前端文件主要包括HTML页面文件,CSS样式文件和Javascript脚本文件。我们应该让三者各司其职,在HTML中不应该出现CSS和JS表达式;在JS文件中,不应该出现大量的HTML和CSS代码。在HTML文档中应当尽量少的引入CSS和JS文件。为了保证文件的纯净,我们应当遵循下面的原则。
一个HTML文件应该只引入一个CSS文件
合理运用JS合并技术(Gulp, Webpack插件),保证引入JS文件不多于两个
不使用行内脚本元素(<script>alert('Hello World')</script>)
不在标签上使用style内联样式
不要使用style属性
脚本加载在网页加载过程中是一个很耗性能的过程,如果把JS文件放在head标签里,它的加载会一直阻塞DOM的解析,造成页面延迟。
因此现在讲求的是脚本的异步加载过程,我们会使用到async关键字,考虑到浏览器的兼容性,我们推荐使用下面的方式加载脚本。
推荐方式
合理使用ID和锚点可以非常方便的实现当前页面间的跳转,现在越来越多的教程网页由于是单页面,经常会用到锚点跳转。
对锚点知识还不了解的,可以看看我写的这篇文章《神奇的html锚点,让你的网页在内部自由的跳转》。
今天这篇文章主要总结了前端开发过程中的HTML规范问题,相信大家也或多或少遇到过,希望这篇文章能加深大家的认识。
*请认真填写需求信息,我们会在24小时内与您取得联系。