澳门新葡萄京官网首页 1

澳门新葡萄京官网首页JavaScript入门之语言基础(1)

公共变量类:

JavaScript
语言正越来越受欢迎,可以说是是互联网上最突出的语言之一。你可以跨平台和浏览器使用它,其并不排斥后端语言。现在有许多不同的开发库——有些非常棒——
这些库对开发很有帮助,比如说加快了开发的时间等等。问题是,有时候这些库与原始语言之间很是有一些距离,这使得刚入门的开发者缺乏一种对语言的基础了解。

1.JS基本概念

网站名称:

本文通过全面列举基础的JavaScript概念这一方式来阐述该语言的基本原理,以此来为初学者提供一个对语言的基本了解,随处可见的代码例子则是用来说明所有的这些概念是如何在语言中体现出来的。

标识符

  • 所谓标识符是指变量、函数、属性的名字,或者函数的参数。
  • 标识符的书写有几个特征:
    1.区分大小写。
    2.第一个字符必须是字母、下划线(_)、或者是$。
    3.后面的可以是字母、数字、下划线、$。
    4.标识符可以使用中文,但是一般不推荐这么做。
?=$public_r[sitename]?

了解JavaScript语言

命名规约

  • 使用是实际意义的单词。
  • 变量使用驼峰规则,第一个单词首字母小写,后面单词首字母大写。
  • 变量使用名词,方法函数使用动词开头,常量全部用大写字母,函数创建对象首字母大写。

var firstName;
var isSmall;
var hasClass;
var PI;
var MAX_COUNT;
function getName(){}
function Person(){}

网站域名:

JavaScript语言是一种免费的客户端脚本语言,其能够让你往超文本标记语言(Hypertext
Markup
Language,HTML)页面中加入交互行为。客户端(client-side)意味着JavaScript运行在浏览器中,而不是用在服务器端。在网页被服务器送达并被浏览器加载后,客户端脚本就允许用户与网页进行交互。例如,Google
Maps就是使用JavaScript语言来支持用户与地图之间的交互的,交互的方式有移动地图、放大和缩小等。没有JavaScript语言的话,网页需要为每次和每个用户的交互行为进行刷新,当然,除非页面用到了诸如Adobe
Flash或是Microsoft® Silverlight一类的插件。JavaScript语言不需要插件。

变量

在JavaScript中变量是用来保存值的占位符,定义变量的时候要使用var运算符,
后面跟一个作为名称的标识符即可。

var message;
?=$public_r[news.url]? [!---news.url--]

因为JavaScript语言为加载后的网页提供用户交互行为,因此开发者通常会用它来实现下面的一些功能:

