一、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, , '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 { ... }
来进行条件判断。
如果 就
var age = 10;
if(age >= 18) {
(‘可以进入网吧’);
}
2. if … else 如果 否则
var name = ‘童季帆’;
if(name != ‘童季帆’){
(‘放过’);
} else {
(‘抓捕’);
}
3. if …else if … else 多层判断
如:
小明身高,体重。请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数:
低于:过轻
-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: 表示π的值,如果不传,则默认
九、浏览器对象
1.window
indow
对象有innerWidth
和innerHeight
属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。
2.location
location
对象表示当前页面的URL信息。
location.protocol; // 'http'
location.host; // ''
location.port; // '8080'
location.pathname; // '/path/'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加载一个新页面,可以调用()
。如果要重新加载当前页面,调用()
方法非常方便。
作者:鸣珂锵玉
链接:web前端开发(三)—JavaScript基础_mdxiaohu的博客-CSDN博客