博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基础(一)
阅读量:6713 次
发布时间:2019-06-25

本文共 6237 字,大约阅读时间需要 20 分钟。

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:基于文档对象模型编程

JavaScript基础(一)

XML解析

DOM解析
SAX解析

JavaScript的基础语法:

  1. javascript的使用

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

    JavaScript基础(一)

2) 外部方式:导入外部的js文件

JavaScript基础(一)

  1. javascript的变量问题以及数据类型
    JavaScript基础(一)
  2. 类型转换函数

JavaScript基础(一)

  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中存在一个类:SimpleDateFormatgetFullYear :获取年份document.write(date.getFullYear()+"年") ;获取月份:getMonth 方法返回一个处于 0 到 11 之间的整数,document.write((date.getMonth()+1)+"月") ;获取月份中的日期document.write(date.getDate()+"日"+"  ") ;获取一天当中的小时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+"
") ;document.write(p.age+"
") ;调用方法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("

") ;//获取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中的监听器        
js中的事件监听器

<!--2)编写监听器-->

<script type="text/javascript">
function testClick(){
alert("点击成功了..") ;
}
</script>
</head>
<body>
<!--
1)确定事件源 input标签上添加事件
-->
<input type="button" value="按钮" οnclick="testClick()" /><!--3)绑定事件-->
</html>
(6)事件编程的分类:
1)和点击相关的事件
单击点击事件: onclick
双击点击事件: obdbclick

2)和焦点相关的事件        获取焦点事件:onfocus        失去焦点事件:onblur    3)和选项卡发生变化    和选项卡发生变化相关的事件:onchange  (下拉菜单,select标签)    和鼠标相关的事件:            onmouseover:鼠标经过的事件            onmouseout:鼠标移出的事件    和页面加载相关的事件:onload            一般用在body                当body中的内容加载完毕之后就会触发这个事件

转载于:https://blog.51cto.com/13670525/2131525

你可能感兴趣的文章
C练习小代码-20151108
查看>>
回调函数应用(冒泡排序 既排整型数组 也可排字符串 )
查看>>
.net core SystemEvents 对系统的事件的捕获
查看>>
树及树的遍历
查看>>
基于BIND实现智能DNS解析
查看>>
Mac os X 10.11 sudo 指令出问题了么?
查看>>
AECS4考试B卷
查看>>
做个聪明人,聪明的工作,在工作中自我培养
查看>>
关于android中PendingIntent.getBroadcase的注册广播
查看>>
jquery 判断多选框被勾选的个数
查看>>
ubuntu 安装oracle jdk
查看>>
Linxu最最使用命令
查看>>
JS的并行加载与执行顺序
查看>>
Linux下安装Hadoop(伪分布模式)
查看>>
Android UI设计准则
查看>>
IntelliJ IDEA 2017.3.1 使用手册
查看>>
互联网协议入门(2)
查看>>
DataSource的可配参数有哪些,有哪些DataSource可以用
查看>>
免费的后台管理界面框架
查看>>
本地文件共享服务(nfs samba ftp)
查看>>