JavaScript语法介绍

js是什么?

作为入门的第一部分,这个问题还是要说明一下的。js是目前最流行的web脚本语言,可以在浏览器中解释执行。在学习js之前,大家最好还是要有一些HTML和CSS方面的知识。如果没有也不用担心,我会在用到的时候做介绍。

我申明一下,以下内容为概念性内容,对使用不会有任何帮助,但出去装13、应聘、勾MM可能会有用处,请选择性阅读。

Java和Javascript的关系

这两个东西没有任何关系,大家不要被名字迷惑!想了解更多的朋友请到这里来《Java和Javascript的区别

JS能做什么?

就整个Web方面来说,JS虽不是万能的,但没有JS是万万不能的。如果按照CommonJS的设计,JS更是具有逆天的功能,从网页到客户端、到服务器都可以用js来实现,真的是无所不能。我们单说在web上面js的能力吧。

  • 可以操作HTML,提供了一种运行时改变HTML的工具
  • 可以附加并执行事件,符合面向事件编程的思想
  • 数据验证功能,在提交表单时对表单数据进行合法性验证
  • 对客户浏览器的操作,前进、后退、刷新、跳转、打开新窗口、打印等
  • 可以创建并使用Cookies

js简单用法

js是C系语言,其语法和C、C++、Java、C#非常相似,有上述语言基础的朋友会觉得完全没有难度。

如何在页面中使用js?

就是的用法很简单,你可以在HTML页面的<script>标签中写你的js代码,也可以建立单独的js文件,并在HTML页面中添加引用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        document.write("Hello world!");
    </script>
</head>
<body>

</body>
</html>

引用独立的JS文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>

</body>
</html>

需要注意的是,尽管HTML中的标签可以用<script />标记,但对于引用的js标签,貌似是不行的,所以一定要写完整的<script></script>标签。原因不详,有知道的朋友请不吝赐教!

 

变量的定义和作用域

js中的所有变量都是使用var关键字来定义的,与变量的类型无关。例如:

var a = 1;

var a = "1";

第一个a的类型就是Number,第二个则是String。Number和String都是JS内置的对象,我们会在后面的内容中讲到。

对于变量的作用域,如果我们是在函数外面定义的,那么它的作用域将是全局的,如果是在方法内定义的,则在方法体内有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var a = 1;
        document.write(a);
        function demo() {
            var a = 2;
            document.write(a);
        }
        demo();
        document.write(a);
    </script>
</head>
<body>

</body>
</html>

猜猜这个页面的输出内容……

Javascript 语句、代码和代码块

JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

document.write("Hello world");

通常要在每行语句的结尾加上一个分号。大多数人都认为这是一个好的编程习惯,而且在 web 上的 JavaScript 案例中也常常会看到这种情况。

分号是可选的(根据 JavaScript 标准),浏览器把行末作为语句的结尾。正因如此,常常会看到一些结尾没有分号的例子。通过使用分号,可以在一行中写多条语句。

Javascript 代码是语句的序列,通过将多行语句排列在一起,组成一段Javascript代码。

Javascript 代码块是用来更好的组织代码的。代码块使用花括号包裹,例如:

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

 

Javascript 注释

注释分为单行注释和多行注释。单行注释以//开头,无需结尾;多行注释以 /* 开头,以 */ 结尾。例如:

    <script type="text/javascript">
        //这是一个单行注释,下面的语句输出一个Helo单词
        document.write("Hello ");
        /*
        这是一个多行注释
        下面的代码将输出一个world单词
        */
        document.write("world! ");
    </script>

 

Javascript 运算符

运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符。

算术运算符用于执行变量与/或值之间的算术运算,JS中的算术运算符有:

赋值运算符用于给 JavaScript 变量赋值,JS中的赋值运算符有:

比较运算符在逻辑语句中使用,以测定变量或值是否相等,JS中的比较运算符有:

逻辑运算符用于测定变量或值之间的逻辑,JS中的逻辑运算符有:

Javascript 中的分支语句

Javascript的分支语句有两种,if...else...分支语句;switch...case...分支语句。

if...else...分支:if后面的括号里面需要一个bool值或者一个逻辑表达式,如果后面只有一行要执行的语句,花括号可以省略不写。如果有多个条件判断,可以在else后面加上if判断即可。

        var a = 1, b = 2;
        if (a == b) {
            alert("a和b不相等");
        }
        else {
            alert("a和b相等");
        }

 

switch...case...分支:switch 后面的 (n) 可以是表达式,也可以(并通常)是变量。然后表达式中的值会与 case 中的数字作比较,如果与某个 case 相匹配,那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

        var a = "Hello";
        switch (a) {
            case "Hello":
                {
                    alert("Hello");
                }
                break;
            case "World":
                {
                    alert("World");
                }
                break;
            default:
                break;
        }

 

Javascript 中的循环语句

Javascript中的循环语句有:for循环,while循环。

for循环示例:

for(var a = 0; a<10; a++){
    document.write("当前变量的值为:" + a);
}

 

while循环示例:

var a = 0;
while (a < 10) {
    document.write("当前变量的值为:" + a);
    a++;
}

 

