欢迎光临散文网 会员登陆 & 注册

JS学习笔记(复习概括版):事件,方式,类型,函数,数组,对象,Date,三目表达式

2020-05-10 21:12 作者:诗书画唱  | 我要投稿

JS的三种使用方式
1.内部引入(常用)
2.外部引入(一个js文件可以被多个页面共同使用)
3.行内(少用)
区别:内部引入只能够使用单页面,外部引入可以应用到多个页面,行内是直接在html标签内写(少用)


html代码是按照从上到下进行解释的,如果js获取到网页中还没有进行解释的内容,就会出现js      DOM堵塞
解决js堵塞的方式有两种:
1.将js代码写在网页的最下面
2.使用window.onload(网页加载完毕执行)
js发生错误时的堵塞,js代码一旦发生错误,错误后的代码将不会执行,但不会影响发生错误前的代码情况


alert("111");//警告框。
prompt("请输入你的名称","王菲");//提示对话框。
console.log(value);//用来进行调试,只能够在浏览器中进行调试,点击F12,console下会显示调试的内容。
document.write("内容可以是普通文字和html代码,css样式")。


//第一种调试的方式
//使用alert()去打印变量的值进行缩小范围调试
//第二种调试方式
//在浏览器中点击F12去看错误信息


js中变量都是弱类型的,不管声明什么数据类型都使用var进行声明,如果你要判断
这个类型到底是声明类型,可以使用typeof关键字进行查看

//声明的是什么类型就是什么类型,确定死就是强类型
//声明的类型不确定这个是什么类型,就是弱类型

//如果做一种结果不是数字,也不是字符串,就得到NaN(不是数字)


js中的数据类型包含6种,5种基本数据类型和一种复杂数据类型
number:所有的数字都属于number,不管小数还是整数。
boolean:true  false。
string:可以使用""和‘’进行声明,但是不要混着用。
null:代表空。
undefined:声明了变量未赋值的空。
Object是所有引用数据类型的统称,包含元素节点,其他类型。




下载谷歌(用的最多,调试方便)或者火狐浏览器(调试的时候提示是中文的,调试方便)


函数(方法):代码块,将具有特定功能的代码块封装为一个函数
js的函数分为系统函数和自定义函数。


自定义函数分为定义函数和函数表达式。


定义函数语法:
function      函数名(参数列表){
函数体
}

定义函数调用时调用函数名  。


函数表达式语法:
var  变量名接收=function(参数列表){
函数体
}

函数表达式调用时调用变量名即可 。 

//不管有没有声明返回值,都可以返回,也可以不返回。
//参数:不管我定义没有定义参数,都可以传参,也可以不传参。



将字符串转为数字类型:
Number(参数就是需要转型的内容);
转为Boolean类型:
Boolean(参数就是需要转型的内容);
转为字符串类型:
需要转型的内容.toString();


//形参:只是声明一下,并没有具体的值,值需要通过其他调用的地方进行传过来
//实参:具体传入的内容


isNaN(内容):用于判断是不是非数值,个人得出的理解:is Not a Number的缩写。


arguments:对于参数过多的时候,它可以得到参数列表,返回的结果是一个数组形式,可以使用下标进行访问其内容


数组:
//js中的数组创建使用的是[],下标也是从0开始。
由于js是弱类型语言,所以其数组不会规定必须放什么类型,可以放入任何类型,甚至是数组,对象数组的数据类型为Object数组的创建:
//第一种      隐式方式创建数组
// var  b=['11',22,'你好',['大家好',11]];
// js中的数组和java中的list集合是不是很像
// 不限制输入的长度(自动增长)
//第二种      使用构造函数创建数组
// var  b=new  Array('你好',11,'快开学啦!');
// console.log(b);
// 第三种      使用下标索引给数组赋值
// var  v=new  Array(2);//数组的默认长度为2
// v[0]='你好很好';
// v[1]=11;
// v[2]='快开学啦';
// console.log(v);



数组的初始值基本没有什么意义,在实际赋值的时候数值的长度可以大于数组的初始个数修改数组的内容,是使用下标进行修改


//第一种        遍历数组    for循环进行遍历
for(var  i=0;i<v.length;i++){
document.write(v[i]+"<br>");
}
//第二种    for  in  进行遍历数组
for(var  i  in  v){
document.write(i+"<br>");
}
// 第三种遍历        for    of
for(var  i  of  v){
document.write(i+"<br>");
}




创建二维数组的语法:
var  v=[["张三","李四"],["王五","马六"],["秦叔宝","尉迟恭"]]; 遍历二维数组
for(var  i  of  erwei){
for(var  j  of  i){
document.write(j+"<br>");
}
}



js创建对象的两种方式
//第一种,直接创建:
var  v={'bianhao':1,'name':'香蕉','price':3,'num':3};
//第二种  使用new创建
var  v1=new  Object();
v1.bianhao=2;
v1.name='橘子';
v1.price=4;
v1.num=2;


