当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一篇简单学习Javascript的学习笔记

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记(十一)
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十三)Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

一篇简单学习Javascript的学习笔记


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 179 ::
收藏到网摘: n/a

我一般看书喜欢做笔记,这份笔记不知道是什么时候看的什么书做的,也忘了是否是摘自其他地方,总之一份汇总,应该适合初学者,对于Javascript我并不是很精通,而且也不太喜欢自己写,相对比较而言更喜欢As一点,倒并不是因为JS难,只是我想网上应用的JS效果实在太多太多,更多的时候我喜欢修改。

 一、在页面中怎么添加javascript
  <script language=”javascript”>   //这行是javascript脚本标记,斜杠后面的就是注释了
  document.write(”在页面显示的javascript”) //在页面显示一句话
  </script>
/*这也是注释*/

二、javascript的数据类型
1、字符串(string):字符串就是由一连串的字符组成的序列。包括字母、数字以及标点符号。当然还可以是汉字等。简单一点就是表示文本信息。

2、数字(number):数字又分为两类:整型数字和浮点型数字。
    整数包括正整数,零和负整数。
    javascript中的数字可以使用十进制、八进制和十六进制来书写。方法如下:
    十进制:15(直接写数字即可)
    八进制:017(要以零做为引导数字)
    十六进制:0xf(要以0x做为引导数字)
    浮点型数字也叫实数,为了方便,也可以使用科学记数法来表示:
    1.13e1、1.5e3(等价于1.5乘10的3次方)
    javascript的数字范围大约为10的负308次方到10的308次方之间。
    javascript中还有一个特殊的数字值NaN(not a number),javascript 用nan表示这个无意义的结果。

3、布尔值(boolean):true和false,在计算机中一般用1表示true,用0表示false。

三、alert()方法的使用:
  <script language=”javascript”>
  alert(”在页面上显示警告对话框”);
  </script>
  alert()是javascript产生一个带确认按钮的对话框,上面显示括号内的信息。

四、confirm()方法的使用:
  <script language=”javascript”>
  confirm(”在页面上显示确认对话框”);
  </script>
  confirm()和alert()差不多,不同的就是多了个取消按钮。按确定返回true,按取消返回false。
  <script language=”javascript”>
  var con;
  con=confirm(”你们喜欢这样的教程吗?”);
  if (con==true) alert(”喜欢”);
  else alert(”不喜欢”);
  </script>

五、prompt()方法的使用:
  <script language=”javascript”>
    var name,age;
    name=prompt(”请问您的名字?”);
    alert(name);
    age=prompt(”多大?”);
    alert(age);
   </script>
    它不但可以显示信息,而且可以输入信息。

六、javascript变量
    用var加上为变量指定的名称来声明变量,变量类型可以通过给变量赋值来确定。由于javascript采用的是弱类型的样式,对数据类型要求不太严格,在程序执行的过程中,会根据需要自动转换。
字符串变量,可以通过“变量名.length”来获得该变量中字符串的长度,如
    var name;
    name=”javascript”;
    那么name.length的值就是10。
    若在一行中创建多个变量时,记住用逗号来隔开变量名。各语句用分号隔开。(使用分号是个好习惯, 大家在学习的时候尽量养成加分号的习惯)
    类型转换:javascript允许在程序中改变变量的类型,最常见的两个类型转换符Number和String。
    Number(x)是字符型值——〉数字值型。String与之相反。相对于javascript的自动类型转换,可以将这种转换成为强制类型转换。(强制类型转换需要在javascript1.2及以上版本才可以使用)

变量的命名:
1.必须以字母或下划线开头,中间可以有字母数字和或下划线。不能使用空格、+、-等其他符号。
    作为连字符外,变量名称不能有空格、(+)、(-)、(,)或其它符号。
2.不能使用JavaScript中的关键字作为变量。
  (javascript变量名是区分大小写的,name和Name是不一样的。)

对于变量还有一个重要性──那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外,其作用范围是整个函数;而局部变量是定义在函数体之内,只对其该函数是可见的,而对其它函数则是不可见的。
如果局部变量和全局变量重名,则局部变量优先。js没有块级作用域。函数中声明的所有的变量,作用域是相同的。

变量的类型规则
javascript是无类型的,他的变量可以放任何数据类型的值。
变量的声明
在javascript程序中,在使用变量之前,必须先声明它。变量是使用关键字var声明的。而实际上,不一定要先声明变量,在某些情况下,变量声明是可选的。
    var i;
    var sum;
也可以使用一个var关键字声明多个变量;
    var i,sum;
