web前端开发（三）—JavaScript基础

一、JS简介

二、JS变量

三、JS数据类型(弱类型)

四、字符串常用方法

五、数组常用方法

六、条件判断

七、循环语句

八、函数

九、浏览器对象

一、JS简介

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JS代码写在HTML的script标签内。

二、JS变量

JS变量用于存储程序所需要的数据。

语法： var 变量名 = 变量值；例： var age = 18; var name = “田轩”；

变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。

声明一个变量用var语句。

使用等号=对变量进行赋值。

三、JS数据类型(弱类型)

变量可以存储的数据有不同的类型，JS将数据划分为以下类型：

1.数值类型

JavaScript不区分整数和浮点数，统一用Number表示，其值可以是任意数值、NaN、Infinity;

2.字符串

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

3.布尔类型

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

4.数组

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

例如：[1,2,’3’,’田轩’,true]

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

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

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

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

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

5.对象

JavaScript的对象是一组由键-值组成的无序集合，例如：

var person = {

name: 'Bob',

age: 20,

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

city: 'Beijing',

hasCar: true,

zipcode: null

};

JavaScript对象的键都是字符串类型，值可以是任意数据类型。上述person对象一共定义了6个键值对，其中每个键又称为对象的属性，例如，person的name属性为'Bob'，zipcode属性为null。

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

person.name; // 'Bob'

person.zipcode; // null

两个特殊的值

null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

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

数值操作

算术运算符：+ - * / % ++ --

比较运算符： > 、>=、 <、<=、 == 、!=

逻辑运算符： && || ！

三目运算符： a > b ? a : b;

四、字符串常用方法

字符串长度： length

截取字符串：substring(0,3);

查找字符串中是否包含某字符：indexOf(“abc”)；

五、数组常用方法

数组长度：length

拼接数组：concat([1,2,3]);

数组拼接字符串：join();

向数组尾部追加数据： pop()

六、条件判断

JavaScript使用if () { ... } else { ... }来进行条件判断。

1.if 如果就

var age = 10;

if(age >= 18) {

console.log(‘可以进入网吧’);

}

2. if … else 如果否则

var name = ‘童季帆’;

if(name != ‘童季帆’){

console.log(‘放过’);

} else {

console.log(‘抓捕’);

}

3. if …else if … else 多层判断

如：

小明身高1.75，体重80.5kg。请根据BMI公式（体重除以身高的平方）帮小明计算他的BMI指数，并根据BMI指数：

低于18.5：过轻

18.5-25：正常

25-28：过重

28-32：肥胖

高于32：严重肥胖

七、循环语句

要计算1+2+3，我们可以直接写表达式；

var sum = 1 + 2 + 3 … + 100;

如果累加到10000呢？

为了让计算机能计算成千上万次的重复运算，我们就需要循环语句。

JavaScript的循环有两种，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块：

var sum= 0;

for (var i=1; i<=10000; i++) {

sum = sum + i;

}

八、函数

1.定义函数

在JavaScript中，定义函数的方式如下：

function abs(x) {

if (x >= 0) {

return x;

} else {

return -x;

}

上述abs()函数的定义如下：

function指出这是一个函数定义；

abs是函数的名称；

(x)括号内列出函数的参数，多个参数以,分隔；

{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。

如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

2.调用函数

调用函数时，在函数名称后加上一对小括号，并按顺序传入参数即可；

abs(-1);

练习

定义一个计算圆面积的函数area_of_circle()，它有两个参数：

r: 表示圆的半径；

pi: 表示π的值，如果不传，则默认3.14

九、浏览器对象

1.window

indow对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

2.location

location对象表示当前页面的URL信息。

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。