JavaScript 基础语法

讲法声明 - 很重要,请先查看

关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进行实现,并在期间讲解相关知识点,在其中一些相关的“细节”知识点我们暂时先忽略掉,先完成主干的学习。在一个小阶段的主干知识学习完成之后,我们再回头详细分析“细节”。这样更有利于大家的吸收和理解,不容易陷入到一些不必要的问题当中。

本文内容概要:

1 回顾JavaScript的基本组成

2 JavaScript引入方式

3 JavaScript基本调试

4 JavaScript常见调试方法

5 变量(标识符)

6 JavaScript基本数据类型

7 课程小结

8 课后练习

1 回顾JavaScript的基本组成

JavaScript = ECMAScript + DOM + BOM;今天我们要讲解的就是ECMAScript中的部分基础语法。

之前学堂的小编-利利给大家分享了如何才能把JavaScript学好的文章,该文章内容涉及了JavaScript的基本知识以及JavaScript学习方法。如果想了解具体的JavaScript基础知识,可以回复“学JS”到“HTML5学堂”公众号。

2 JS引入方式

JS被称为行为代码,我们希望在HTML(结构代码)当中书写行为代码,必然不能够直接书写,需要采用几种不同的方式,将JS代码“引”到HTML文件中。

JavaScript有标签内联、内部书写、外部引入这三种引入方式,接下来我们具体来学习一下如何使用这三种引入方式。

2.1 标签内联

既然是标签内书写,肯定是在HTML标签上书写JavaScript了,具体来看下面的代码实例

代码实例:

<div class="btn" onclick="alert('利利、堡堡');">HTML5学堂创始人~</div>

代码分析:

鼠标点击div标签的时候,会出现弹窗并且里面显示的内容是“利利、堡堡”;

可以把标签里的onclick进行拆开理解,on是“在什么上”的意思,click是点击的意思,结合起来的意思是在标签上进行点击;onclick中引号的内容就是JavaScript代码;整个代码结合起来意思是在标签上进行点击的时候,会运行onclick中的JavaScript代码;(不单单只有onclick还有onmousedown等,这边只是帮助大家理解标签内联书写,以后会进行详细介绍)

缺点:这种引入方式的代码可阅读性差,冗余度高,不利于后期维护,因此实际项目开发中基本上用不到。

2.2 内部书写

内部书写的意思是JavaScript代码书写在网页中(不是标签里面哦),可以任意放置在页面的某个位置当中。通常来说,JavaScript代码要放置在页面头部或者HTML标签后面(</body>标签之前),具体需要根据页面功能需求而定。

代码实例:

<script type="text/javascript">
    // 这边书写JavaScript代码
</script>

代码分析:

在页面中书写JS代码时,需要用到script标签,JS代码书写在script标签之间;用type属性来识别script标签之间的内容,我们想在script标签里面书写JS,需设置type属性值为text/javascript。

优点:

速度快,没有服务器请求压力;相对于外部引入单页代码量少;

缺点:

不易改版与维护;代码较乱不易前后台沟通;

2.3 外部引入

外部引入就是把JavaScript代码放入到文件当中,通过script标签把文件引入到网页当中;

代码实例:

<script type="text/javascript" src="js/h5course.js" charset="utf-8"></script>

代码分析:

1 script标签的src属性填写的值是外部JS文件的URL路径;charset属性声明外部JS文件中使用的字符集编码,在项目开发中,charset属性可以省略掉,如果你想要更规范、严格一点,就不要省略了,特别是面试的时候哦!

2 外部引入的script标签之间不允许有其它内容。

3 JavaScript文件位置很重要,网页自上而下进行代码的执行,如果将JavaScript放置在head当中,又希望不发生错误,则需要使用到window.onload事件(后面的文章当中会讲解到事件相关的知识)或者将JavaScript文件放置在所有标签之后,能够保证加载完成html结构之后再执行JavaScript内容。

4 引入的JS文件当中,不要出现<script></script>。

优点:

一个JS文件可控制多个页面;易改版、便于维护;减少代码量、代码简洁规范易于分工协作;有效利用缓存机制;

缺点:

相对于单页有垃圾代码;外部引入中的href属性会给服务器造成请求的压力。

2.4 综合实例

请注意其中script的存在位置(包含两个外部引入一个内部书写)

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂 - H5course</title>
    <script src="../js/common.js"></script>
</head>
<body>
    <div class="wrap"></div>
    <script>
        console.log('HTML5学堂 demo');
    </script>
    <script src="../js/zepto.js"></script>
</body>
</html>

3 JavaScript基本调试

新手在书写JavaScript时,时常会出现一些JS中的问题,因此了解这些问题以及掌握如何调试,如何找到自己的JS错误所在,使我们首先要了解的。

3.1 调试工具

