------------------------------------------------------------------------------------------------------------------------------------------------------
第一天
---------------------------------------------------------------------------------------
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-in
for(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" οnclick="test();" />
<input type="button" name="" id="" value="测试function1" οnclick="test1();" />
<input type="button" name="" id="" value="测试function2" οnclick="test2();" />
<hr />
<h3>函数的传参</h3>
<input type="button" name="" id="" value="测试函数传参" οnclick="test_param(1,2);"/>
<hr />
<input type="button" name="" id="" value="测试函数的返回值" οnclick="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());//获取当前星期数，但是星期日是0
alert(d.getFullYear()+"----"+d.getYear());//获取当前年
alert(d.getHours());//当前时间的小时数
alert(d.getMinutes())//获取当前分钟数
alert(d.getMonth()+1)//获取当前月份，但是需要+1
alert(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对象" οnclick="test_date();"/>
<hr />
<input type="button" name="" id="" value="测试String对象" οnclick="test_str();"/>
<hr />
<input type="button" id="" value="测试Math对象" οnclick="test_math();" />
<hr />
<input type="button" id="" value="测试global" οnclick="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 οnlοad="test_onload();">
<h3>js的事件机制学习</h3>
<input type="button" id="" value="测试单击" οnclick="test_onClick();" />
<input type="button" id="" value="测试双击" οndblclick="test_ondbClick();" />
<input type="button" id="" value="测试单双击" οnclick="test_onClick();" οndblclick="test_ondbClick();"/>
<hr />
<div id="showdiv" οnmοuseοver="test_onmouseover();" οnmοuseοut="test_onmouserout();">
</div>
<div id="div01" οnmοusemοve="test_onmousemove();">
</div>
<hr />
测试onkeyup事件：<input type="text" name="" id="" value="" οnkeyup="test_onkeyup();" /><br /><br />
测试onkeydown事件：<input type="text" name="" id="" value="" οnkeydοwn="test_onkeydown();" />
<hr />
测试获取焦点事件：<input type="text" name="" id="" value="" οnfοcus="test_onfocus();"/>
测试失去焦点事件：<input type="text" name="" id="" value="" οnblur="test_onblur();"/>
<hr />
在input标签上使用onchange事件： <input type="text" name="" id="" value="" οnchange="test_onchange();" /><br /><br />
在select标签上使用onchage事件:<br /><br />
<select name="" id="" οnchange="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" οnmοusemοve="test_event(event)" style="border: solid 1px;width: 300px; height: 300px;">
</div>
<br /><br />
<input type="text" name="" id="" value="" οnkeydοwn="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" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="2" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="3" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="4" οnclick="test_jsq(this.value)"/><br />
<input type="button" name="" id="" value="+" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="-" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="C" οnclick="test_jsq(this.value)"/>
<input type="button" name="" id="" value="=" οnclick="test_jsq(this.value)"/>
</div>
</body>
</html>
扫一扫
04-07
2万+
2万+
09-11
300
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
