1.JavaScript内置对象Array

Javascript是一个弱类型语言,数组对象不存在角标越界,元素可以不断扩容

创建Array对象的三个方式:

(1) var 数字对象名 = new Array( ); 不指定长度

(2) var 数字对象名 = new Array( ); 指定数组长度

(3) var 数组对象名 = new Array( );[元素1,元素2,...]

也可以简化为

var 数组对象名 =[元素1,元素2,... ];

//方法1:创建数组对象
var arr = new Array() ;
// 方法2: 数组对象名 = new Array(size) ; //指定数组长度
var arr = new Array(4) ;//数组中最大索引值:arr.length-1
//方法3:  var 数组对象名 = [元素1,元素2,...];
var arr =  [10,"hello",turn,'a','b',1,new object()];
//虽然可以储存任何类型,但是实际开发中,具体元素类型肯定是统一的!;var arr = ["陕西","西安","鄠邑区"];arr[0] = 1;arr[1] = 2;arr[2] = 4;arr[3] = 20;alert(arr.length);
for(var i=0 ; i < arr.length ; i++){document.write(arr[i] + "<br/>");}

2.JavaScript自定义对象的方式(初步了解)

(1) 自定义对象
定义一个对象,格式和定义函数相同的!
方式1:function 对象名(形式列表..)
定义一个对象
function 对象(属性1,属性2,属性3 ,...){
属性就是某个真实世界事务的特征!
给属性赋值
给对象添加功能(方法)
}
创建对象
var 对象名 = new 对象(实际参数1,实际参数2,..);

最后对实际参数进行输出

例1

     //定义一个对象function computer(pinpai,size,cpu,ssd){//品牌,尺寸,处理器型号,硬盘型号//给属性赋值//=左边pinpai:就相当于要给computer对象添加pinpai属性(this:代表的是当前pinpai对象一个地址值)//=右边品牌  当前形势里面的参数//this.属性名称 = 形式参数值;this.pinpai = pinpai ;this.size = size ;this.cpu = cpu ;this.ssd = ssd ;}var p =new computer("华为","14英寸","inter","西部数据") ;document.write("电脑的品牌是:"+p.pinpai+ ",电脑的尺寸是"+p.size+ ",处理器型号是"+p.cpu+",固态硬盘选的是"+p.ssd+"<br/>");

输出结果:

(2) //方法2:定义对选哪个的时候,function 对象(){} //不携带参数了
//创建对象: var 对象名 = new 对象() ;

例2

   //定义一个人对象
function Person(){}//创建对象  人对象var p = new Person() ;//自己追加的属性//对象名.追加的属性名称 = 实际值;
p.name = "法外狂徒张三" ;
p.age = 50 ;
p.gender = "男" ;
p.address = "比尔吉沃特" ;
p.high = 183 ;//追加方法//对象名.追加的方法名(实参/空参){ ..}
p.speak = function(a){alert("会"+a);
}//输出这个人的基本信息//对象名.属性名 = 获取内容//对象名.方法名(); 调用方法
document.write("这个人的姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender+",住址是:"+p.address+",身高为:"+p.high);p.speak("英语") ;

输出结果:

(3) //利用JavaScript内置对象Object,代表的所有对象模板!
//var 对象名 = new Object()

例3

        //直接创建对象var  p =  new Object();//追加属性//对象名.属性名 = 值;p.brand = "华为mate30pr0" ;// brand:品牌p.price = 4699 ; //price:价格p.color = "粉翠绿" ; //color:手机颜色p.memory = "64G" ; //memory:手机内存//追加方法//对象名.追加的方法名 = function(空参/带参数) {...}//打电话p.call = function(toName){//高圆圆alert("这个手机给可以给"+toName+"打电话了") ;}//发短信p.sendMessage = function(){alert("可以发短信") ;}//打印出 手机信息 以及调用手机的这两个功能document.write("手机品牌是:"+p.brand+",它的价格是:"
+p.price+",机身颜色是:"+p.color+",它的机身内存是:"+p.memory) ;p.call("高圆圆") ;p.sendMessage() ;

(4) json数据格式(也称为 "字面量值的方式")
//json:Js对象简谱,是一种数据交互的格式(体现,前后端交互,使用json传参)
       //json数据解析速度非常快!
        var 对象名 = {"key1":value1,"key2":value2....}
    现在描述一个具体学生事物
     姓名,年龄,性别,地址这个几个属性

例4

