学完html和css,下面是js
1.js中的变量
- var 变量名=值;
- 区分大小写
- 变量名要有意义
- 一般以字母,$ 符号,下划线开头,中间或者后面可以有$符号,字母,数字
- 变量名一般都是小写的
- 变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首 字母都是大写的,这种命名方式称为:驼峰命名法,例如:var
bigNumber=10; - 不能使用关键字
2.变量的输出
var number=10;
1.弹框
alert(num);
2.把内容输出在浏览器的控制台中
console.log(num);
3.js中的数据类型
(1).js中的原始数据类型
- number:数字类型(整数和小数)
- string:字符串类型(的值一般都是单引号或者双引号括起来的)
- boolean:布尔类型(值只有两个,true(真1),false(假0))
- null:空类型,值只有一个null,一个对象指向为空了,此时可以赋值为null
- undefined:未定义,值只有一个:undefined
- 变量声明了,没有赋值,结果是undefined
- 函数没有明确返回值,如果接受了,结果也是undefined
- object:对象
4.字符串的拼接
(1) 使用“+”
var str1="hello";
var str2="stranger";
console.log(str1+str2);
(2) 只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加
var str1="9";
var str2=9;
console.log(str1+str2);//结果是99
(3) 如果有一个是字符串,另一个不是字符串,用" - ",那么结果是相减的
(浏览器自动的帮我们把字符串的类型转成了数字类型,这种方式叫做:隐式转换)
var str1="10";
var str2=9;
console.log(str1-str2);//结果是1
5.类型转换
(1) 转整数:parseInt();
console.log(parseInt("10"));//10
(2) 转小数:parseFloat();
6.基本语句
和C语言差不多,前面的文章有了,不写了,我想说,学个前端,就连写星星都觉得幸福,多好看哪,看看别的,,,
7.数组
(1) 构造函数定义数组:var 变量名=new Array();
如果把数组的名字直接输出,那么就可以把数组里面的内容直接输出来。如果没有数据就看不到数据,
var 数组名=new Array(值);
定义了数组,有长度
var 数组名=new Array(值1,值2,值3…);
定义数组并且有多个数据
var arr=new Arry(100,200,300);
console.log(arr[3]);//获取
(2) 通过字面量的方式定义数组
var 数组名=[ ];
数组中元素的值的类型可以不一样
var array=[“red”,1,true ];
var arr=[1,2,3,4,];
console.log(arr);
(3) 案例:去掉数组中重复的0,把其他的数据放在一个新的数组中
var arr=[10,0,20,30,0,50];
var newArr=[ ];/新数组,用来存放第一个数组中所有非0的数字
for(var i=0;i<arr.length;i++){
if(arr[i]!=0){
newArr=[newArr.length]=arr[i];
}
}
//把新数组的长度作为下标使用,数组的长度是可以改变的
console.log(newArr);
(4) 案例:用户输入班级人数,求总成绩,平均值,最高分,最低分
//提示用户输入班级人数,求总成绩,平均值,最高分,最低分
var perCount=parseInt(prompt("请输入班级人数"));
//定义数组存储班级的每个人的成绩
var perScores=[];
//循环的方式录入每个人的成绩
for(var i=0;i<perCount;i++){
perScores[perScores.length]=parseInt(prompt("请输入第"+(i+1)+"个人的成绩"));
}
console.log(perScores);
//求总成绩
var sum=0;
var avg=0;
var max=perScores[0];//最大值
var min=perScores[0];//最小值
for(var i=0;i<perScores.length;i++){
sum+=perScores[i];//求和
//求最大值
if(max<perScores[i]){
max=perScores[i];
}
//求最小值
if(min>perScores[i]){
min=perScores[i];
}
}
//平均值
avg=sum/perScores.length;
console.log("最大值为:"+max);
console.log("最小值为"+min);
console.log("平均值"+avg);
8.函数
(1) 定义
function 函数名字(){
函数体;
}
(2) 函数调用
函数名字();
9.函数参数
(1) 小括号内的参数不再用var
fonction getSum(x,y){
var sum=x+y;
return sum;
}
//函数调用
var result=getSum(10,20);
console.log(result);
- 形参:函数在定义的时候,小括号里的变量叫形参
- 实参:函数在调用的时候,小括号里传入的值叫实参,实参可以是变量,也可以是值
10.返回值
如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
如果函数使用 return语句,那么跟再return后面的值,就成了函数的返回值
如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined
函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。
11.arguments的使用
JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有的实参。arguments是一个伪数组,因此及可以进行遍历
function f1() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
console.log(f1(10,20));
12.函数的其它使用
匿名函数
匿名函数:没有名字的函数
匿名函数如何使用:
将匿名函数赋值给一个变量,这样就可以通过变量进行调用
var f1=function(){
函数体
}; //这里加分号
f1();
匿名函数自调用
关于自执行函数(匿名函数自调用)的作用:防止全局变量污染。
自调用函数
匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行
(function () {
alert(123);
})();
函数是一种数据类型
function fn() {}
console.log(typeof fn);
-
函数作为参数
因为函数也是一种类型,可以把函数作为两一个函数的参数,在两一个函数中调用 -
函数做为返回值
因为函数是一种类型,所以可以把函数可以作为返回值从函数内部返回,这种用法在后面很常见function fn(b) { var a = 10; return function () { alert(a+b); } } fn(15)();
13.预解析
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程
预解析过程:
- 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。
- 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
- 先提升var,再提升function
14.创建对象
(1) 调用系统的构造函数创建对象
var obj=new Object();
obj.name="zy";//添加属性:对象.名字=值;
obj.age=18;
obj.eat=function(){ //添加方法:对象.名字=函数;
console.log("我爱吃火锅");
};
console.log(obj.name);
console.log(obj.age);
obj.eat();
(2) 工厂模式创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('张三', 22, 'actor');
p1.sayHi();
(3) 自定义构造函数创建对象
- 在内存中开辟空间,存储创建的对象
- 把this设置为当前的对象
- 设置对象的属性和方法的值
- 把this这个对象返回
function Person(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
console.log("我叫"+this.name+"年龄是"+this.age);
};
}
var obj=new Person("小红",19);
console.log(obj.name);
console.log(obj.age);
obj.sayHi();
(4) 字面量方式创建对象
var obj={
name:"zy",
age="19",
sayHi:function(){
console.log("我是:"+this.name);
},
eat:function(){
console.log("吃了");
}
};
console.log(obj.name);
obj.sayHi();
15.for in遍历的使用
var obj = {
name:"zy",
age:"19"
};
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
16.两类方法
(1) 实例方法:必须要通过new的方式创建的对象(实例对象)来调用的方法
(2) 静态方法:直接通过大写的构造函数的名字调用的方法
17.字符串对象的常用方法
(1) 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5,IE8+支持 和charAt()等效
(2) 字符串操作方法
concat() //拼接字符串,等效于+,+更常用
slice() //从start位置开始,截取到end位置,end取不到
substring() //从start位置开始,截取到end位置,end取不到
substr() //从start位置开始,截取length个字符
(3) 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找,只找第一个匹配的
(4) 去除空白
trim() //只能去除字符串前后的空白
(5) 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
(6) 其它
search()
replace()
split()
fromCharCode()
String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
18.Math对象
Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供
- Math.PI // 圆周率
- Math.random() // 生成随机数
- Math.floor()/Math.ceil() // 向下取整/向上取整
- Math.round() // 取整,四舍五入
- Math.abs() // 绝对值
- Math.max()/Math.min() // 求最大和最小值
- Math.sin()/Math.cos() // 正弦/余弦
- Math.power()/Math.sqrt() // 求指数次幂/求平方根
19.Date对象
创建Date实例用来处理日期和时间。Date对象基于1970年1月1日(世界标准时间)起的毫秒数。
// 获取当前时间,UTC世界时间,距1970年1月1日(世界标准时间)起的毫秒数 var now = new Date();
console.log(now.valueOf()); // 获取距1970年1月1日(世界标准时间)起的毫秒数Date构造函数的参数
- 毫秒数 1498099000356 new Date(1498099000356)
- 日期格式字符串 ‘2015-5-1’ new Date(‘2015-5-1’)
- 年、月、日…… new Date(2015, 4, 1) // 月份从0开始
获取日期的毫秒形式
var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())
// HTML5中提供的方法,有兼容性问题
var now = Date.now();
// 不支持HTML5的浏览器,可以用下面这种方式
var now = + new Date(); // 调用 Date对象的valueOf()
日期格式化方法
toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法,在不同浏览器可能表现不一致,一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
获取日期指定部分
getTime() // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份,从0开始
getFullYear() //返回4位的年份 如 2016
20.Array对象
创建数组对象的两种方式
- 字面量方式
- new Array
// 1. 使用构造函数创建数组对象
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组,里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组,里面存放了4个数字
var arr = new Array(1, 2, 3, 4);
// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];
// 获取数组中元素的个数
console.log(arr.length);
- 检测一个对象是否是数组
- instanceof
- Array.isArray() HTML5中提供的方法,有兼容性问题
函数的参数,如果要求是一个数组的话,可以用这种方式来进行判断
- toString()/valueOf()
- toString() 把数组转换成字符串,逗号分隔每一项
- valueOf() 返回数组对象本身
- 数组常用方法
演示:push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
1 栈操作(先进后出)
push()
pop() //取出数组中的最后一项,修改length属性
2 队列操作(先进先出)
push()
shift() //取出数组中的第一个元素,修改length属性
unshift() //在数组最前面插入项,返回数组的长度
3 排序方法
reverse() //翻转数组
sort(); //即使是数组sort也是根据字符,从小到大排序
// 带参数的sort是如何实现的?
4 操作方法
concat() //把参数拼接到当前数组
slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
splice() //删除或替换当前数组的某些项目,参数start, deleteCount, options(要替换的项目)
5 位置方法
indexOf()、lastIndexOf() //如果没找到返回-1
6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
7 方法将数组的所有元素连接到一个字符串中。
join()