首页 > 编程语言 > 详细

JavaScript基础(一)

时间:2018-06-21 23:35:19      阅读:343      评论:0      收藏:0      [点我收藏+]
Js的历史
1994年的时候,国外的网速7kb/10kb左右
网景公司---liveScript (领航者浏览器)
90年Java语言诞生
jdk1.0 --将”java”--网景公司和sun公司-javaScript
javaScript
微软公司-jsScript (将浏览器免费了…),垄断市场

JavaScript和jscript
ECMA:欧洲制造商者联盟 组织将这两个语言的语法统一
基础语法一样
BOM编程:Browser Object Model:基于浏览器对象模型编程
DOM编程:Document Object Model:基于文档对象模型编程

技术分享图片

XML解析
DOM解析
SAX解析

JavaScript的基础语法:

  1. javascript的使用
    分为两种方式:
    1) 内部方式
    在html的head标签体写script标签

    技术分享图片

2) 外部方式:导入外部的js文件
技术分享图片

  1. javascript的变量问题以及数据类型
    技术分享图片
  2. 类型转换函数

技术分享图片

  1. Javascript的运算符
  2. JavaScript流程控制语句
    大体和Java语言的语法相似!
    4.函数概念
    5.Js中的内置对象
    String
    Number
    Boolean
    Math
    Date
    6.在JavaScript中常用的两个函数
    alert("弹出一个提示框") ;
    document.write("向浏览器输出内容")
    7.witch语句:格式 witch(document){....}
    将document对象当做witch语句参数,然后直接使用它里面的write() ;
    8.or-in:针对数组或者对象进行遍历
    for(var 遍历的变量名 in 数组名称/对象名称)//{
    输出变量名
    }
    如果是对象(js中的对象是一个重点)进行操作,那么这里变量名就是当前对象的属性
    9.函数
    函数的定义:
    function 函数名称(形式参数列表)//{
    //语句

        }

    函数的调用
    函数名称(实际参数列表) ;

    函数中的注意事项:
    1)函数的形式参数不能有var关键字定义,否则报错
    2)在js中函数是可以有return语句的,直接return,但是没有返回值
    3)在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数
    4)当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉!
    5)在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)
    10.String对象
    js中String对象 的常用方法
    chatAt() :返回指定索引位置处的字符
    indexOf():表示某个子字符串在当前字符串中第一次出现的索引
    lastindexOf();
    fontColor():给当前字符串设置一个颜色标记
    substrint(start,end):截取功能
    11.Math对象
    向上取整 //在整数位置+1
    var num = 4.30 ;
    document.write(Math.ceil(num)+"<br/>");
    向下取整 :如果有小数部分,将小数部分去除掉,保留整数位
    document.write(Math.floor(num)+"<br/>");
    四舍五入
    document.write(Math.round(num)+"<br/>");
    获随机数 random():包含0,但是不包含1
    document.write(Math.random()*100+"<br/>") ;
    max/min
    document.write(Math.max(num,100)) ;

    12.定时器
    1)setInterval("任务",毫秒值) ; 每经过多少毫秒重复执行这个任务(函数)
    2)timeout("任务",毫秒值) ;经过多少毫秒后执行一次这个任务
    13.Data对象
    如何创建一个Date对象
    var date = new Date() ;
    alert(date) ; //Sun Jun 17 2018 16:05:35 GMT+0800 (中国标准时间)

    获取系统时间:  2018年6月17日 XXX时:xx分:xx秒        --->Java中存在一个类:SimpleDateFormat
    getFullYear :获取年份
    document.write(date.getFullYear()+"年") ;
    
    获取月份:getMonth 方法返回一个处于 0 到 11 之间的整数,
    document.write((date.getMonth()+1)+"月") ;
    
    获取月份中的日期
    document.write(date.getDate()+"日"+"&nbsp;&nbsp;") ;
    
    获取一天当中的小时
    document.write(date.getHours()+":") ;
    
    获取分
    document.write(date.getSeconds()+":") ;
    
    获取分钟的秒
    document.write(date.getMinutes()) ;

14Array对象的创建方式
1)方式1:相当于动态初始化
var arr = new Array(3) ;
2)var arr = new Array() ; 表示0个长度
3) 直接指定数组中 具体元素
var arr = new Array("hello",100,true,‘a‘) ;
注意事项:
1)在js中,数组可以存储任意类型的元素!
2)在js中,不存在数组角标越界一说,数组中的元素数量是可以不断的增加..不会出现异常!

**      (二)自定义对象**
(1)js中的自定义对象

        定义对象
            1)相当于有参构造 的形式
            2)无参构造的形式

            function 自定义对象(Person) (参数名){
                定义属性
                定义方法

            }

            创建对象
            var p = new Preson(实际参数) ;

            //输出对象p中的属性值
            //调用对象p中的方法
    方式1:自定义对象方式1 :有参构造的形式
定义一个对象
function Person(name,age){ //this:代表当前对象
    定义属性
    this.name = name ;
    this.age = age ;
    定义方法
    this.speak = function (){
        alert("这是说话的功能...")
    }
}

