标签 基础知识 下的文章

Javascript语法规范

既然要实现静态HTML页面的某些动态效果,就要引入JavaScript。书写之前至少要了解怎样在HTML页面中引入JavaScript。这样才能知道在哪编程Javascript了!
Javascript 书写位置
JavaScript的引用共有4种,与css类似,直接嵌入到html页面中
1,页头引入(head标签内);
2,页中引入(body标签内);
2,页尾引入(html标签内以及标签外);
3,元素事件中引入(标签属性中引入);
4,引入外部JS文件;
例如:

<!DOCTYPE html>
<html>
        <!--
            脚本放置位置问题:
            理论上,可以将javascript代码放在网页的任何地方.
            如果在打开网页要立即执行脚本的话,需要放到调用它的代码之前
            对于不需要一载入页面就开始执行的javascriptdiamante,可以将器放在head中,这样一般是某个事件函数,当事件触发的时候就会执行.
            根据javascript dom编程艺术书中说法,放在body结束标签和html结束标签之间,是一个不错的做法,因为javascript往往是操作DOM树,
            这样可以确保在javascript开始执行的时候,DOM树加载完毕。
        -->
    <head>
        <meta charset="utf-8" />
        <title>javascript的引用方式</title>
<!--
<script type="text/javascript">……</script>格式是固定的,JavaScript代码必须在<script></script>标签内编写,并且必须设置type属性值为“text/javascript”。
-->
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
    </head>

    <body>
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
       <!--         
       文件调用:JavaScript代码写到另一个文件当中(其后缀通常为“.js”),然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中
       -->
        <script src="js1.js" type="text/javascript" charset="utf-8"></script>
    </body>
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
</html>

JavaScript的转义字符及注释

\":转双引
\':转单引
\n:转换行(不常用)
\r:转回车(不常用)
//:单行注释
/* */:多行注释

写一个简单的JavaScript程序。

程序永远的Hello, world


<script type="text/javascript">
    document.write("Hello, world");
</script>

简单的JavaScript程序


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的javascript程序</title>
    <script type="text/javascript">
        function entermes()
        {
            alert("你好!Xiaomo blog")
        }
        window.onload=entermes();
    </script>
</head>
<body>
    
</body>
</html>

JavaScript的概念

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.
解释:
1,动态语言

动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化。JavaScript便是一个动态语言。除此之外如Ruby、Python等也都属于动态语言,而C、C++等语言则不属于动态语言。比如在JavaScript中可以在对象定义之后动态的为其添加属性和方法
2,脚本语言

脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言,只在被调用时进行解释或编译,然后执行。它的命名起源于一个脚本“screenplay”,每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。

3,弱类型

弱/强类型指的是语言类型系统的类型检查的严格程度,弱类型的语言在声明变量的时候不必进行变量类型的确定,语言的运行时会隐式做数据类型转换,对于弱类型语言来说,不同类型的变量可以进行直接运算,而强类型的则不可以。

什么是JavaScript?

JavaScript 是在互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript,就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行。

为什么学习javascript?

因为在Web世界里,HTML页面是静态的(只供浏览),只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。把静态的页面转换成支持用户交互并响应相应事件的动态页面。
HTML、CSS和JavaScript的关系如下(W3c规范):
☞结构标准(网页的结构) html
☞表现标准(网页的外观) css
☞行为标准(页面的行为) js

关于JavaScript

JavaScript的组成:
ECMAScript:JavaScript的语法标准。
DOM:JavaScript操作网页上的元素的API
BOM:JavaScript操作浏览器的部分功能的API
JavaScript的组成

Javascript 使用范围:
客户端数据计算
客户端表单合法性验证
浏览器对象的调用
浏览器事件的触发
网页特殊显示效果制作
.....

JavaScript的特点:

1.解释性脚本语言,javascript不需要编译,只需要嵌入到html代码中,由浏览器逐行加载解释执行。
2.javascript是一种基于对象的语言,使用已经创建好的对象来,和面向对象的先锋需设计语言不同,javascript并不支持继承和重载。
3.语言简单,弱类型,语法和java,C语言类似,变量不需要声明和指定类型即可使用,是一种弱类型语言。
4.javascript语言相对来说比较安全,仅由浏览器执行,不允许javascript访问本地硬盘,以及操作服务器上的数据,只用来显示浏览器的网页效果和实时交互。
5.动态性,使用javascript可以在前端实现一些和服务器完全没有联系的效果,javascript采用事件驱动的方式进行,html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。
6.运行环境一般来说是浏览器,只需要浏览器支持即可,如果不支持(或者用户禁用了javascript),浏览器会忽略掉这些javascript代码。

CSS

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; … declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:
CSS 基本语法
提示:请使用花括号来包围声明。属性大于1个之后,属性之间用分号隔开,如果值大于1个单词,则需要加上引号(p{font-family:"sans serif";})

值的不同写法和单位

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; } 

为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; } 

我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

多重声明

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红 色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上 分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:

p {text-align:center; color:red;}

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p 
{ 
text-align: center; 
color: black; 
font-family: arial; 
} 

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body 
{ 
color: #000; 
background: #fff; 
margin: 0; 
padding: 0; 
font-family: Georgia, Palatino, serif; 
}

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。