一: 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,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右) * */
-
//方式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):截取功能
-
//向上取整 //在整数位置+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()) ;
一:
-
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.
