一文带你解读JavaScript的基本用法

言

相信做网站对JavaScript再熟悉不过了，它是一门脚本语言，不同于Python的是，它是一门浏览器脚本语言，而Python则是服务器脚本语言，我们不光要会Python，还要会JavaScript，因为它对做网页方面是有很大作用的。

JavaScript的基本用法

1.如何使用Js脚本

1).引入Js文件

在头部标签中导入脚本标签并指明脚本文件路径

<head><script src="XXX.js"></script></head>

2).标签中使用

<body><script >javascript 语句</script></body>
<head><script >javascript 语句</script></head>

2.数据类型

JavaScript的数据类型分为：

string
number
boolean
array
object
null
undefined

3.注释

1).单行注释

以“//”开头，后面接注释语句，只能注释一行

2).多行注释

/* 注释语句，可注释多行 */

4.特殊符号

\n 换行
\t 制表符 
\b 空格 
\r 回车 
\f 换页符
\\ 反斜杠 
\' 单引号
\" 双引号
\0 x 八进制代码x表示的字符(n是0到7中的一个八进制数字)
\x x 十六进制代码x表示的字符（n是0到F 中的一个十六进制数字）
\u x 十六进制代码x表示的Unicode字符(n是0到F 中的一个十六进制数字)

5.变量声明

1).Var声明

var ss='fsdf'  外部声明的变量可在全局使用
var ss        也可以不声明值，也不会产生错误，唯一的遗憾是会产生变量提升

2).Const 声明

const ss=123   不存在变量提升，可生成块级作用域 ，常用于声明常量，声明后必须赋值

3).Let 声明

let ss=123   不存在变量提升，可生成块级作用域，常用于声明变量，

6.控制结构语句

1).If ......Else

var aa=12
if(aa>3){console.log(1)}
else{alert(1)}

可以看出与我们的Python语句略有不同。

2).Do.....While

var i=1
do
 {
 i++;
 console.log(i);
 }
while(i<5)

3).While

var i=1
while(i<5){
    i++;
    console.log(i)
}

4).For

for(let i=1;i<6;i++){
    console.log(i)
}

5).For....In...

#打印了document对象的所有方法
    for(y in document)
        {
            console.log(y)
        }

6.Break、Continue

break    立即终止循环
continue 退出当前循环进入下一个循环

7).标签语句

指的是标签后面的语句可由判断结果自行决定什么时候结束

var i=0
label:while(i<10){
    i++;
    if(i==5){
        break label;
}
    else{
        console.log(i)
}
}

8).With语句

相当于Python中的上下文管理器

var aa='fasdffsa'
        with(aa){
            console.log(aa)
        }

9).Switch语句

var aa=[1,2,3]
    switch(aa){
        case 1:console.log(1);
        break;
        case 2:console.log(2);
        break;
        case 3:console.log(3);
        break;
        default:console.log('fas');
}

10).For....of

for(let val of iterable){
console.log(val)
}

11).For each ..... in

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
  sum += item;
}
print(sum); // 输出"26",也就是5+13+8的值




obj.forEach(function(val,item,array){
      array[item]=val
})

总结

这篇文章主要结束了JavaScript的导入、数据类型、注释、变量和控制语句。下一篇文章，我们继续介绍JavaScript，敬请期待！

端学习第三天 2016.12.02

每天我们浏览网页的时候，看到一个标题，点进去就能看到内容，你好奇它是怎么来到我们的面前吗？它就是html超文本链接。

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

· 一个未访问过的链接显示为蓝色字体并带有下划线

· 访问过的链接显示为紫色并带上下划线

· 点击链接时，链接显示为红色并带上下划线

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

HTML 连接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

基本的注意事项 - 有用的提示

Note: 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3cschool.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3cschool.cn/html/"。

Html头部

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

· 定义了浏览器工具栏的标题

· 当网页添加到收藏夹时，显示在收藏夹中的标题

· 显示在搜索引擎结果页面的标题

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

HTML <script> 元素

简单记于下表

只看这些，可能会有一些迷茫，这都是什么意思啊，该怎么用啊，下面我举一些例子，有助于大家能很好的理解。

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

以上是关于<head>的一个小例子。

<head>

</head>

<base>的一个例子。

<head>

</head>

<link>的用法

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

<style>的用法

看完这些是不是感觉好多了，只听这些空洞的东西确实是很难懂，我也是，不过看过例子后，自己再练习之后，那感觉慢慢的就上来了。

HTML 样式- CSS

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。结构就是盖房子先要把结构建出来，然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS，比如你用DW的属性面板来设置一个字的字体、颜色和大小，当你选好后，就会自动生成一个.style1的红色代码，在<style></style>之间不知道你注意过没有，这就是CSS。

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

· 内联样式- 在HTML元素中使用"style"属性

· 内部样式表 -在HTML文档头部 <head> 区域使用<style>元素来包含CSS

· 外部引用 - 使用外部 CSS文件

最好的方式是通过外部引用CSS文件.

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

例如：

<!DOCTYPE html>

<html>

<h2 style="background-color:red;">This is a heading</h2>

<p style="background-color:green;">This is a paragraph.</p>

