再读斋

JavaScript①基础知识

发表于 | 分类于 |

JavaScript会带你进入新境界。你已经了解了HTML标记（结构），而且知道了CSS样式（表示），剩下的就是JavaScript（行为）。如果你只知道结构和表示，当然创建一个漂亮的页面时没有问题的，不过它们只是页面而已。用JavaScript增加行为时，你就能创建一种交互式体验。

JavaScript能做什么

一旦有一个包含< script >元素的页面（或者包含引用，指向一个单独的JavaScript文件），你就已经开始编写代码了。JavaScript是一种完备的编程语言，用其他语言能做的事情用JavaScript同样能够做到，甚至还能做得更多，因为我们就在Web页面内部编程。

你可以要求JavaScript：

1.建立一个语句

创建一个变量并赋值、让变量相加、完成计算，还可以使用一个JavaScript库的内置功能。

1
2
3
4
5
6
7
8
var temp  = 98.6;
var beanCounter = 4;
var reallyCool = true;
var motto = "I rule";
temp = (temp - 32) * 5 / 9;
motto = motto + " and so do you!";
var pos = Math.random();

2.重复做事情

循环完成语句，次数可以根据你的需要来定

1
2
3
4
5
while (beanCounter > 0) {
    processBeans();
    beanCounter = beanCounter - 1;
}

3.做出判断

编写根据应用的状态并按条件执行的代码

1
2
3
4
5
6
7
8
9
if (isReallyCool) {
    invite = "You are invited!"
} else {
    invite = "Sorry, we are at capacity.";
}

JavaScript变量

利用JavaScript，变量可以用来保存各种不同的东西。下面来声明一些变量:

1
2
3
4
var winners = 2; //整数值
var money = 212.2; //浮点数
var name = "liuguoquan"; //字符串
var isExist = false;  //布尔值

说明

  • JavaScript不需要为变量指定一个类型，它只是创建一个通用容器，其中可以存放多种东西，所有任何变量都可以存放数字、字符串或者布尔值。因为JavaScript采用的动态类型，也就是说，JavaScript解析器会在代码运行时确定要使用说明类型。
  • var scoops = null；表示“没有值”；
  • var winner；如果不赋值给变量，那么执行这个语句之后，变量winner会赋值为undefined。

全局变量

有两种方式可以产生全局变量；

  • 在函数体外定义的变量；
  • 在函数体内部定义的无var的变量；

全局变量的用法：在任何位置都可以调用

  • 直接调用变量名；（不含有同名局部变量和参数时）；
  • 通过window.varName 来调用；
1
2
3
4
5
6
7
var i = 10;
function print() {
    console.log(i);
}
print();

局部变量

局部变量有两种类型；

  • 在函数内部使用var声明的变量；
  • 函数的参数变量

局部变量的调用方法：

  • 当前函数体内部；
1
2
3
4
5
6
function printLocal() {
    var i = 11;
    console.log(i);
}
printLocal();

JavaScript变量命名

  • 规则1：变量要以一个字母、下划线或者美元符开头。
  • 规则2：然后变量后面的可以使用任意多个字母、数字、下划线或者美元符
  • 规则3：一定要避开JavaScript的所有保留字。

JavaScript的保留字如下图所示:

JavaScript表达式

  • 数值表达式：Math.random() * 10 + 32 - 11.0
  • 布尔表达式：level == 4
  • 串表达式："I" + " am " + " hero!"
  • 其他表达式：function() {...}，document.getElementById('cows')，new Array(10)

JavaScript自动类型转换

  • message = 2 + " if by sea，值为2 if by sea，JavaScript会将2转换为串“2”;
  • value = 2 * 3.1, 值为6.2，JavaScript会把整数2转换为一个浮点数。

JavaScript计算下面的语句会得到什么？

  • numORString1 = "3" + "4"; 值为：”34”
  • numORString2 = "3" * "4"; 值为：12

##JavaScript循环

  • while循环
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  var scoop = 5;
  while(scoop > 0) {
      alert("More icecream!");
      scoop = scoop - 1;
  }
  alert("life without ice cream is not the same!");
</script>
  • for循环
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  var scoop;
  for(scoop = 5; scoop > 0; scoop--) {
      alert("More icecream!");
      
  }
  alert("life without ice cream is not the same!");
</script>

HTML页面增加JavaScript

要使用JavaScript，必须把它增加到一个Web页面中。不过在哪里加呢？下面介绍向页面增加JavaScript代码的三种方式

  • 联机脚本放在元素中

向页面增加代码时，最常用的方式就是在页面的head部分放置一个script元素。在head元素中增加JavaScript部分就会最先执行这个代码，然后才解析页面的其余部分。

1
2
3
4
5
6
7
<head>
    <script>
        ...语句
    </script>
</head>
  • 通过引用一个单独的JavaScript文件夹来增加脚本

还可以链接一个包含了JavaScript代码的单独的文件。将这个文件的URL放在开始script表计的src属性中，另外一定要用< /script>结束这个脚本元素。如果链接到同一目录的某个文件，可以不提供该文件夹的完整路径。

1
2
<script src="mycode.js" >
</script>
  • 将代码增加到文档体中，可以作为内联代码，也可以作为一个单独文件的链接

也可以把代码直接放在HTML5的body中。同样的，将JavaScript代码包围在script元素中（或者在src属性中引用一个单独的文件）。浏览器解析体时就会执行页面体重的JavaScript（而且通常会从上向下执行）。

1
2
3
4
5
6
7
<body>
    <script>
        ...语句
    </sript>
</body>

JavaScript与HTML5页面交互

  • 1.在浏览器总加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记中的所有元素。
  • 2.JavaScript可以与DOM交互来访问元素以及元素中的内容。JavaScript还可以使用DOM来创建或删除元素。
  • 3.JavaScript修改了DOM时，浏览器会动态更新页面，所有你会看到页面上的新内容。

严格模式

ECMAScript5 引入了严格模式的概念。严格模式是为 JavaScript 定义了一种不同的解析与执行模型。在严格模式下 ECMAScript3 的一些不确定的行为将得到处理而且对某些不安全的操作也会抛出错误。要在脚本中启用严格模式，可以在顶部添加如下代码：

1
"use strict";

注释

javascript的注释。单行注释是”//注释文字”，多行注释是/*注释文字*/

1
2
3
4
5
6
//单行注释
/*
* 多行注释1
* 多行注释2
* /
刘涤生 wechat