弱类型

  • 在一些编译语言(C、Java、C#)等变量的类型是固定的,在声明变量的时候就要标识其类型,在程序执行前编译阶段变量的类型就确定了,而且不能改变,我们称之为强类型。

int a = 2;
string b = "hello";
  • 一些常见的解释型语言(PHP、JavaScript)等变量的类型是松散的,一个变量可以用来保存任何类型的数据,变量的类型不是由声明时决定(声明的时候只是用了var运算符),而是在程序执行阶段由其值的类型决定,随着程序运行其值类型改变,变量类型也会发生改变。

var message = 1; //message 类型就是数字
message = "hello world!"; //message 类型变为字符串

[!——class.menu–]:一级栏目导航[!——pagetitle–]:页面名称[!——pagekey–]:页面关键字[!——pagedes–]:页面描述

  1. 动态添加、编辑和删除HTML元素及它们的值。

  2. 在提交之前校验表单。

  3. 在用户的计算机上创建cookies以用于在将来的访问中保存和检索数据。

语句

  • 语句(statement)是为了完成某种任务而进行的操作,比如下面就是一行赋值语句。

var a = 1 + 2;
  • 这条语句先用var运算符,声明了变量a,然后将 1+2
    的运算结果赋值给变量a。
    JavaScript中语句以;结束,一行可以包含多条语句,如果省略分号不会产生语法错误,解释器会自动判断语句结束。

var sum = 1 + 2
var diff = 3 - 4;

[澳门新葡萄京官网首页,!——temp.header–] //页面头部模板变量

在开始之前,只要知道语言的几个基本原则就行了:

变量提升

  • JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升。
    我们写了一个赋值语句。

var a = 2;
  • 实际上执行过程是解释器在未执行的时候先解析出变量声明,然后给他初始值undefined,然后才逐句执行程序。

var a;
a = 2;

[!——newsnav–] //当前位置

1.
要在HTML文件中把JavaScript代码包含进来的话,你必须要把代码放在脚本标签(script)的内部,并加入text/javascript这一类型(type)属性(清单1)。

注释

  • 并不是所有的语句都会执行,我们可以通过注释功能让js引擎忽略部分语句,这个功能经常用来解释我们的部分语句,和读书做标注一样。
  • Javascript提供两种注释:一种是单行注释,用//起头;另一种是多行注释,放在/*
    和 */之间。

//为变量赋值
var a = 1; //赋值成功

/*
    下面定义个函数
    至于什么是函数
    且听下回分解
*/

    function getName(id){
        return 'Byron';
    }

[!——title–] //文章标题

  1. 所有的JavaScript语句以分号结束。

  2. 语言是大小写敏感的。

  3. 所有的变量名都必须以字母或是下划线作为开始。

关键字和保留字

  • 关键字是JavaScript引擎会用到的一些字,我们标识符不能再使用,比如定义变量的关键字var,关键字有:
    break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof
  • 除了这些不能用作标识符的关键字,js还规定了一些不能用作标识符的保留字,这些字符没有什么意义,但是未来会用到:
    abstract、enum、int、short、boolean、export、interface、static、bye、extends、long、super、char、final、native、synchronized、
    class、float、package、throws、const、goto、private、transient、
    debugger、implements、protected、volatile、doubler、import、public
    实际上一些保留字在新的ECMAscript已经得到使用

[!——newstime–] //文章发布时间[!——befrom–]
//文章来源[!——writer–] //文章作者

5.
你可以使用注释来说明脚本中的某些行,注释的编写方式是,以一个双斜线(//)为开始,后面跟着注释。

2.认识Javascript

文章浏览次数 script
src=[!——news.url–]e/public/ViewClick/?classid=[!——classid–]id=[!——id–]addclick=1/script

6.
你还可以使用注释来把脚本注释掉。要注释脚本的多行的话,一种好的做法是使用/*
你的脚本在这里 */。任何位于星号之内的脚本在执行过程中都不会运行。

网页的组成:

网页 = Html+CSS+JavaScript

  • Html: 网页元素内容
  • CSS: 控制网页样式
  • JavaScript:操作网页内容,实现功能或者效果

[!——newstext–] //文章内容

清单1.需要使用script标签和type属性来把JavaScript代码包含到HTML文件中来

javascript

  • javascript和java没有任何关系。
  • 是客户端脚本语言。
  • ECMAScript, DOM, BOM, NodeJS。

    澳门新葡萄京官网首页 1

[!——info.pre–] //上一篇[!——info.next–] //下一篇

<script  type="text/javascript"></script> 

引入方式

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>标题</title>
    <link href="index.css" rel="stylesheet">
    <style>
        body{
            background: red;
        }
    </style>
    </head>
    <body>
        <p>
        </p>
        <script src="index.js"></script>
        <script>
            alert(1);
        </script>
    </body>
    </html>

全站用灵动标签调用网站关键字及简介:

要隐藏浏览器不支持的JavaScript的代码,或是用户想把代码关掉的话,只要在JavaScrip语句的前后使用注释标签就可以了(清单2)。

浏览器渲染机制
  • 解析 HTML 标签, 构建 DOM 树。
  • 解析 CSS 标签, 构建 CSSOM 树。
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)。
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构。
  • 把每个节点绘制到屏幕上 (painting)。
  • 参考:How browsers
    work
[e:loop={"select sitekey,siteintro from {$dbtbpre}enewspublic limit 1",0,24,0}]关键字:?=$bqr[sitekey]?br简介:?=$bqr[siteintro]?[/e:loop]

清单2. 使用注释来隐藏浏览器不支持的JavaScript代码

白屏问题

  • 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
  • 如果使用 @import 标签,即使 CSS 放入 link,
    并且放在头部,也可能出现白屏。
  • 因此我们使用 link 标签将样式表放在顶部。

陆续整理中ING…

<script type="text/javascript">   <!--  Example statement here  //-->  </script> 

FOUC (Flash of Unstyled Content) 无样式内容闪烁

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现
FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox
会一直表现出 FOUC。

帝国CMS标签之频道栏目类:

最常用的把JavaScript代码包含到网页中的方式是,使用脚本(script)标签中的src属性来把代码从一个外部的JavaScript文件中加载进来(清单3)。

Javascript的放置位置

  • JS放在底部
    1.脚本会阻塞后面内容的呈现。
    2.脚本会阻塞其后组件的下载。
  • 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件).
    但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把
    JavaScript 放入页面顶部也会导致白屏现象。

