一:
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(变量)--><script type="text/javascript"> //定义一个变量 var a = "10" ; //string :里面的值10 document.write("转换前a的数据类型是:"+typeof(a)+"<br/>") ; //转换 a = parseInt(a) ; document.write("转换后a的数据类型是:"+typeof(a)+",值是:"+a) ; document.write("<hr/>") ; var b = "3.14" ; document.write("转换前b的数据类型是:"+typeof(b)+"<br/>"); //转换 b = parseFloat(b) ; document.write("转换后b的数据类型是:"+typeof(b)+",值是:"+b+"<br/") ; 4./** * 算术运算符:+,-,* ,/. * 比较运算符:>= ,<= ,<,>.. * 逻辑运算符:逻辑双与&&.逻辑双或||,逻辑非! * 三元运算符:表达式? true的结果:false的结果; * * * 注意:js中,true代表1,false代表0 */ /*var a = 10; var b = 20 ; document.write((a+true)+"<br/>") ; document.write(a-b) ;*/ /*var a = 10; var b = 20 ; document.write(a<=b) ;*/ /*document.write((false && true)+"<br/>") ; document.write((ftrue && true+)"<br/>") ;*/ /*document.write("<hr/>") ; var age = 12 ; document.write((age >= 18 ? "成年人": "未成年人")) ;*/ //流程语句 //if语句 /** * if(表达式){ * 语句1; * }else{ * 语句2; * } */ /** * 表达式的值: * 如果是numbler类型,(整数类型,小数),0表示条件不成立 * 如果是string类型,要么字符要么字符串,必须有数据,如果是空串,条件不成立 * 如果是boolean类型,true成立,false不成立 * 如果是object类型,必须有对象,否则如果是null */ //针对两个结果判断 if(null){ alert("条件成立") ; }else{ alert("条件不成立") } //js中的switch语句和 Java中的switch语句的区别 //js中的case后面也可以跟常量,还可以跟变量,还可以跟表达式 //java中case后面只能跟常量! /** * switch(表达式){ * case 值1: * 语句; * break ; * * ... * default: * 语句; * break ; * } 5.//witch语句:格式 witch(document){....} //将document对象当做witch语句参数,然后直接使用它里面的write() ; /** * //显示"*"形,第一行有一个... for(var i = 0 ; i<5; i++){//外层循环控制行数 for(var j= 0 ; j<=i; j ++){//内层循环控制列数 document.write("* ") ; // 空格 转义字符 } document.write("<br/>") ; } document.write("<hr/>") ; //table标签: 使用js里面嵌套表格标签// 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("<br/>") ; } write("<hr/>") ; for(var i = 1 ; i <=9 ; i++){ for(var j = 1 ; j <= i ;j++){ write(i+"*"+j+"="+(i*j)+" ") ; } write("<br/>") ; } } 6.//for-in:针对数组或者对象进行遍历 /** * for(var 遍历的变量名 in 数组名称/对象名称)//{ * 输出变量名 * } * * 如果是对象(js中的对象是一个重点)进行操作,那么这里变量名就是当前对象的属性7.函数的定义:
function 函数名称(形式参数列表)//{
//语句
}
函数的调用
函数名称(实际参数列表) ;
函数中的注意事项:
1)函数的形式参数不能有var关键字定义,否则报错
2)在js中函数是可以有return语句的,直接return,但是没有返回值
3)在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数
4)当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉!
5)在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)*/
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()+"<br/>") ;*///创建方式2//直接赋值的形式/*var s1 = "hello" ;var s2 = "hello" ;document.write(s1==s2+"<br/>") ;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)+"<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)) ; 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对象追加search
Array.prototype.search = function(target){
//遍历Array对象中的数组
for(var i = 0 ; i< this.length ; i++){
//判断
if(this[i] == target){
return i ;
}
}
//找不到,返回-1
return -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+"<br/>") ;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. <!-- 和选项卡发生变化相关的事件:onchange (下拉菜单,select标签) 和鼠标相关的事件: onmouseover:鼠标经过的事件 onmouseout:鼠标移出的事件 和页面加载相关的事件:onload 一般用在body 当body中的内容加载完毕之后就会触发这个事件 10.
随时随地看视频
