JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中：

<head>

  <script>

    alert('Hello, world');

  </script>

</head>

第二种方法是把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<head>

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

</head>

把JavaScript代码放入一个单独的.js文件中更利于维护代码，并且多个页面可以各自引用同一份.js文件。

有些时候你会看到<script>标签还设置了一个type属性：

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

但这是没有必要的，因为默认的type就是JavaScript，所以不必显式地把type指定为JavaScript。

可以在同一个页面中引入多个.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照顺序依次执行。

大部分的时候，我们查看一些知名网站时，查看源码会发现他们的js都是放在网页最底部，那么把代码放在最底部和放在头部有什么区别呢？

http://www.mfbuluo.com/19131.html

https://www.zhihu.com/question/34147508

变量

变量名取名规则

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
var x=2;

var y=3;

var z=x+y;

另外JavaScript的变量是无类型的，不能为变量指定类型，可以指定任意数据给声明好的变量。

默认值

var x;

此时x的值为undefined，表示未定义其值。

数据类型

不同的数据，需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型：

null和undefined

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

布尔值

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

true; // 这是一个true值

false; // 这是一个false值

2 > 1; // 这是一个true值

2 >= 3; // 这是一个false值

Number

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123

0.456; // 浮点数0.456

1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5

-99; // 负数

NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示

Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

需要注意的是，JS是无类型的，所以声明一个Number类型时请填写其默认值，否则将会是undefined，同时Number类型是64位的双精度浮点数，最大可以表示53位整数，大约是Math.pow(2,53)-1=9007199254740991。

另外我们需要看看 NaN 这个特殊的数值，该值表示不是一个数字“Not a Number”，NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内。因此，不能与 Number.NaN 比较来检测一个值是不是数字，而只能调用 isNaN() 来比较。

字符串

字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。

字符串提供了很多的操作方法进行操作：

var s = 'Hello, world!';

s.length; //

s[0]; // 'H'

s[6]; // ' '

s[7]; // 'w'

s[12]; // '!'

s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

var s = 'Test';

s[0] = 'X';

alert(s); // s仍然为'Test'

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

toUpperCase()把一个字符串全部变为大写：

var s = 'Hello';

s.toUpperCase(); // 返回'HELLO'

toLowerCase()把一个字符串全部变为小写：

var s = 'Hello';

var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower

lower; // 'hello'

indexOf()会搜索指定字符串出现的位置：

var s = 'hello, world';

s.indexOf('world'); // 返回7

s.indexOf('World'); // 没有找到指定的子串，返回-1

substring()返回指定索引区间的子串：

var s = 'hello, world'

s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'

s.substring(7); // 从索引7开始到结束，返回'world'

比较运算符

当我们对Number做比较时，可以通过比较运算符得到一个布尔值：

2 > 5; // false

5 >= 2; // true

7 == 7; // true

实际上，JavaScript允许对任意数据类型做比较：

false == 0; // true

false === 0; // false

==和===的区别

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

数组

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。

[1, 2, 3.14, 'Hello', null, true];

JS中的数组不同于静态语言中的数组，不需要确定数组长度，切数组长度在运行中可以改变。

数组的元素可以通过索引来访问。请注意，索引的起始值为0：

var arr = [1, 2, 3.14, 'Hello', null, true];

arr[0]; // 返回索引为0的元素，即1

arr[5]; // 返回索引为5的元素，即true

arr[6]; // 索引超出了范围，返回undefined

当直接更改到数组长度时，长度变大时，空白项目会被undefined填充，长度变小时，不在范围内的项目会被删除，效率最高的清除数组所有元素的代码如下：

var arr = [1, 2, 3]；

arr.length = 0;

对象

JavaScript的对象是一组由键-值组成的无序集合。

var person = {

    name: 'Bob',

    age: 20,

    tags: ['js', 'web', 'mobile'],

    city: 'Beijing',

    hasCar: true,

    zipcode: null

};

JavaScript对象的键都是字符串类型，值可以是任意数据类型。

要获取一个对象的属性，我们用对象变量.属性名的方式：

person.name; // 'Bob'

person.zipcode; // null

如果键值包含变量名不允许的值时，请使用""号包含，获取时也使用数组索引方式获取：

var person = {"middle-school": "No.1 Middle School"};

person["middle-school"];

访问不存在的属性时返回undefined。