我们可以使用谷歌、火狐等各个主流浏览器的控制台。最推荐谷歌浏览器。按下F12键即可开启控制台(关闭的话就是再按下一次F12键),在控制台中有Console一项,该项当中即为JS的调试位置。

3.2 新手常见错误

Unexpected token ILLEGAL 表示:基本语法错误

err_File_not_found 表示:文件路径错误

4 常见调试方法

当页面出现了问题,如何定位错误呢?在此介绍三种方法:。

4.1 调试方法 - 注释法

单行注释:单行注释使用双// ,双斜杠与注释内容之间有空格(书写规范)

多行注释:/* 多行注释 */

注释使用范围:

针对文件/函数的功能以及用法进行描述的时候,使用多行(块)注释(Sublime快捷键:Ctrl+shift+/),其他情况下均使用单行注释(Sublime快捷键:Ctrl+/);需要说明一下注释调试,在利用注释调试代码的时候,如果需要注释大量的代码推荐使用块注释,否则推荐使用单行注释,最终还得视情况而定;

代码实例:

<script type="text/javascript">
    // 声明变量
    var html5 = 'HTML5学堂';


    /*
     * [sum 实现两数求和]
     * @param  {数字} a [第一个数]
     * @param  {数字} b [第二个数]
     * @return {数字}   [求和的返回值]
     * @demo sum(100, 200)
     * @date 2016.04.26
     * @author 刘国利、陈能堡
     */
    function sum(a, b) {
        return a + b;
    }
</script>

HTML5学堂小编-堡堡特别提醒:不管是平常练习,还是项目开发,注释不仅仅能体现出你的代码规范,而且还能提高代码的可读性哦~

4.2 调试方法 - 浏览器命令-弹窗

想了解JS代码中的运行结果,可以通过弹窗的方式把信息给显示出来。具体来看看下面的三种弹窗:

警告弹窗:alert()

对话弹框:prompt()

确认弹窗:confirm()

代码实例:

<script type="text/javascript">
    /*
     * [sum 实现两数求和]
     * @param  {数字} a [第一个数]
     * @param  {数字} b [第二个数]
     * @return {数字}   [求和的返回值]
     * @demo sum(100, 200)
     * @date 2016.04.26
     * @author 刘国利、陈能堡
     */
    function sum(a, b) {
        return a + b;
    }


    // 利用弹窗输出求和的结果
    alert(sum(10, 20)); 
    // 确认弹窗
    confirm("确认");
    // 对话弹窗
    prompt("梦幻雪冰", "陈能堡");
</script>

输出结果:

Tips:弹窗在不同的浏览器当中显示出来的样式都不相同哦;利用弹窗调试JS代码不是很推荐,主要在于一旦程序出现错误,有可能会产生“无尽”的弹窗。另外,当需要多次查看一个变量的数值时,大量的弹窗也会影响我们的调试速度。

4.3 调试方法 - 文档方法

文档命令:document.write("在文档中打印信息"); document.writeln("在文档中打印信息");

write与writeln的区别:write()与writeln()方法类似,只是writeln每个表达式之后多写一个换行符(\n)

4.4 调试命令 - 控制台命令

console.log('此处填写控制台命令'); 最为常用的调试命令,IE8+支持

console.time(name);与console.timeEnd(name); 用于测算两句代码之间的内容运行时间,两个方法中的“name”需要保持一致,采用字符串格式

代码实例:

<script type="text/javascript">
    // 文档输出命令——>查看页面内容
    document.write("HTML5高级讲师<br>");
    document.write("陈能堡");


    // 控制台输出命令——>按F12键,查看浏览器控制台
    console.log('HTML5主管');
    console.log('刘国利');
</script>

代码分析:

上面介绍的这两种调试,都能够方便的输出JS运行时的一些信息,但是,文档命令是直接在页面中输出信息,换句话说它会直接影响到页面的内容(如果页面有内容的话就会被替换掉了),所以这种调试方式我们也是不推荐大家使用;控制台命令是不是感觉非常方便了,调试起来比弹窗舒服多了,而且也不会影响到页面里面的内容,这种调试(控制台命令)是小编极力推荐的一种调试方法!

5 变量(标识符)

5.1 什么是变量,什么是常量?

50x+y=99这个数学表达式当中,哪些是变量,哪些是常量呢?50和99是常量(固定数值),x和y是变量。那么JavaScript如何声明一个变量呢?接着往下看吧~

5.2 如何声明变量

JavaScript中定义变量需要用到var操作符(JS声明变量的命令,告诉系统 ——> 要声明变量了);

var 变量名;

var 变量名 = 值;

代码实例:

<script type="text/javascript">
    // 声明变量
    var blog = 'HTML5学堂网';
</script>

Tips:JavaScript语言与其它语言不太一样,声明变量的时候不需要明确变量的数据类型,因为JavaScript的变量为弱变量,可以用来保存任何类型的数据。