而且还可以将变量声明和变量初始化绑定在一起:
    var message = ‘hello’;
    var i = 0,j=0,k=0;
    由var声明的变量是永久的,因为各浏览器对是否可以删除全局性的变量的态度是不同的,(都可以删除局部变量)为了安全,最好假设全局变量不可删除。
    可以使用var多次声明同一个变量,当你给一个没有声明的变量赋值时,js会自动用哪个变量为你创建一个全局变量。如果你想在函数内部创建一个局部变量。那就必须用var在函数内部声明。

七、javascript表达式和运算符
表达式:在定义完变量后,就可以对它们进行赋值、改变、计算等一系列操作,这一过程通常由表达式来完成,可以说它是变量、常量、布尔及运算符的集合,因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。
1.算术运算符:+(加) 、-(减)、 *(乘)、 /(除)、 %(取模) -(取反)、++(递加1)、–(递减1)。
例:11%2=1 ; 如果x=2   ++x+4=7     x+++4=6(++x是先执行加1,x++是执行完语句之后x在自加1)
例子:
<script>
var i=0, j=0;
alert(i++ + ” ” + ++j + ” ” + i);
// 输出 “0 1 1”,可见i++是先输出了i,然后进行运算,而++j是先对j进行了自加运算,然后输出j的值
</script>
2.比较运算符:<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)
               (基本操作过程是,首先对它的操作数进行比较,然后再返回一个true或False值。)
3.逻辑运算符:!(取反)、&=(与之后赋值)、 &(逻辑与)、 |=(或之后赋值)、 |(逻辑或)、^=(异或之后赋值)、 ^(逻辑异或)、 ?:(三目操作符)、||(或)、&& (与)==(等于)、|=(不等于)。
4.字符串运算符:只有+   (”my“+”javascript“结果等于”my javascript“)
5.赋值运算符:即=,将右边的值赋给左边的变量。
6.条件运算符:(?:)例:status=(age>=18)?”adult”:”child”;如果大于18,则表达式的值为adult。
7.typeof()运算符:用来返回变量或数据的类型。

八、IF语句。
if (条件)
语句段1
else
语句段2
功能:若表达式为true,则执行语句段1;否则执行语句段2。
说明:
if -else 语句是JavaScript中最基本的控制语句,通过它可以改变语句的执行顺序。
表达式中必须使用关系语句,来实现判断,它是作为一个布尔值来估算的。
它将零和非零的数分别转化成false和true。
若if后的语句有多行,则必须使用花括号将其括起来。

九、window.com()的用法
1、基本语法
  window.open(pageURL,name,parameters)
  其中:
    pageURL 为子窗口路径
    name 为子窗口句柄
    parameters 为窗口参数(各参数用逗号分隔)
2. 窗口参数
   其中yes/no也可使用1/0; value为具体的数值,单位象素。
   toolbar=yes,no 是否显示工具条
   location=yes,no 是否显示网址栏
   directories=yes,no 是否显示导航条
   status=yes,no 是否显示状态条
   menubar=yes,no 是否显示菜单
   scrollbars=yes,no 是否显示滚动条
   resizable=yes,no 是否可以改变公告窗口大小
   copyhistory=yes,no 是否显示历史按钮
   width=value 公告窗口的宽
   height=value 公告窗口的高
   left=value 公告窗口的左上顶点距屏幕左边100像素
   top=value 公告窗口的左上顶点距屏幕顶端100像素
例:
<script language=”javascript”>
<!–
window.open(”00000.html”,”newwindow”,”toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,left=100,top=100″)  //–>
</script>

十、for循环。另外就是数据类型。既for  in
将字符串转换为数值:
javascript语言提供两个内置函数将表示数值的字符串转换为真实的数值:parseInt()和parseFloat()。
为了使用这些函数,需要将进行转换的字符串作为参数传入函数,例:
    parseInt(”42″)     //result=42
    parseInt(”42.33″)   //result=42
不过是浮点数还是整数,函数返回的值都是整数。不存在四舍五入,小数点和它后面的数字将被舍弃。
而parseFloat()则返回浮点数(如果是整数就返回整数),例:
    parseFloat(”42″)   //result=42
    parseFloat(”42.33″) //result=42.33
如果在某处需要进行字符串的转换,只需将函数插入该初即可。如:
    3+3+parseInt(”3″)   //result=9