var student = {//追加属性"name":"王宝强","age":35 ,"gender" :"男","address":"渭南市",//追加方法://"方法名":function(){...}//学习"study":function(){alert("学习Javascript") ;}};//访问方式:    var 值 = 对象名.key     ;      document.write("学生的姓名是:"+student.name+"<br/>") ;document.write("学生的年龄是:"+student.age+"<br/>") ;document.write("学生的性别是:"+student.gender+"<br/>") ;document.write("学生的住址是:"+student.address+"<br/>") ;//访问方法//对象名.方法名() ;student.study() ;

输出结果:

4.JavaScript通过方法获取标签对象

当在输入框中输入内容完毕,鼠标光标失去焦点,触发一个失去焦点事件,将文输入框的内容弹框出来
失去焦点事件: blur事件 ---标签中 onblur属性

5.JavaScript常用事件编程

将所有的时间在标签上,值需要在事件名称前面加上on, 将指定的事件绑定到onxxx属性上

(1) 点击相关事件

单击:click --->onclick属性

双击:dbclick --->ondbclick属性

(2) 焦点事件

获取焦点: focus --->onfocus属性

失去焦点: blur --->onblur属性

(3)选项卡发生变化的事件,一般用在select下拉菜单中

事件名称: change --->onchange属性

            //单击点击事件函数function testClick(){alert("单击事件触发") ;}//双击点击事件的函数function testDbClick(){alert("双击事件触发") ;}//定义获取焦点事件函数function testFouces(){//将文本输入框的value属性值清空掉//dom操作:通过id="username"获取input标签对象var a =  document.getElementById("username") ;//将input标签对象的value属性清空掉a.value = "" ;}//定义一个函数:失去焦点的函数
function testBlur(){        //需求:当鼠标移出文本框,触发失去焦点事件,//获取文本输入的内容,判断它的内容如果不是"高圆圆",在文本输入框的后面提示,"是否可用"//1)获取文本输入框的内容var username = document.getElementById("username").value ;//2)获取id="tip"所在的span标签对象var a = document.getElementById("tip") ;//3)逻辑判断if(username !="高圆圆"){//给span标签对象设置文本a.innerHTML = "×".fontcolor("red") ;}else{//可用a.innerHTML = "√".fontcolor("green") ;}}//定义函数:选项卡发生变化的事件function testChange(){//alert("选项卡变化了") ;//通过id="pro" 所在的select标签,获取它的标签对象//同时获取下拉菜单的内容var province = document.getElementById("pro").value ;//alert(province) ;//应该要给第二个select标签(城市所在的下拉菜单),获取它的标签对象,动态给力拼接城市//获取id="city"所在的select标签对象var city =  document.getElementById("city") ;//将city的innerHTML清空掉city.innerHTML = "" ;//判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"if(province=="陕西省"){//定义一个城市数组var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;//遍历数组,获取每一个城市for(var i = 0 ; i < arr.length;i++){// 拼接<option value="渭南市">渭南市</option> 文本//给city标签对象(代表就是第二个select标签对象)拼接上面的文本city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "}}if(province=="山西省"){//定义一个城市数组var arr = ["太原市","晋中市","临汾市","大同市"] ;//遍历数组,获取每一个城市for(var i = 0 ; i < arr.length;i++){// 拼接<option value="渭南市">渭南市</option> 文本//给city标签对象(代表就是第二个select标签对象)拼接上面的文本city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "}}if(province=="广东省"){//定义一个城市数组var arr = ["广州市","东莞市","佛山市","深圳市"] ;//遍历数组,获取每一个城市for(var i = 0 ; i < arr.length;i++){// 拼接<option value="渭南市">渭南市</option> 文本//给city标签对象(代表就是第二个select标签对象)拼接上面的文本city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option> "}}}

[学习总结]小tip相关推荐

学计算机excel就很好吗,零基础学习excel小技巧
零基础转行IT?如今IT行业如日中天,发展态势非常好,可谓是朝阳产业.因此,越来越多的人想进入IT行业,但苦于对it不了解,零基础不知IT深浅,那今天就和大家分享一下,零基础转行it该选择什么方向? ...
深度学习在小分子药物研发中的应用
一.深度学习在小分子药物研发中的应用二.深度学习工具 TensorFlow Python https://www.tensorflow.org/ ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
JAVA小项目实例源码—学习娱乐小助手
代码地址如下: http://www.demodashi.com/demo/11456.html 一.程序实现项目目录: MyJFrame:实现项目界面样式: AppProcess:实现调用api或 ...
小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...
Python学习—2048小游戏等4个小练习
Python学习-2048小游戏等4个小练习转载于:https://www.cnblogs.com/ChangAn223/p/10627777.html
爱学习的小虫子——Who Am I ？
爱学习的小虫子的自我介绍 - 你终会得到属于你的面包和牛奶此时此刻,我是西安某高校某院系某专业的大三学生,是一枚萌系女孩(偷笑),我很愿意将我所学习到的知识与你们分享,并且我希望我们可以一同进步,互 ...
前端学习——微信小程序
今天是学习微信小程序的第三天. 1. 一定要给脚本文件定义出口.如以下代码 var local_database = [{date: "Nov 18 2017",title: &q ...

[学习总结]小tip

1.JavaScript内置对象Array

2.JavaScript自定义对象的方式(初步了解)

4.JavaScript通过方法获取标签对象

5.JavaScript常用事件编程

[学习总结]小tip相关推荐

最新文章

热门文章