定义对象的功能使用匿名函数进行定义
v1.gongneng=function(){
alert(内容);
}



访问对象中属性和功能:
总结的语法格式:对象名称['属性的键']   或    对象名称.属性的键


第一种使用变量名[“属性名”]
添加 v[“name”]=”王五”;


第二种使用变量名.属性名添加 v.name=”王五”;修改对象的属性也是使用变量名[“属性名”]或者是 v.name


删除对象的属性:
delete  对象的属性名


在js中变量不事易变的,但是对象是易变的 js对象在进行重新赋值的时候不会重新创建一个对象内存,而是在原内存上添加一个新的名词。



遍历对象的时候使用for    in    进行遍历 for(  var  i  in  a){ document.write(a[i]); } js的构造函数和普通函数创建类似,主要的区别在于js构造方法用于创建对象。


//JS中的随机数Math.Random()*30,0--1之间的小数,取整数部分,Math.floor()



document.getElementById("div1"):得到页面中的ID元素
docum ent.createElement("标签名称"):创建一个页面元素
creatediv.style.width=100px:设置创建的这个div的css样式
div1.appendChild(creatediv):将创建的元素添加到元素div1中


---JS中自带的对象
Math:数学的操作
Math.abs(e):取e的绝对值
Math.ceil(e):向上取整
Math.floor(e):向下取整
Math.PI:圆周率Date:日期的操作
Math.pow(a,b):得到a的b次方 Math.sqrt(e)
:得到e的平方根
Math.random():得到0-1之间的随机数



String:字符串的操作
Date:对于时间的操作



创建Date对象
var  dt=new Date();//得到当前的时间
var  dt1=new Date("1999-11-11");//得到指定的时间
var  dt2=new Date("2003/08/22");//得到指定的时间
var  dt3=new Date(2008,7,11);//月份需要+1
var  dt4=Date.now();//当前时间的毫秒数


//三目表达式:
xiaoshi>12?panduan="下午":panduan="上午";


//三目表达式:
var month1=month>10?(month+1):"0"+(month+1);


常用方法:
getYear():得到年份,但是需要加1900
getFullYear():直接得到年份
getMonth():月份记得+1
getDate():获取日
getDay():周几,内容是0-6,0代表的周日
getHours():小时
getMinutes():分钟
getSeconds():秒
toDateString():英文格式的日期
toLocalString():数字格式的日期
toTimeString():只有时间,没有年月日


valueOf():将时间转为毫秒数( 

valueOf() 方法用于返回给定参数的原生 Number 对象值,参数可以是原生数据类型, String等。

该方法是静态方法。该方法可以接收两个参数一个是字符串,一个是基数。

Integer b = Integer.valueOf("444",16);   // 使用 16 进制)


new Date(毫秒):将毫秒数转为时间



setInterval():按照执行周期执行某些内容

setInterval()有两个参数:1代表执行的内容   2多长时间执行一次(毫秒计算的)

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval(code,millisec[,"lang"])



code必需。要调用的函数或要执行的代码串。

millisec必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。




clearInterval():清除掉setInterval

setTimeout():和setInterval一样,但是它不循环,只执行1次



String声明的两种方式:
//直接声明字符串
var str="123";//直接赋值的时候是一个string类型


//构造器声明字符串
var str1=new String("你好");//使用构造器声明就是一个引用类型


//字符串的不可变性:可以通过下标去访问字符串的中的内容,但是
 通过下标去改变字符串的内容是不可以的,如果改变字符串的内容
 就是新开辟一块空间赋值给该字符串变量


length:字符串长度


charAt(a):下标为a的字符串内容

concat(a,b,c....):链接字符串


indexOf(a):返回a在字符串中的第一个位置,未找到返回-1

lastIndexOf(a):从后往前找a的位置,未找到返回-1

replace(a,b):b替换a的内容

slice(a,b):截取字符串a的位置到b的位置

split(“a”):以”a”为分隔符分割字符串

substr(a,b):从a的位置截取b个字符串


JS事件:
onclick:点击任何元素的事件
onmouseover:鼠标移动到元素上的事件
onmouout:鼠标移出的事件
onfocus():焦点获取事件
onselect():选中文本框或者是文本域的内容的时候执行的事件
onblur():失去焦点事件
onchange():对于文本框的时候,之后内容改变后并且失去焦点才会触发,对于下拉框的时候只要下拉框的选项进行改变了就会触发
onload(): 网页加载完毕之后执行的事件
onunload():网页刷新或者是关闭的时候执行的事件
onkeyup():键盘进行松开的时候执行的事件


使用事件的方法分为两种:
1.直接在元素上写属性事件
<input type="button" value="计算结果" onclick="aa()" id="btn1"  />
2.使用js代码动态赋值事件
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
alert("123");

}


JS学习笔记(复习概括版):事件,方式,类型,函数,数组,对象,Date,三目表达式的评论 (共 条)

分享到微博请遵守国家法律