将数值转换为字符串:
虽然当遇到表达式中含有混合数据类型时,js会倾向于字符串。但为了防止潜在的问题发生,最好先转换以下。在数值中加入空字符串就可以把数值转换为字符串了:
(”"+2500)         //result=”2500″
(”"+2500).length   //result=4

For循环:
javascript中最常用的循环结构称之为for循环,关键词放在循环结构的开始位置。正式语法结构如下:
for ([initial expression];[condition];[update expression]){
  statement[s] inside loop
}
例:
for(var i=0;i<9;i++)
{
n+=i
myfunc(n)
}
for…in循环:
这个语句完全依照变量var所设定的值决定运行次数。你可以用for…in语句在一个对象或一个数组上建立循环
for(var in [obj | array])
{
statements
}
例:
<script language=”javascript”>
document.write(”The properties of the document object”)
for(var element in document){
document.write(element+”=”+document[element])
}
</script>

十一、鼠标事件
主要内容就是基于鼠标的事件,有如下几种:
1.mouseover(鼠标移至)
2.mouseout(鼠标移出)
3.mousemove(鼠标移动)
4.mousedown(鼠标按下)
5.mouseup(鼠标弹起)
6.click(单击)
7.dblclick(双击)
例子:
<html>
<head>
<title>test</title>
<script language=”javascript”>
function text_onmouseover(){
mytext.style.fontSize=”30pt”;
mytext.style.color=”red”;
mytext.style.fontStyle=”italic”;
}
function text_onmouseout(){
mytext.style.fontSize=”20pt”;
mytext.style.color=”blue”;
mytext.style.fontStyle=”normal”;
}
</script>
</head>
<body>
<p id=mytext onmouseover=”text_onmouseover()” onmouseout=”text_onmouseout()”>http://www.javascript.com.cn</p>
<p>看看字体样式有什么变化</p>
</body>
</html>
8.mouseDown事件和mouseUp事件
    大家知道,mouseDown事件和mouseUp事件的组合就是click事件,但是如果在链接上按下鼠标,并移到链接之外在放开鼠标,那么就只有mouseDown事件了。这两个事件可以增加图标按钮的图像效果,
    至于mouseDown和mouseUp的属性,它们是伴随着Click事件发生的,这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的,这3个鼠标事件也有modifier属性。
    (注意:如果在onClick事件处理中使用return语句,它可以接收任何数值。只要这个值不是False,浏览器就可以完成提交。但如果浏览器得到的是False值,表单提交操作就会被取消。)
9.Click事件和dbClick事件
    onClick是单击事件,onDblClick是双击事件,而实际上很难分清连续的单击和双击。它们会互相干扰。而且在ie和其他浏览器的情况还有不同。有的浏览器是双击事件的每一次单击都会触发单击事件,而在ie中,只有双击事件的第一次单击会触发单击事件。不管怎么样,单击事件都不会自动的取消或被忽略。因此,如果想使用单击和双击一个链接时触发两个完全不同的过程,则必须通过编程来延迟单击的动作知道双击。
<script>
var timer=null;
document.onclick=new Function(”timer=setTimeout(click,500)”)
document.ondblclick=new Function(”clearTimeout(timer);dblclick()”)
function click(){
alert(”click”)
}
function dblclick(){
alert(”dblclick”)
}
</script>

十二、javascript函数.
函数是有function加函数名和一对带有参数括号,以及大括号组成的,其中大括号里是主体javascript语句.
例:
function hanshuname(js) //hanshuname是函数名.
{
document.write(js,”<br>”); //是函数的主体语句.
}
函数可以嵌套,如下:
function qiantao(a,b){
function lqiantao(x){return x*x;}
return Math.sqrt(lqiantao(a)+lqiantao(b));
}
函数还可以作为数据来应用,因此可以象处理其他数据那样来处理函数,如:赋值,存储,传递等.
例:
    function zhi(x){return x*x;}
实际上,函数名没有什么意义,不过是保存函数的变量名而已.
    a=zhi(6);//a存放的是数字36;
    b=zhi;//现在b和zhi引用同一个函数.
    c=b(5);//c存放的是数字25.
在一个函数体内,标识符arguments总是具有特殊含义,它是调用对象的一个特殊属性,用来引用实际参数对象.这个实际参数对象具有大量有用的属性.除此之外,它还兼有数组的角色.
尽管定义javascript函数时都有固定的参数,但调用这个函数时,传递给它的参数数目却可以是任意的,数组arguments[]允许完全存取那些实际参数值.另外,arguments有一个length属性,看如下例子:
    function zhi(x,y,z)
    {
    if(arguments.length !=3){
    alert(”function zhi called with”+arguments.length+”arguments,but it expects 3 arguments.”);
    return null;
    }
    }
数组arguments[ ]还为javascript函数开发了一项重要的可能性,既可以将函数编写为能够接受任意数目的实际参数.
    function zhi()
    {
    var m=Number.NEGATIVE_INFINITY;
    //遍历所有参数
    //检索并记忆最大的一个.
    for(var i=0;i<arguments.length;i++)
    if(arguments>m)m=arguments;
    //返回最大的参数值.
    return m;
    }
    var lazgest=zhi(1,10,100,2,3,1000,4,5,10000,6);
    也可以使用arguments[]数组来编写一个函数.

    调用js函数
    <a href=”#” onClick=”functionName()”>Link text</a>
    <a href=”javascript:functionName()”>Link text</a>