删除属性时使用delete关键字：

delete person.age;

delete person["middle-school"];

判断是否存在某项属性

在JS中，有两种方式判断一个对象是否包含指定的属性，下面我们来看看他的区别：

  • in：判断一个属性存在，这个属性不一定是当前对象的，它可能是当前对象继承得到的；
  • hasOwnProperty：判断一个属性是否是自身拥有的，而不是继承得到的；

请看下面的例子：

var xiaoming = {

    name: '小明'

};

'name' in xiaoming; // true

'toString' in xiaoming; // true

xiaoming.hasOwnProperty('name'); // true

xiaoming.hasOwnProperty('toString'); // false

name本身是xiaoming这个对象的属性，而toString则是从Object对象上继承得到的一个方法，在JS中，方法也是作为属性存在对象上的。

严格模式

JavaScript在设计之初，为了方便初学者学习，并不强制要求用var申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：

i = 10; // i现在是全局变量

在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。

使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。

为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

启用strict模式的方法是在JavaScript代码的第一行写上：

'use strict';

for in循环

该循环可以把一个对象的所有属性依次循环出来，需要注意的是，该循环得到的是键而不是值：

var o = {

    name: 'Jack',

    age: 20,

    city: 'Beijing'

};

for (var key in o) {

    alert(key); // 'name', 'age', 'city'

}

由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引：

var a = ['A', 'B', 'C'];

for (var i in a) {

    alert(i); // '0', '1', '2'

    alert(a[i]); // 'A', 'B', 'C'

}

请注意，for ... in对Array的循环得到的是String而不是Number。

HTML5学习笔记（十一）：JavaScript基础的更多相关文章

  1. Html5 学习笔记 --》html基础 css 基础

    HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...

  2. HTML5学习笔记二 HTML基础

    一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...

  3. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. Java学习笔记：语言基础

    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...

  9. RX学习笔记：JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  10. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

随机推荐

  1. Generating phar.phar chmod: cannot access `ext/phar/phar.phar': No such file or directory make: [ext/phar/phar.phar] Error 1 (ignored)

    make install出现了cp: cannot stat `ext/phar/phar.phar': No such file or directory 于是我又: cd ext/phar/ls ...

  2. Windows server 2012-remoteapp RDWEB修改默认端口

    RDWEBl默认是通过3389端口调用remoteapp发布的应用程序.如果要修改该端口,可按下面的方式来修改: 1.修改mstsc远程连接的端口 http://www.cnblogs.com/rus ...

  3. UAC 实现原理及绕过方法

    目录 0x00 UAC 工作流程 0x01 UAC 实现方法(用户登陆过程) 0x02 UAC 架构 0x03 触发UAC 0x04 UAC 虚拟化 0x05 UAC 逆向分析 1x00 UAC By ...

  4. nginx搭建httpsserver

    HTTPS简单介绍 HTTPS(Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单来讲就是HTTP的安全版. ...

  5. 【php页面表单提交】form校验后再提交，非ajax提交

    form表单校验后,在执行提交动作: <form method="post" action="{:U('Custom/addmsg')}" id=&quo ...

  6. WinForm中 事件 委托 多线程的应用【以一个下载进度条为例】

    第一步:首先我们创建一个winfor的项目 第二步:我们建一个窗体 在一个窗体里面 打开一个另外的窗体 另外的窗体有一个按钮 点击后就开始下载 下载完成后 在注册窗体上面 显示下载完成(达到在一个窗体 ...

  7. KVM虚拟机的创建、管理与迁移

    [日期:2012-06-01] KVM虚拟机管理 一.环境 role         hostname    ip                  OS kvm_server   target   ...

  8. SQLserver视图修改sql

    语法: alter view dbo.视图名 as 更新后的视图SQL go 举个栗子: 原视图名为YOUR_VIEW其中SQL为:  select * form TableA 更新视图: alter ...

  9. Weex开发之路（1）：开发环境搭建

    一.Weex介绍 Weex是阿里巴巴在2016年6月份对外开源的一款移动端跨平台的移动开发工具,Weex的出现让我们的应用既有了Native的性能和H5的动态性,只要通过前端JS语法就能写出同时兼容i ...

  10. mysql配置文件 /etc/my.cnf 详细解释

    basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出存放着字符集的目录. datadir = path 从给定目录读取数据库文件 ...