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

2016-02-20 00:54 16 1 收藏

有了下面这个一篇简单学习Javascript的学习笔记教程,不懂一篇简单学习Javascript的学习笔记的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

我一般看书喜欢做笔记,这份笔记不知道是什么时候看的什么书做的,也忘了是否是摘自其他地方,总之一份汇总,应该适合初学者,对于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产生一个带确认按钮的对话框,上面显示括号内的信息。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

四、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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

For循环:
javascript中最常用的循环结构称之为for循环,关键词放在循环结构的开始位置。正式语法结构如下:
for ([initial expression];[condition];[update expression]){
  statement[s] inside loop
}
例:
for(var i=0;i9;i++)
{
n+=i
myfunc(n)
}
forin循环:
这个语句完全依照变量var所设定的值决定运行次数。你可以用forin语句在一个对象或一个数组上建立循环
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
titletest/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;iarguments.length;i++)
    if(argumentsm)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

来源:http://www.tulaoshi.com/n/20160220/1632788.html

延伸阅读
标签: Web开发
jquery基本信息 jquery的官方网站: www.jquery.com jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发。 jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html 前台数据提交到后台demo: 实例图: 功能点: 1....
标签: Web开发
学过C语言的人,对此应该熟悉,完全是一样的,一个简单的while循环例子: 简单的while循环 html head title简单的while循环例子/title script language="javascript" !--hide me var password="tograce"; var answer; while (answer!=password) {   answer=prompt("input the password(tograce)",""); } //show me-- /script /head body...
标签: ASP
  其实就是SDK里的文档,只不过看的时候翻译了部分知识点出来。因为我的习惯是 记在纸上,一共可写完了两只圆珠笔啊,5555~~~ 一、Geting Started 。高性能,ASP+被编译成NGWS运行时代码,早帮定,JIT编译,缓存技术 。开发工具支持,WYSIWYG的编辑环境 。强大而灵活,基于NGWS运行时环境,丰富的支持库,消息机制,数据访问,语言 无关...
标签: Web开发
创建一个对象 Java代码 script type="text/javaScript" var newObject=new Object(); //创建一个对象newObject.firstName="frank";//增加一个firstName属性newObject.sayName=function(){alert(this.firstName);} //添加一个sayName方法//调用sayName方法//newObject.sayName();//newObject["sayName"](...
标签: Web开发
今天看了XMLHttpRequest 的属性: onreadystatechange //当改变状态时都会触发这个事件,通常会调用 JavaScript 函数. //状态有5个值:  0:未初始化.   1:正在加载.   2:已加载.    3:交互中.   4:完成. responseTest //服务器的响应,表示为一个串. responseXML  //服务器的响应,...

经验教程

579

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部