清单3. 在HTML文件中包含外部的JavaScript文件

加载异步

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

没有 defer 或
async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script
标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

    <script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js
的加载与执行并行进行(异步)。

    <script defer src="script.js"></script>

有 defer,加载后续文档元素的过程将和 script.js
的加载并行进行(异步),但 script.js
的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script> 

外部JavaScript文件是最常见的包含JavaScript代码的方式,这是有一些很实在的原因的:

1.
如果你的HTML页面中有着更少的代码的话,搜索引擎就能够以更快的速度来抓取和索引你的网站。

2.
保持JavaScript代码和HTML的分离,这样代码显得更清晰,且最终更易于管理。

3.
因为可以在HTML代码中包含进多个JavaScript文件,因此你可以把JavaScript文件分开放在web服务器上不同的文件目录结构中,这类似于图像的存放方式,这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变得容易起来的关键。

变量

变量存储数据,这些数据稍后要被检索的或是要使用新的数据来更新。存储在变量中的数据可以是一个值或表达式,JavaScript语言有三种类型的表达式,表1对此做了描述。

表1. JavaScript表达式

表达式描述

算术 计算的结果为一个数值

字符串计算的结果为一个字符串

逻辑 计算的结果为一个布尔值(true或者false)

变量有两种类型:局部的和全局的。局部变量使用var这一关键字来声明,声明全局变量则不需要使用var关键字。使用了var关键字的变量被看成是
局部的,因为除了你声明它的地方所处的范围之外,它不能在其他任何地方被访问。例如,如果你在一个函数(在将近文章的结尾部分我会谈论到)的内部声明了一个局部变量的话,该变量就不能在该函数之外被访问,这就使得它是这一函数局部的。如果你没有使用var关键字声明这同一变量的话,它在整个脚本中就都是可被访问到的,而不仅限定于只能在那个函数中被访问。

清单4给出了一个局部变量的例子,其被命名为num,并被赋值为10。

清单4. 声明一个局部变量

var num = 10; 

要在脚本中的另一个位置访问num变量的值的话,你只需要通过名称来引用该变量就可以了,如清单5所示。

清单5. 访问变量的值

document.write("The value of num is: "+ num); 

这一语句的结果是“The value of num is:
10”。这一document.write函数把数据写到网页中,在本文余下的部分中你都是使用这一函数来把例子写到网页中。

要把算术表达式存储到变量中的话,你只要把变量指配给计算的值就可以了,如清单6所示。计算的结果而非算式本身被存储在变量中。因此,我们又一次得到这一结果“The
value of num is: 10”。

清单6. 存储算术表达式

var num = (5 + 5);  document.write("The value of num is: "+ num); 

要改变变量的值的话,通过你为变量所分配的名称来引用变量,并使用等号来为其赋一个新的值(清单7)。这次的不同之处在于你不需要使用var关键字,因为变量已经声明过了。

清单7. 改变现有变量的值

var num = 10;  document.write("The value of num is: "+ num);   // 把num的值更新成15  num = 15;  document.write("The new value of num is: "+ num); 

这一脚本的结果先是一句“The value of num is: 10”,后面跟着“The new value
of num is:
15”。除了讲解变量之外,这一节内容还引入了下一个主题,也就是运算符。你用来把值赋给变量的等号(=)就是一个赋值运算符,以及你用在5+5中的加号(+)是一个算术运算符。下一节内容谈论JavaScript语言中的所有变量运算符及其用法。

运算符

在执行JavaScript语言中的任何运算时,你都需要运算符。运算包括了加法、减法、比较等。JavaScript语言中有四种运算符。

  1. 算术

  2. 赋值

  3. 比较

  4. 逻辑

算术运算符

算术运算符执行基本的数学运算,比如说加减乘除等。表2列出并描述了JavaScript语言中的所有可用的算术运算。

表2. 算术运算符

运算符描述

+ 加法

– 减法

* 乘法

/ 除法

% 取模(找出余数)

++  递增

–递减

语言正越来越受欢迎,可以说是是互联网上最突出的语言之一。你可以跨平台和浏览器使用它,其并不排斥后端语言。现在有许多…

发表评论

电子邮件地址不会被公开。 必填项已用*标注