5.3 如何理解变量与函数

通过var或function定义的变量或函数,均可以理解为一个对象的属性或方法(通常把变量理解为属性,把函数理解为方法)

调用的方法1:对象.属性; 对象.方法;

调用的方法2:对象['属性名'];

在全局环境中定义的所有变量和方法,均隶属于window

5.4 什么是标识符

在书写JavaScript的时候,需要声明一定的变量,那么如何给变量起名字呢,就涉及到了标识符内容。

标识符,指的是变量、函数、属性的名字,或者函数的参数。目前需知晓“变量属于标识符”。

名字不能乱起,是需要有一定的规则的:

5.5 标识符命名规范

标识符的命名规范

1 由数字、字母、美元符$、下划线组成,不能以数字开头;

例如h5course(合法),5course(不合法)

2 区分大小写;

例如:H5course与h5course是有区别的

3 不能含有空格;

例如:h5 course(不合法)

4 不能用关键字和保留字命名;

例如:break、width、for等

标识符的命名推荐

1 小驼峰命名法(小驼峰,多个英文单词组成一个标识符号名称时,除了首个单词之外,所有单词首字母大写);

2 对于属性 要求名词开头

3 对于方法 要求动词开头

4 常量全部大写,多个单词之间使用下划线分隔;例如:MAX_VALUE = 100;

5 构造函数,大驼峰(所有单词首字母大写)

另外,标识符要有一定的“语义性”,方便代码的书写与阅读

6 JavaScript基本数据类型

Undefined 值未定义(声明了变量,但没有给变量赋值)

Null 空对象

String 字符串(引号里面的就是字符串,JS中单引号和双引号的字符串都是一样,如:var str = "HTML5学堂";与var str = 'HTML5学堂';等价);

Number 数字(var age = 20;)

Boolean 布尔值(只有两个值,真/true和假/false)

Obect 对象(在JavaScript使用{ }表示对象)

7 课程小结

掌握调试的目的是为了能够自我检查错误,JS的引入方法让我们能够在HTML代码中书写JavaScript代码。var是JS中“万能”的声明符,我们需要有变量,才能够进行一系列操作,但是名字不能随便起。在JavaScript中数据有六种不同类型~另外,对象.方法,对象.属性这个部分的知识很重要哦~!

8 课后练习

1 书写出外部引入JS文件的代码

2 完成下面图中的效果(弹窗内容换行)

3 对于变量的合法命名是哪几项?

A、var abc0; B、var a b c; C、var ABC; D、var a_b_c_; E、var 0abc;

4 变量与数据类型

声明一个变量,值为一个字符串:“HTML5学堂”

声明一个变量,不赋值,那么它的值是什么?

5 以下哪个单词不属于JavaScript保留字

A、with B、parent C、class D、void

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

一步一步学Linq to sql(一):预备知识

  Linq to sql(或者叫DLINQ)是LINQ(.NET语言集成查询)的一部分,全称基于关系数据的 .NET 语言集成查询,用于以对象形式管理关系数据...

641
来自专栏三丰SanFeng

字节对齐

什么是对齐,以及为什么要对齐: 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变...

1775
来自专栏极客慕白的成长之路

LESS使用教程

引入 .less 样式文件的时候要注意设置 rel 属性值为 “stylesheet/less”:

732
来自专栏移动端开发

Swift Runtime ?

你肯定也想过       在OC中相信每一个iOS开发都知道Runtime, 现在Swift也更新到4.0版本了,要是你也学习过Swift的话你可能也会想过这样...

5467
来自专栏何俊林

Android开发基础规范(二)

前言:Android中一些开发规范,避免给自己和别人少留坑。 二、代码相关 2.2.15 Field Ordering 属性排序 在类文件顶部声明的任何属性都...

1817
来自专栏菜鸟前端工程师

JavaScript学习笔记010-DOM节点的运用

643
来自专栏web前端

CSS3---first-child或者nth-child(1) 不起作用的原因

一、零碎      1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nt...

2305
来自专栏技术博客

Dynamic 动态类型 和双问号??的使用

1.dynamic关键字用于声明一个动态对象,然后通过该动态对象去调用方法或读写属性。以前我们都是在运行时通过反射,Emit,CodeDom等技术来完成。创建一...

1102
来自专栏我是业余自学C/C++的

Search in Rotated Sorted Array II

Follow up forSearch in Rotated Sorted Array :What if duplicates are allowed?

693
来自专栏后台全栈之路

XML 语法速查笔记

相比起 Json,XML 是一种相对古老和复杂、但功能更加强大的数据存储/传输格式。也因为其复杂,有一些语法需要记录一下,在使用多种语言进行 XML 操作的时候...

2276

扫码关注云+社区