</body>

</html>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

</head>

HTML 图像- 图像标签（<img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3cschool.cn 的 images 目录中，那么其 URL 为 http://www.w3cschool.cn/images/boat.gif。

T浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<tr>

</tr>

</table>

HTML 表格表头

表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

哇哦，今天干货有点多，我得好好消化一下，各位学友，欢迎留言讨论，还有路过的大神，看到不正确的地方一定要留言指出，指引我们如何能更好的学习前端，对于这个与时俱进的技术，每天的不学习就是一种退步。

lt;div>层元素
简介: 在页面层元素<div>用来将页面内容分割成各个独立的部分是块级元素。
用途：在每个<div>元素中，不仅可以包含文本内容，也可以包含图片、表单等其它内容，属性：在默认的情况下，<div>元素所包含的内容，将在新的一行显示
总结：块级元素，独占一行

id 标记属性
简介：给元素定义唯一标识
好处：方便在元素中使用行为
扩展：类似class属性的作用，用来调用级联样式表

class 调用样式属性
简介：class属性用来调用层叠样式表，也可以调用使用<link>元素链接外部样式表。
好处：方便使用和更改

实例：


  <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			.idepy{
				color: sandybrown;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
<p class="idepy">伊迪派</p>
	</body>
</html>

style 样式属性
简介：页面主体元素的样式属性，用来给页面内容定义级联样式表.
用途：包含style属性、class属性
理解：style是样式，想创建那个元素的样式，就写上那个元素的类型进行设置

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				color: red;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
伊迪派
	</body>
</html>

align 对齐属性
简介：对齐属性用来定义内容的水平对齐方式
用途:使用对齐属性，不仅可以控制文本内容的对齐，也可以控制文本中图片等内容的对齐

实例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
我会居中显示
	</body>
</html>

<p> 段落元素
简介：用来定义一个段落
用途：可以包含文本、图片，以及用来修饰文本的元素，被<p>元素包含的内容，默认的显示方式是换行显示
理解：块级元素，独占一行

实例:

<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>

<br> 换行元素
简介：换行元素<br>用来使被分割的文本换行显示

实例：

 换行元素<br>我在下一行

<pre> 保留格式元素
简介：保留格式元素<pre>用来使包含的内容，按照文档源代码的格式显示
用法：因为浏览器的默认显示方式中，将压缩多个空格为一个，同时忽略换行等空白符号

实例：

<pre>
	我是测试文本                                     前面空格被保留
	我不需要换行符
</pre>

<hr> 水平分割线元素
简介：水平分割线元素<hr>用一条一定高度的分割线，分割页面内容
高度属性：水平分割线的厚度属性size，用来定义水平分割线的粗细
宽度属性：水平分割线的宽度属性width，用来定义水平分割线的宽度
注意：style内定义高度宽度属性徐加px

实例：

<hr size="5" width="500">

<b> 加粗元素
简介：用来使包含的文本加粗显示
理解：是一个物理标签，它所包围的字符将被设为bold（粗体）

实例：

<b>加粗元素</b>

<i> 斜体显示元素
简介：用来使包含的文本内容以斜体的方式显示
理解：是一个物理标签，它所包围的字符将被设为Italic(斜体)

实例

<i>斜体显示元素</i>

<em> 斜体强调元素

<em>斜体强调元素</em>

<strong> 加粗强调元素
简介：是一个逻辑标签，它的作用是加强字符的语气一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。

实例：

<strong>加粗强调元素</strong>

<big> 放大元素
简介：放大元素<big> 用来使包含的文本增大一号显示
注意：当文本内容已经是最大字号时，将不能继续增大。

实例:

我是没有放大<big>我是被放大一号的<big>

<small> 缩小元素
简介：缩小元素<small> 用来使包含的文本缩小一号显示
注意：当文本内容已经是最小字号时，将不能继续变小。

实例：

我是没有缩小<small>我是被缩小一号的</small>

<sup> 上标元素
简介：用来使包含的文本内容以上标的方式显示
用途：元素中的文本的底部，将在普通文本的一半高度上显示

实例：

上标元素<sup>我是上标部分</sup>

<sub> 下标元素
简介：用来使包含的文本内容以下标的方式显示
用途：元素中的文本的顶部，将在普通文本的一半高度上显示

实例：

下标元素<sub>我是下标部分</sub>

在线咨询

上一篇：好的纪录片为孩子打开一扇看世界的窗 #推荐链接#
下一篇：前端编程基础：CSS的盒子模型（Margin、Border、Padding）？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一文带你解读​JavaScript的基本用法

言

JavaScript的基本用法

1.如何使用Js脚本

1).引入Js文件

2).标签中使用

2.数据类型

3.注释

1).单行注释

2).多行注释

4.特殊符号

5.变量声明

1).Var声明

2).Const 声明

3).Let 声明

6.控制结构语句

1).If ......Else

2).Do.....While

3).While

4).For

5).For....In...

6.Break、Continue

7).标签语句

8).With语句

9).Switch语句

10).For....of

11).For each ..... in

总结

您的项目需求

一文带你解读JavaScript的基本用法