web前端开发(三)—JavaScript基础

目录

一、JS简介

二、JS变量

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

四、字符串常用方法

五、数组常用方法

六、条件判断

七、循环语句

八、函数

九、浏览器对象


一、JS简介

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

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

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

 

二、JS变量

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

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

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

声明一个变量用var语句。

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

 

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

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

  1.数值类型

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

  2.字符串

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

3.布尔类型

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

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个键值对,其中每个键又称为对象的属性,例如,personname属性为'Bob'zipcode属性为null

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

person.name; // 'Bob'

person.zipcode; // null

 

两个特殊的值

null和undefined

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

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

 

数值操作

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

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

  逻辑运算符: &&   ||  !

  三目运算符: 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对象有innerWidthinnerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。

 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()方法非常方便。

猜你喜欢

转载自blog.csdn.net/mdxiaohu/article/details/81322814