您的位置：首页 > Web前端 > JavaScript

JavaScript学习总结

2015-07-28 16:58 597 查看 
最近项目之中用到了JavaScript,稍微学了一下，先在总结如下：
IDE：WebStorm10.0.4

写了一些小例子，现在贴出来，做一个学习的记录，也方便自己以后查看。

最后的计算器那块的验证部分是错误的，现在还没有找到方法，等自己改好了只有再补上。

两个计算器的例子：

http://www.jb51.net/article/37610.htm


http://www.jb51.net/article/29295.htm




在代码里面每个部分的要实现的使用和操作都说明了，基本上对JS的基本功能做到了一个预览和了解。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<!--http-equiv="refresh" content="2"表示刷新，2s刷新一次。-->
<title>javascript测试</title>
<script language="JavaScript">
//--1--
/*基本的使用
var x=100;
var y=1000;
document.write("<h2>y:"+y+"是"+"x:"+x+"的"+y/x+"倍</h2>");
function sum(one,two)
{
var result=one+two;
return result;
}

var str1=prompt("输入一个表达式，给我计算","1+1");
var result=eval(str1);
document.write(str1+"="+result)
*/

//--2--
/*定义一个函数*/
/*
function doAdd()
{
if(arguments.length==1)
{
alert(arguments[0]+"你好，世界！");
}
else if(arguments.length==2)
{
alert(arguments[0]+arguments[1]);
}
}
doAdd(30);
doAdd(23,59);
doAdd(23,"dfdss");
*/

//--3--
/*将函数作为参数传递给其他函数*/
/*
var sayHello=new Function("sName","sMessage","alert('Hello'+sName+','+sMessage)");
function call_other_function(fn_call,vArg1,vArg2)
{
fn_call(vArg1,vArg2);

}
call_other_function(sayHello,"zhangsan","世界！");
alert(call_other_function.toString());
*/

//--4--
/*对象的使用和操作*/
/*
var my_array=new Array(5);
my_array[0]=1;
my_array[1]=3;
my_array[2]=5;
my_array[3]=6;
my_array[4]=112;

function show_data()
{
for(var x=0;x<my_array.length-1;x++)
{
document.write(my_array[x]+"\n"+"<br>");
alert(my_array[x]);
}
}
show_data();
*/

//--5--
/*Math对象和Date对象的使用
var today=new Date();
today.setFullYear(2015,8,13);
document.write(today.getFullYear()+"-"+today.getMonth()+"-"+today.getDate()+"<br>");

var i=100;
s=Math.round(Math.random()*8+1);
document.write(i+"<br>");
document.write(s+"<br>");
document.write(i/s+"<br>");
alert("i+s="+i+"+"+s+"="+(i+s));
*/

//this,指明了调用的对象
/*
var new_object =new Object();
new_object.color="red";
new_object.show_Color=function() {//定义的方法还是比较灵活的。
alert(this.color);
};
new_object.show_Color();
*/

//--6--
/*函数的调用*/
//document.write(typeof(8));number
//document.write(typeof('sdfs'));string
str1=document.getElementById("str1");
str2=document.getElementById("str2");
function add(str1,str2)//加法
{
if(typeof(str1)!="number")
{
alert("输入类型错误，无法计算！");
}
else
{
alert(str1+"与"+str2+"相加的结果是："+(str1+str2));
}
}
function sub(str1,str2)//减法
{
if(typeof(str1)!="number")
{
alert("输入类型错误，无法计算！");
}
else
{
alert(str1+"与"+str2+"相减的结果是："+(str1-str2));
}
}
function mul(str1,str2)//乘法
{
if(typeof(str1)!="number")
{
alert("输入类型错误，无法计算！");
}
else
{
alert(str1+"与"+str2+"相乘的结果是："+(str1*str2));
}
}
function div(str1,str2)//除法
{
if(typeof(str1)!="number")
{
alert("输入类型错误，无法计算！");
}
else
{
alert(str1+"与"+str2+"相除的结果是："+(str1/str2));
}
}

</script>
</head>
<body>
<p>计算器：</p>
<!--<input name="add" type="button" value="加法" onClick="sum(2,5)"/>-->
第一个数字：<input type="text" name="s1" id="str1">
<br>
<br>
第二个数字：<input type="text" name="s2" id="str2" width="600px">
<br>
<br>
  <input type="button" name="add"  value="+" onclick="add(str1,str2)" width="200px"/>  <input type="button" name="sub"  value="-" onclick="sub(str1,str2)">
   <input type="button" name="mul"  value="*" onclick="mul(str1,str2)"/>  <input type="button" name="div"  value="/" onclick="div(str1,str2)">
<!--现在一般使用input外加type=button 来表示按钮，而文本框的话，是使用type=text来表示的-->
</body>
</html>




PS：

javaScript的使用：两种方式：

1.


2.




3.常用的转义字符







                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航