本文共 10165 字，大约阅读时间需要 33 分钟。
一:
1.在JavaScript中常用的两个函数alert("弹出一个提示框") ;document.write("向浏览器输出内容")alert("今天德国大胜吗?") ;向浏览器输出内容document.write("今天天气不错!!") ;2.关于JavaScript的变量的定义 var 变量名= 值; 注意: 1)在js中,var可以用来定义任何数据类型的变量,var 可以省略,但是不建议省略 2)var是可以重复定义变量的(后面的值会覆盖掉前面的值),是因为JavaScript弱类型语言,而Java是一种强类型语言 3)如果定义一个变量,但是变量没有值,那么值(undefind),没有定义的变量不能直接使用! 查看一个变量的数据类型,使用一个函数:typeOf(变量名) Javascript数据类型: 在javascript,数据类型变量名的值来决定的! 1)不管是整数还是小数都是number类型! 2)不管是字符还是字符串,都是string类型 String:在js中表示字符串对象 3)boolean类型 4)object :对象类型 3.!--
类型转换函数string----number类型的整数 parseInt(变量) stirng----number类型的小数 parseFloat(变量)-->
// document.write("<table align='center'>") ;
for(var i = 1 ; i <=9 ; i++){ //for(var j = 1 ; j<=i ;j++){ document.write(i+""+j+"="+(ij)+" ") ;}document.write("<br/>") ;}// document.write("</table>") ;
*///with语句 with(document){ for(var i = 0 ; i < 5 ; i ++){ for(var j = 0 ; j <=i ; j++){ write("* "); } write("") ; } write("
") ; for(var i = 1 ; i <=9 ; i++){ for(var j = 1 ; j <= i ;j++){ write(i+"*"+j+"="+(i*j)+" ") ; } write("") ; } } 6.//for-in:针对数组或者对象进行遍历 /** * for(var 遍历的变量名 in 数组名称/对象名称)//{ * 输出变量名 * } * * 如果是对象(js中的对象是一个重点)进行操作,那么这里变量名就是当前对象的属性 7.函数的定义:
8.
//方式1// String str = new String() ;//var str1 = new String("hello") ;/*var str2 = new String("hello") ;document.write((str1==str2)+"<br/>") ;//在js中valueOf() 默认比较的是他们 的内容是否相同document.write(str1.valueOf()==str2.valueOf()+"") ;*///创建方式2//直接赋值的形式/*var s1 = "hello" ;var s2 = "hello" ;document.write(s1==s2+"") ;document.write(s1.valueOf()==s2.valueOf()) ;*///js中String对象 的常用方法//chatAt() :返回指定索引位置处的字符//indexOf():表示某个子字符串在当前字符串中第一次出现的索引//lastindexOf();//fontColor():给当前字符串设置一个颜色标记//substrint(start,end):截取功能9. //向上取整 //在整数位置+1 var num = 4.30 ; document.write(Math.ceil(num)+""); //向下取整 :如果有小数部分,将小数部分去除掉,保留整数位 document.write(Math.floor(num)+""); //四舍五入 document.write(Math.round(num)+""); //获随机数 random():包含0,但是不包含1 document.write(Math.random()*100+"") ; //max/min document.write(Math.max(num,100)) ; 10.function newDate(){ //生成一个系统时间的格式:2018-6-17 时:分:秒 //创建Date对象 var date = new Date() ; //dateStr就是系统时间 var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ; //获取span标签对象,通过id获取 var dateTip = document.getElementById("dateTip") ; //dateTip is null //设置span标签的innerHTML属性:文本属性 dateTip.innerHTML = dateStr;}//定时器//1)setInterval("任务",毫秒值) ; 每经过多少毫秒重复执行这个任务(函数)//2)timeout("任务",毫秒值) ;经过多少毫秒后执行一次这个任务window.setInterval("newDate()",1000) ;11.//如何创建一个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()+"日"+" ") ; //获取一天当中的小时 document.write(date.getHours()+":") ; //获取分 document.write(date.getSeconds()+":") ; //获取分钟的秒 document.write(date.getMinutes()) ;_____________________________________________________一:1. Array对象的创建方式 * * 注意事项: * 1)在js中,数组可以存储任意类型的元素! * 2)在js中,不存在数组角标越界一说,数组中的元素数量是可以不断的增加..不会出现异常! * */ //方式1:相当于动态初始化 //1.1 // var arr = new Array(3) ;
//1.2
// var arr = new Array() ; //表示0个长度
/*alert(arr.length) ; //给元素赋值 arr[0] = "hello" ; arr[1] = 100; arr[2] = true ; arr[3] = "world" ; alert(arr.length) ;*/ //1.3 直接指定数组中 具体元素
// var arr = new Array("hello",100,true,'a') ;
//方式2 :直接指定数组的元素,不需要new Array() ;类似于Java中数组的静态初始化; /*var arr = [10,"hello","world",true] ; //遍历数组 for(var i = 0 ; i < arr.length ;i++){ document.write(arr[i]+" ") ; }*/ /** * 两个方法 * join():将数组中的所有元素以一个符号进行拼接,返回一个新的字符串 * reverse 方法:将数组中的元素进行反转 js中的自定义对象 定义对象 1)相当于有参构造 的形式 2)无参构造的形式 function 自定义对象(Person) (参数名){ //定义属性 //定义方法 } 创建对象 var p = new Preson(实际参数) ; //输出对象p中的属性值 //调用对象p中的方法 3. 设计一个数组工具对象，例如ArrayUtil对象，该对象提供以下两个方法： search(array,target): 传入指定的数组和指定的字符串，返回指定字符串所在的位置 max(array): 传入指定的数组，返回该数组中的最大值-->//创建一个数组,静态初始化 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);问题:刚才使用的是自定义了一个对象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)原型属性是可以直接被内置对象调用然后追加方法//原理/定义了原型对象function Prototype(){ this.search = function(){ }}function Array(){ //创建原型对象 var prototype = new Prototype() ; //自动追加 this.search = function(){ }}--> <script type="text/javascript">
//使用内置对象的原型改进//给Array对象追加searchArray.prototype.search = function(target){ //遍历Array对象中的数组for(var i = 0 ; i< this.length ; i++){ //判断if(this[i] == target){ return i ;}}//找不到,返回-1return -1 ;}//内置对象的原型属性追加max() Array.prototype.max = function(){ //定义参照物 var max = this[0] ; //遍历其他元素 for(var i = 1 ; i < this.length; i++){ //判断 if(this[i] > max){ max = this[i] ; } } return max ;}创建一个数组,静态初始化var arr = [43,65,13,87,3,19] ; //var arr = new Array(43,65,13//) ;var index = arr.search(3) ;document.write("你要查找的元素的位置是:"+index+"") ;var max = arr.max() ;document.write("该数组中的最大值是:"+max) ;5. window对象:它代表浏览器的一个窗口对象 注意: 由于window对象中的方法频繁调用,所以为了简化书写方式,有时候window可以去掉 里面涉及的方法: open("打开资源文件url","以什么什么方式打开(_blank)/_self","指定新打开的窗口和高度") 和定时器相关的方法: setInterval("任务",时间毫秒值); 没经过多少毫秒后重复执行这个任务 clearInterval():取消和setInterval相关的任务 window.clearInterval(iIntervalID) :这个要插入一个Id setTimeout("任务",时间毫秒值); 经过多少毫秒后只执行一次 clearTimeout():取消和setTimeout相关的超时事件 和弹框相关的方法 window.alert("提示框") ; //window可以省略 window.confirm("消息对话框");有确认框,取消框 prompt:提示对话框，其中带有一条消息和一个输入框 --> <script type="text/javascript">
//触发open单击事件function testOpen(){ //调用open 方法 window.open("06.广告页面.html","_blank") ; } //和定时器相关的函数 //定义一个任务id var taskId ; function testSetInterval(){ //每经过2秒重复执行testOpen taskId = window.setInterval("testOpen()",2000) ; } //清除和setInterval相关的定时器 function testClearInterval(){ //调用功能 window.clearInterval(taskId) ; } //定位任务id var timeoutId ; //setTimeOut定时器 function testSetTimeout(){ //经过3秒后执行testOpen函数 timeoutId = window.setTimeout("testOpen()",3000) ; } function testClearTimeout(){ window.clearTimeout(timeoutId) } //alert的方法 function testAlert(){ // window.alert("今天天气不错....");
alert("今天天气不错....");}function testConfirm(){ //调用 var flag = window.confirm("确认删除吗?一旦删除,数据不可恢复!!") ; if(flag){ alert("数据已删除") }else{ alert("您取消了删除") ; } } //和确认提示框,有一条消息 function testPrompt(){ var flag = window.prompt("请您输入u顿密码!") ; if(flag){ alert("输入正确"); }else{ alert("请重新输入"); } }6. location对象: href属性:可以修改页面的href属性来实现页面跳转 更改的href属性:--- URL(统一资源定位符) URI 方法: 定时刷新:reload() --> <script type="text/javascript">
//loaction:地址栏对象 function testHref(){ // alert(window.location.href) ;
//修改location的href属性 window.location.href="06.广告页面.html" ; //location的 href属性 } function testRelod(){ //调用reload定时刷新 window.location.reload() ; } //定时刷新:reload() // function testRefresh(){
//定时器 window.setTimeout("testRelod()" ,1000) ; // }
7. history对象中的方法 forward:装入历史列表中下一个url back:装入历史列表中前一个url go(正整数或者负整数)
-->
<script type="text/javascript">function testForward(){ //调用功能 // window.history.forward() ;
window.history.go(1) ;}8.事件编程的分类: 1)和点击相关的事件 单击点击事件: onclick 双击点击事件: obdbclick 2)和焦点相关的事件 获取焦点事件:onfocus 失去焦点事件:onblur 3)和选项卡发生变化
-->
<script type="text/javascript">//和单击点击相关的函数 function testClick(){ alert("点了...") ; } //双击 function testDbClick(){ alert("你得双击...") ; } //获取焦点(在js中,一般情况如果要获取标签对象,最好的使用方式就是给它给一个id,id是唯一的) function testFocus(){ //通过id属性 var usrename = document.getElementById("username") ; //获取标签对象 username.value ="" ; } //失去焦点(鼠标光标从文本输入框中移出来) function testBlur(){ //获取用户在文本输入框中的内容 var username = document.getElementById("username").value ; //获取span标签对象 var nameTip = document.getElementById("nameTip") ; //如果输入的值不是"eric",就是提示用户名不符合规则 if(username =="eric"){ //给nameTip设置innerHTML属性 nameTip.innerHTML = "校验成功,符合规则".fontcolor("#00ff00") ; }else { nameTip.innerHTML ="用户名不符合规则".fontcolor("#ff0000"); } } 9. 转载于:https://blog.51cto.com/13677893/2131382