创建对象
var p = new Person("张三",28);

方式2:无参构造的形式
定义一个对象
function Person(){

}

创建对象
var p = new Person() ;
追加属性
p.name = "李四" ;
p.age = 38 ;
//追加方法
p.speak = function(){
    alert("这是李四说话的功能...")
}

//自定义对象方式3: 利用Object对象 ,Object对象在js中代表任意对象的一个模板
定义对象
function Person(){

}

创建对象
var p = new Object() ;

追加属性
p.name = "厄齐尔" ;
p.age = 29 ;
追加方法
p.play = function (){
    alert("全场隐形...") ;
}

自定义对象方式4    json解析  (全国的省市区三级联动)        
"标题1":"内容","名称2":"内容2"
"属性名1":值1,
 "属性名2":值2,
 "方法名":function(){

    }

var p = {
    //就是json格式的写法
    //追加属性
    "name":"王五",
    "age":28,
    "play":function(){
        alert("王五会踢球...")
    }
};

要么使用for-in语句将对象的属性遍历出来,或者直接输出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;

调用方法
p.play();

(三)原型
(1)设计一个数组工具对象,例如ArrayUtil对象,该对象提供以下两个方法:
search(array,target): 传入指定的数组和指定的字符串,返回指定字符串所在的位置
max(array): 传入指定的数组,返回该数组中的最大值

<html>
<head>
<meta charset="UTF-8">
<title>自定义对象练习</title>
<script src="js/ArrayUtil.js"></script>
<script type="text/javascript">

//创建一个数组,静态初始化
var arr = [43,65,13,87,3,19] ;

//创建ArrayUtil对象
var arrayUtil = new ArrayUtil();

//查询3这个元素对应的索引
var index = arrayUtil.search(arr,300) ;
document.write("你要查找的元素的位置是:"+index) ;
document.write("<hr/>") ;

//获取arr中的最大值
var max = arrayUtil.max(arr) ;
document.write("当前数组中的最大值是:"+max);

</script>
</head>
<body>
</body>
</html>

(2问题:刚才使用的是自定义了一个对象ArrayUtil对象,完成刚才查询和最值操作;
在不提供任何工具类的情况下,怎么将search()和max()追加到Array(js的内置对象)对象中)
Array对象有的方法
function Array(){

        this.join = function() {

        }
        this.reverse = function(){

        }

        追加
        this.search() = function(){

        }

        这样写就不行了,因为Array对象是内置对象,不能直接这做,获取不到源码!
    }

原型(prototype)
        作用:就是给js中的内置对象追加方法使用的
        1)每一个js内置对象都有一个原型属性(prototype)
        2)如果往原型对象中追加一个方法,那么这个方法会自动追加到内置对象中
        3)原型属性是可以直接被内置对象调用然后追加方法

(四)其他的对象
(1)Windows对象
window对象:它代表浏览器的一个窗口对象

        注意:
                由于window对象中的方法频繁调用,所以为了简化书写方式,有时候window可以去掉

            里面涉及的方法:
                    open("打开资源文件url","以什么什么方式打开(_blank)/_self","指定新打开的窗口和高度")

            和定时器相关的方法:
            setInterval("任务",时间毫秒值); 没经过多少毫秒后重复执行这个任务
            clearInterval():取消和setInterval相关的任务
                window.clearInterval(iIntervalID)  :这个要插入一个Id
            setTimeout("任务",时间毫秒值);   经过多少毫秒后只执行一次
                clearTimeout():取消和setTimeout相关的超时事件

            和弹框相关的方法
            window.alert("提示框") ;  //window可以省略
            window.confirm("消息对话框");有确认框,取消框
            prompt:提示对话框,其中带有一条消息和一个输入框
        (2)location对象:
        href属性:可以修改页面的href属性来实现页面跳转     更改的href属性:--- URL(统一资源定位符)
                                                                 URI
        方法:
            定时刷新:reload()
        (3)history对象
        history对象中的方法
            forward:装入历史列表中下一个url
            back:装入历史列表中前一个url
            go(正整数或者负整数)
        (4)screen对象
        属性 描述 
    availHeight 获取系统屏幕的工作区域高度,排除 Microsoft? Windows? 任务栏。 
    availWidth 
    (5)js中的监听器
    <html>
<head>
    <meta charset="UTF-8">
    <title>js中的事件监听器</title>
(6)事件编程的分类: 1)和点击相关的事件 单击点击事件: onclick 双击点击事件: obdbclick 2)和焦点相关的事件 获取焦点事件:onfocus 失去焦点事件:onblur 3)和选项卡发生变化 和选项卡发生变化相关的事件:onchange (下拉菜单,select标签) 和鼠标相关的事件: onmouseover:鼠标经过的事件 onmouseout:鼠标移出的事件 和页面加载相关的事件:onload 一般用在body 当body中的内容加载完毕之后就会触发这个事件

JavaScript基础(一)

原文:http://blog.51cto.com/13670525/2131525

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!