简单的javascript学习01
来源：互联网 发布：百度关键字优化 编辑：程序博客网 时间：2024/05/16 12:20
------------------------------------------------------------------------------------------------------------------------------------------------------第一天---------------------------------------------------------------------------------------js的声明：内部声明：外部引入：<html><head><title>js的声明</title><meta charset="UTF-8"/><script type="text/javascript">/*在head标签中使用script声明js的代码域-----内部声明*//*js代码域*/alert("今天会不会下雨，会不会打雷");</script><!--在head标签中使用script还可以引入外部js文件,外部引入--><script src="../js/test.js" type="text/javascript" charset="utf-8"></script></head><body></body></html>-----------------------------------------------------------------------------------------<html><head><title>js变量声明学习</title><meta charset="UTF-8"/><script type="text/javascript">/* * js变量学习： 1、在js当中，变量的声明，只有关键字var。声明的变量可以接受任意类型的数据。 * 2、在js中，变量的声明是没有类型的，但是在使用的时候是有类型的。 * 类型有： * number:数值类型 * boolean:布尔类型 * string：字符类型 * object：对象类型 * 查看数据类型使用typeof * 特殊类型： * undefined:未定义，声明变量但是未赋值 * null：空 * NaN：not a number 不是一个数字 也是number类型 * * 总结： * 在js当中,变量在声明的时候是没有类型区分的，赋值的时候有类型。所以在使用的时候，我们需要对赋值的类型了然于胸 * * * */var a=1;var a1=2.2;//alert(typeof a1);var a3=true;//alert(typeof a3);var b="js的变量声明真简单";var b1='abcdefg';//alert(typeof b1);var c=new Date();//alert(typeof c);var d;//alert(d);var d1=null;//alert(d1);var d3="123a";alert(typeof Number(d3));</script></head><body></body></html>----------------------------------------------------------------------------------------------<html><head><title>js运算符学习</title><meta charset="UTF-8"/><script type="text/javascript">/* * js的运算符学习： 1、js中的运算符和java中是一致的 运算符 a++ 先运算后自增 ++a 先自增在运算 逻辑符 * == * != * && * `|| * ! * 2、于java相比较特殊的 * 双等==： * 在类型一致时，直接比较内容。 * 当类型不一致的时候，会使用Number()方法进行转换，然后再比较内容 * 三等=== * 先比较类型，如果类型不一致直接false，如果类型一致比较内容。 * * * */var a=3;var b=4;//alert(a+"+"+b+"="+(a+b));//alert(a++);//输出3，a的值变为4//alert(++a);//输出5//alert(a!=b);var a=3;var b="3";if(a==b){alert("a==b");}else if(a===b){alert("a===b");}</script></head><body></body></html>----------------------------------------------------------------------------------------------<html><head><title>js逻辑结构学习</title><meta charset="UTF-8"/><script type="text/javascript">/* js中的逻辑控制语句： 和java一致 判断if(){}else if(){}else{} * 选择 switch(expresion){case 1 ,case2……default} * * 循环： * for * while(){} * do{}while() * * * *//*判断*//*var a=3;if(a==3){alert("一波三折，好事多磨");}else if(a==4){alert("好坑。。。。。");}*//*for循环*/for(var i=1;i<=9;i++){for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+(i*j)+" ");}document.write("<br />");}</script></head><body><h3>js中的逻辑结构学习</h3><ol><li>和java一致</li><li>if 判断</li><li>switch选择</li><li>for循环</li><li>while循环</li><li>do while循环</li></ol></body></html>----------------------------------------------------------------------------------------------<html><head><title>js数组学习</title><meta charset="UTF-8"/><script type="text/javascript">/* js中的数组学习： 数组的声明3种方式： ①var arr=new Array(),此方式会创建一个空的数组。如果需要添加数据，直接进行角标添加，例如： arr[0]=1,arr[1]='a'.数据使用逗号隔开 ②var arr1=new Array(5),此方式会创建一个长度为5，但是没有数据的数组。 ③var arr2=new Array([1,2,'d','e']),此方式会创建一个带有传入的数据的数组，参数为数组 简写方式 var arr=[]; * 重要的属性： * length属性： * 通过此属性可以获取数组的长度，也可以动态的更改数组的长度 * alert(arr.length)---获取并输出数组的长度 * arr.length=5;-------改变数组的长度 * 遍历数组： * ①使用for循环 * ②使用for-in * * 数组的方法： * concat:数据和并,返回一个数组 * pop：删除数组的最后一个元素 * push：在数组后面追加一个元素 * shift：删除第一个元素 * unshift：在数组的开头位置添加元素 * join：以特殊字符隔开数组，返回一个字符串 * 总结： * 在js中的数组不单可以存储任意类型的数据，还可以动态的进行长度的更改 * * * *//*第一种声明方式*/var arr=new Array();arr[0]=2;arr[1]="a";//alert(arr);/*第二种声明方式*/var arr1=new Array(5);//alert(arr1);/*第三种声明方式*/var arr2=new Array([1,2,'a','kk','ll']);//alert(arr2);/*简写方式*/var arr3=[];var arr4=[1,2,4,'a'];//alert(arr4);/*重要的属性*/var arr5=[1,3,5,6,'a','b'];alert(arr5+"---修改前");alert(arr5.length);arr5.length=3;alert(arr5+"---修改后");arr5.length=8;alert(arr5);/*遍历数组*/var arr6=[1,2,3,4,5]//第一中遍历方式for(var i=0;i<arr6.length;i++){alert(arr6[i]);}//第二种方式 for-infor(var i in arr6){alert(arr6[i]);}</script></head><body><h3>数组学习</h3><pre>/*js中的数组学习： 数组的声明3种方式： ①var arr=new Array(),此方式会创建一个空的数组。如果需要添加数据，直接进行角标添加，例如： arr[0]=1,arr[1]='a'.数据使用逗号隔开 ②var arr1=new Array(5),此方式会创建一个长度为5，但是没有数据的数组。 ③var arr2=new Array([1,2,'d','e']),此方式会创建一个带有传入的数据的数组，参数为数组 简写方式 var arr=[];*/</pre></body></html>------------------------------------------------------------------------------------------------<html><head><title>js数组方法的学习</title><meta charset="UTF-8"/><script type="text/javascript">//数组的concat方法，合并数组，返回值是数组var a=[1,2,3,4];var b=['a','b'];var c="ccc";var d=a.concat(b,c)//alert(d);//数组的join方法，以特殊的字符隔开数组，返回值是字符串var arr=[1,2,3];var str=arr.join("-");//alert(str);//数组的pop方法a.pop()//alert(a);//数组的push方法a.push(9);//alert(a)//数组的unshift方法var t=a.unshift("zyp")//alert(a);alert(a.valueOf())</script></head><body></body></html>----------------------------------------------------------------------------------------------<html><head><title>js函数学习</title><meta charset="UTF-8"/><script type="text/javascript">/* * js中的函数学习： * 作用：将代码整体封装起来，可以进行重复调用，并且一个函数可以对应一个功能 * * 函数的声明： * ①function 函数名(形参){函数体} * ② var 函数名 =function(形参){函数体} * ③var 函数名=new Function("形参名","形参名".....,"函数体")-------在js中函数也是对象 * * 函数的使用： * ①函数的传参 * 在调用函数的时候进行参数的传递，但是实参个数和形参个数可以不一致，会按照形参顺序进行赋值 * ·②函数的返回值 * 在js当中如果函数有返回值则直接返回，如果没有则默认返回undefined * 函数之间的相互调用，直接在函数体中写被调用的函数名+(); * ③函数的执行符： * *//*函数的声明*///第一种function test(){alert("终于可以开主播了。。。。。。");}//第二种var test1=function(){alert("欢迎送鲜花。。。。。。");}//第三种（了解）var test2=new Function("a","b","alert('不知道幻城好不好看')");//函数的参数function test_param(a,b,c){alert(a+b);//alert(a+b+c);}//函数的返回值function testA(a,b){alert(a+b);//return a+b+'a';}function testB(a1,b1,c1){alert(a1+c1+b1)var c=testA(a1,b1);alert(c);return c;}function testC(x,y,z){testB(x,y,z);}</script></head><body><h3>函数的声明</h3><input type="button" name="" id="" value="测试function" onclick="test();" /><input type="button" name="" id="" value="测试function1" onclick="test1();" /><input type="button" name="" id="" value="测试function2" onclick="test2();" /><hr /><h3>函数的传参</h3><input type="button" name="" id="" value="测试函数传参" onclick="test_param(1,2);"/><hr /><input type="button" name="" id="" value="测试函数的返回值" onclick="testC(1,2,3)" /></body></html>-----------------------------------------------------------------------------------------------------------------------------------------------------------------第二天------------------------------------------------------------------------------------------------------<html><head><title>js常用的对象和方法</title><meta charset="UTF-8"/><script type="text/javascript">/* js常用对象和方法： 对象： Date getDate()--获取当前日号 getDay()--获取星期数，但是星期日是0 getFullYear()--获取当前年份 getYear()-----获取距离1900年的年份长度 getMonth()-----获取当前月份，但是需要+1 Math random()----0和1之间的随机数字，能取到0但是取不到1 round()-----将数字进行四舍五入 ceil()------向上取整 floor()-----向下取整 String length----获取字符串的长度 * indexOf()-----获取字符在字符串里面的角标 * split()--------按照指定的规则，切割字符串并返回数组 * subStr()-------从开始位置截取指定长度的字符串 * subString()-----从开始位置截取到指定位置的字符串，但是不包含尾 * 常用方法： * eval(str)-----将字符串转换成可以执行的js代码 * paseInt()-----取整 * pasefloat()---取字符串开头的浮点数 * js已学内容： * 1、js的介绍 * 2、js的变量 * 3、js的运算符 * 4、js的逻辑结构 * 5、js的数组 * 6、js的函数 * 7、js的 常用对象及方法 * * * * *//*date对象*/function test_date(){//创建data对象var d=new Date();//date对象的方法alert(d.getDate());//获取当前日号alert(d.getDay());//获取当前星期数，但是星期日是0alert(d.getFullYear()+"----"+d.getYear());//获取当前年alert(d.getHours());//当前时间的小时数alert(d.getMinutes())//获取当前分钟数alert(d.getMonth()+1)//获取当前月份，但是需要+1alert(d.toLocaleDateString());//获取当前日期}/*String 对象*/function test_str(){var str="abcd,efg";alert(str.length);//获取字符串的长度//substr从指定位置截取指定长度的字符串,substring从起始位置截取到结尾位置，但是不包含尾alert(str.substr(1,3)+"---"+str.substring(1,3));alert(str.indexOf("b"));//字符串spit切割，按照指定的方式进行切割字符串，返回数组var arrStr=str.split(",")for(var i in arrStr){alert(arrStr[i]);}//alert(arrStr);}/*Math对象*/function test_math(){var num=Math.random()*9000+1000;alert(num);alert(Math.round(3.5));//四舍五入取整alert(Math.ceil(5.2));//向上取整，如果本身参数就是一个整数，则直接返回alert(Math.floor(7.9))//向下取整，如果本身参数就是一个整数，则直接返回alert(Math.tan(Math.PI));}/*gobal对象常见方法*/function test_global(){//eval方法----将字符串转换成可执行的js代码var str="var a=4";eval(str);alert(a+3);//parseInt方法-----将数字的小数部分去掉，返回整数var num=Math.random()*9000+1000;alert(parseInt(num));//parsefloat方法var f="e1.2ade445567";alert(isNaN(parseFloat(f)));}</script></head><body><h3>常用的对象和方法</h3><input type="button" name="" id="" value="测试date对象" onclick="test_date();"/><hr /><input type="button" name="" id="" value="测试String对象" onclick="test_str();"/><hr /><input type="button" id="" value="测试Math对象" onclick="test_math();" /><hr /><input type="button" id="" value="测试global" onclick="test_global();" /></body></html>------------------------------------------------------------------------------------------<html><head><title>js的事件机制</title><meta charset="UTF-8"/><!--事件机制：所谓事件机制指的是当我们的行为和动作满足了一定的条件就会触发某段代码的执行常见的事件：点击事件：onclick--单击ondblclick--双击鼠标事件：onmouseover--鼠标悬停onmouuseout--鼠标移出onmousemove--鼠标移动键盘事件：onkeyup--键盘弹起onkeydown--键盘按下焦点事件：onfocus--获取焦点onblur---失去焦点页面加载事件：onload--页面加载总结：对于我们的js监听机制来说，每个事件其实监听的是一个js的功能函数注意：①一个标签可以写多个监听事件②事件与事件之间是存在相互干扰的③要给合适的标签选择合适的事件--><script type="text/javascript">//单击事件function test_onClick(){alert("点我就爆炸。。。。。");}//双击事件function test_ondbClick(){alert("照顾好孩子，别管我。。。。。快跑");}//鼠标事件function test_onmouseover(){alert("老板，加个会员。。。。");}function test_onmouserout(){alert("太贵了，不办。。。。");}function test_onmousemove(){alert("别动，再动就炸了");}//键盘事件function test_onkeyup(){alert("别浪，猥琐发育。。。");}function test_onkeydown(){alert("有人偷龙。。");}//焦点事件：function test_onfocus(){alert("dota毁一生。。。。");}function test_onblur(){alert("两个人有两个快乐，交换一下就会四个");}//页面加载事件function test_onload(){alert("欢迎访问本网站，包月10元");}//onchange事件function test_onchange(){alert("从入世，我被改变了，变得越来越逗了。。");}</script><style type="text/css">#showdiv{border: solid 2px;width: 300px;height: 150px;color: red;margin-bottom: 10px;}#div01{border: solid 2px;width: 300px;height: 150px;color: blueviolet;}input{border: solid 2px;}</style></head><body onload="test_onload();"><h3>js的事件机制学习</h3><input type="button" id="" value="测试单击" onclick="test_onClick();" /><input type="button" id="" value="测试双击" ondblclick="test_ondbClick();" /><input type="button" id="" value="测试单双击" onclick="test_onClick();" ondblclick="test_ondbClick();"/><hr /><div id="showdiv" onmouseover="test_onmouseover();" onmouseout="test_onmouserout();"></div><div id="div01" onmousemove="test_onmousemove();"></div><hr />测试onkeyup事件：<input type="text" name="" id="" value="" onkeyup="test_onkeyup();" /><br /><br />测试onkeydown事件：<input type="text" name="" id="" value="" onkeydown="test_onkeydown();" /><hr />测试获取焦点事件：<input type="text" name="" id="" value="" onfocus="test_onfocus();"/> 测试失去焦点事件：<input type="text" name="" id="" value="" onblur="test_onblur();"/> <hr /> 在input标签上使用onchange事件： <input type="text" name="" id="" value="" onchange="test_onchange();" /><br /><br />在select标签上使用onchage事件:<br /><br /><select name="" id="" onchange="test_onchange();"><option value="">连连看</option><option value="">消消乐</option><option value="">刮刮乐</option></select></body></html>---------------------------------------------------------------------------------------------------------------<html><head><title>js的event对象学习</title><meta charset="UTF-8"/><!--event对象存在浏览器差异的问题，此问题和我们没有关系，是浏览器厂商之间的竞争造成的。差异问题解决：ie:var eve=event横坐标:eve.x纵坐标:eve.y火狐:var eve=window.event横坐标：eve.pageX;纵坐标:eve.pageY;结合写法：var eve= event || window.event;var x=eve.x || eve.pageX;var y=eve.y || eve.pageY;1、使用event对象获取鼠标的坐标值2、使用event对象获取键盘值var eve=event || window.event;var code=eve.keyCode;--><script type="text/javascript">//获取鼠标的坐标function test_event(event){var eve= event || window.event;var x=eve.x || eve.pageX;var y=eve.y || eve.pageY;alert(x+":"+y);}//获取键盘值function test_keyCode(event){var eve=event || window.event;var code=eve.keyCode;alert(code);}</script></head><body><h3>js中的event对象学习</h3><div id="showdiv" onmousemove="test_event(event)" style="border: solid 1px;width: 300px; height: 300px;"></div><br /><br /><input type="text" name="" id="" value="" onkeydown="test_keyCode(event);"/></body></html>------------------------------------------------------------------------------------------<html><head><title>计算器练习</title><meta charset="UTF-8"/><script type="text/javascript">function test_jsq(num){var data=document.getElementById("data");switch(num){case"=":if(data.value.length>0){var r=eval(data.value);data.value=r;}break;case"C":data.value="";break;default:data.value+=num;}}</script><style type="text/css">input{height: 60px;width: 60px;margin: 5px;}#data{border: solid 1px;width: 285px;height: 30px;}#showdiv{border: solid 1px;width: 300px;}</style></head><body><div id="showdiv"><input type="text" name="" id="data" value="" /><br /><input type="button" name="" id="" value="1" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="2" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="3" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="4" onclick="test_jsq(this.value)"/><br /><input type="button" name="" id="" value="+" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="-" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="C" onclick="test_jsq(this.value)"/><input type="button" name="" id="" value="=" onclick="test_jsq(this.value)"/></div></body></html> 0 0
- 简单的javascript学习01
- javascript的简单学习
- 简单的javascript学习02
- 简单的javascript学习03
- Javascript函数的简单学习
- javaScript中闭包(closures) 的简单学习
- JavaScript学习之简单的放大镜
- JavaScript学习之简单的计算器
- Javascript中String对象的的简单学习
- Javascript中DOM技术的的简单学习
- (学习笔记)简单正则表达式的使用实例[javascript]
- javascript学习之简单实现jquery的$("div").text()。
- javascript学习笔记—简单的动态选择收件人/联系人
- CSS学习笔记----一个简单的menu（javascript）
- JavaScript学习笔记38-简单的表单验证
- javascript学习二： 简单对象
- javascript简单特效，js学习
- Javascript学习-简单测试环境
- system（pause）
- FFmpeg 参数详解(一)
- 十进制0到16转为二进制
- shared_from_this()
- require.js学习笔记
- 简单的javascript学习01
- java多线程连续打印字母数字问题
- C语言获取系统当前时间
- 学习记录5:主席树
- POJ3126-Prime Path
- C#控制台基础 使用arraylist的命名空间
- 直方图均衡化实现
- leetcode No91. Decode Ways
- 设计模式-行为型-命令模式（Command）