在执行循环的过程中,我们可能要结束循环,或者结束本次循环,继续下次循环。如果要结束并跳出循环过程,需要使用break,结束本次循环,但仍进行下次循环,需要使用continue。

        for (var a = 0; a < 10; a++) {
            if (a > 5)
                break;
            if (a % 2 == 0)
                continue;
            document.write("当前变量的值为:" + a);
        }

 

break和continue的区别是:break将结束并跳出循环,不再执行任何循环中的代码。continue将结束本次的循环,但扔进行下次判断,看是否需要继续执行。

 

关于更多JS语法知识,你可以到w3school网站英文网站)中进行学习。这个网站是学习、查阅的好去处。推荐大家收藏起来。

 

 

 

 

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞

来源:http://youring2.cnblogs.com/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2012/08/05/2621863.html

时间: 2024-08-02 13:56:39

JavaScript语法介绍的相关文章

JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】[原创]_javascript技巧

本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

php 5.3 闭包语法介绍 function() use() {}

 代码如下 复制代码 <?php /** * 下面提到的代码在PHP5.3以上版本运行通过. */ function callback($callback) { $callback(); } //输出: This is a anonymous function.<br />/n //这里是直接定义一个匿名函数进行传递, 在以往的版本中, 这是不可用的. //现在, 这种语法非常舒服, 和javascript语法基本一致, 之所以说基本呢, 需要继续向下看 //结论: 一个舒服的语法必然会

JavaScript语法着色引擎(demo及打包文件下载)_prototype

应 得意小蛇 的建议,我整理了一下去年写的JavaScript语法着色引擎,并提供下载,喜欢的尽管拿去,嘿嘿 总的来说是很简单的东西,只是提供了关键字的着色以及一些基本的语法(例如注释,字符串,正则等等),从demo中应该很容易看到其用法,这里简单介绍下: 类名:Lighter 通过new Lighter()可以得到一个着色引擎实例,假设为lighter,有以下属性和方法: 语言属性:lighter.language 这个属性的范围是可以根据语法文件的数量自己添加的,提供的demo中有'cpp'

12种不宜使用的Javascript语法

这几天,我在读<Javascript语言精粹>. 这本书很薄,100多页,正好假日里翻翻. 该书的作者是Douglas Crockford,他是目前世界上最精通Javascript的人之一,也是Json格式的创造者. 他认为Javascript有很多糟粕.因为1995年Brendan Eich设计这种语言的时候,只用了三个月,很多语言特性没有经过深思熟虑,就推向了市场.结果等到人们意识到这些问题的时候,已经有100万程序员在使用它了,不可能再大幅修改语言本身了.所以,Douglas Crock

XSL语法介绍

语法   例子已经放在上面,下面我们可以来仔细的分析其中的语法结果和关键所在:       首先注意到的是,XSL文件本身即是一份 XML文件,所以在XSL文件的开头,一样有和XML文件相同的声明.W3C这个XML的标准机构为XSL定义了很多标记(元素),XSL文件就是这些标记和HTML标记的组合.在XSL文件中,必须有如下一行的代码:       <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">      

基于Predictive Parsing的ABNF语法介绍

最近一直在做Session Initiation Protocol (SIP)协议方面的开发,SIP在电信VoIP领域应用非常广泛,是一个基于 文本语法的协议.SIP的语法规范是使用ABNF来定义的.对SIP语法有兴趣的同学请移步其Augmented BNF for the SIP Protocol章节.Augmented BNF for Syntax Specifications: ABNF本身也是一种语法规范,ABNF形式上可以由其自身来定 义,有兴趣的童鞋请参考其第4章"ABNF Defi

JavaScript语法树与代码转化实践

JavaScript 语法树与代码转化实践 归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章中.本文引用的参考资料声明于 JavaScript 学习与实践资料索引中,特别需要声明是部分代码片引用自 Babel Handbook 开源手册;也欢迎关注前端每周清单系列获得一手资讯. JavaScript 语法树与代码转化 浏览器的兼容性问题一直是前端项目开发中的难点之一,往往客户端浏览器的升级无法与语法特性的迭代保持一致;因此我们需要使用大量的垫片(Polyfill),以保证

JavaScript语法细节——引用与复制

原文:JavaScript语法细节--引用与复制 我们都知道,JS中变量的赋值有两种方式,最近在折腾自己写的标签栏插件,碰到了很多平时没注意的问题.正好,那边处理清楚了,稍微整理一下关于引用与复制相关知识,可能会不定期增加新碰到的问题,有错误希望看到的人指出,避免传播不正确的知识. 先大致分一下类,引用类型:Object以及其旗下的Array,Date,RegExp,Function:基本包装类型:Boolean,number,String. 在赋值与传递参数的时候,引用类型传递的是指针,基本包

《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法_javascript技巧

注释         单行注释://         多行注释:/* */         "<!--"可以用作单行注释,由于和HTML的"<!--  -->"多行注释类似,容易混淆,所以不建议这种注释方法 变量        在JavaScript 语言里,变量和其他语法元素的名字都是区分字母大小写的.名字mood的变量与名字是Mood.MOOD或mOOd的变量没有任何关系,它们不是同一个变量.        JavaScript 语法不允许变量