JavaScript基础知识

JavaScript基础

赋值用等于号 =

一些系统的方法，函数用括号 ()

定义变量

var x=1;

var y=‘xxx’;

var z; 无值变量，其实是undefined

var p=null; 其值为空。

h=‘asd’;

g=1;

如果一个变量在函数内部声明，那么他是局部变量。在函数外部声明，是全局变量。

如果一个变量没声明就赋值，那么会自动变成 全局变量。即使在函数内部也是全局。

定义数组

var cars=new Array();

cars[0]=‘1’;

cars[0]=‘2’;

cars[0]=‘3’;

或者

var cars=[‘1’,’2’,’3’];

定义对象

对象就类似于 类或者结构体的一个对象，具有多个属性。但是不是创建一个类或者结构体。只是一个对象。

使用方法是 person.firstname 或者 person[‘lastname’];

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

或者

var person={

firstname : "Bill",

lastname  : "Gates",

id        :  5566

};

创建 JavaScript 对象

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;

var x=      new Number;

var y=      new Boolean;

var cars=   new Array;

var person= new Object;

创建的时候需要在 类型后边加一个（）。new就跟c++或者java里的差不多一个意思。

字符串类型的数据具有一个属性 length

var text=‘asdasd’;

text.length的值就是6

如果一个属性具有某的方法，那就是  text.indexOf()

弹出消息

alert(“aasdasdasdasd”);

在文本流当中写元素

如果把document.write写在了函数里，那么会造成函数里的写入文档流的内容覆盖所有页面。

因为函数是在最后执行的。

document.write(‘ ’ + ‘ ’ + X);

每一个不同的元素 需要使用 双引号或者 单引号括起来。文本内容用’’括起来。但是一些变量的值，不用括起来。 每一个不同的元素之间需要用 加号+分割。

document.write(‘<p>aaaaaa</p>’);这样会输出一个p标签

document.write(‘<p>aaaaaa’+X+’</p>’);这样同样会输出一个p标签。标签可以放在不同的引号里。

获取某一元素的内容

x.innerHTML    可以输出或者改变其值等操作

x.innerHTML=“asdasdasd”改变值

通过id找HTML元素

var x=document.getElementById(“main”);

需要用引号括起来 名字

通过标签名找HTML元素

var y=document.getElementsByTagName(“p”);

需要用引号括起来 名字

查找某标签里的某id元素

<div id=‘main’>

<p></p><p></p>

</div>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

这就会查找ID为main里的元素中 标签是p的元素

document.write(‘’ + y[0].innerHTML +’’)

如果找到了多个标签为p的元素，那么就会形成一个数组。y{0]是选择第一个p。

查找到某一元素之后可以直接修改他的一些属性

x=document.getElementById("demo")  //找到元素

x.style.color="#ff0000";           //改变样式

调用函数,这个是写了一个onclick方法来调用函数

<button type=‘button’ οnclick=‘myFunction()’>调用函数</button>

预定义错误，抛出错误，接受错误的三个点。

<script>

function myFunction()

{

try

  {

  var x=document.getElementById("demo").value;

  if(x=="")    throw "empty";

  if(isNaN(x)) throw "not a number";

  if(x>10)     throw "too high";

  if(x<5)      throw "too low";

  }

catch(err)

  {

  var y=document.getElementById("mess");

  y.innerHTML="Error: " + err + ".";

  }

}

</script>

<h1>My First JavaScript</h1>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">

<button type="button" οnclick="myFunction()">Test Input</button>

<p id="mess"></p>

try里预定义了一些错误，throw抛出相应错误的对应信息。throw就是信息。会传递给catch.

throw就是error.

catch接收throw。并且可以输出。

Date() 函数里拥有着系统自定义的一些时间信息。

HTML支持的一些事件

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

点击鼠标 οnclick=“xxxx(this)”

this传入的带有onclick属性本身的这个元素

点击按钮，输出时间的例子。

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button οnclick="displayDate()">点击这里</button>

<script>

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

<p id="demo"></p>

其中，onclick属性可以写在 js代码里。

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点击这里</button>

<script>

document.getElementById("myBtn").οnclick=function(){displayDate()};

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

<p id="demo"></p>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onload_onunload

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onchange

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例：

http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmouseover_onmouseout

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例：

http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmousedown_onmouseup

onfocus

当输入字段获得焦点时

创建元素，并且将元素加到另外一个元素上。

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

例子解释：

这段代码创建新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

删除某一元素中的某一元素

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

例子解释：

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

使用函数来创建类似于 面向对象中的类或者结构体的概念，但是 不是类或者结构体。

因为JS基于prototype，不基于类

<script>

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");

</script>

—————————————————————————————————————————————————————

<script>

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

 

this.changeName=changeName;

function changeName(name)

{

this.lastname=name;

}

}

myMother=new person("Steve","Jobs",56,"green");

myMother.changeName("Ballmer");

document.write(myMother.lastname);

</script>

使用

for（x in 一个多属性对象）

{

txt=txt+一个多属性对象[x];

}//txt得到的是对象的属性值

来遍历某个对象的属性值

http://www.w3school.com.cn/tiy/t.asp?f=js_object_for_in

字符串的长度

var text=“hello world！”

text.length=12

字符串类型的各种方法

包括更改字体大小，颜色，大小写，变成链接等方法

http://www.w3school.com.cn/tiy/t.asp?f=jsrf_string_style

如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

var str="Hello world!"

document.write(str.indexOf("Hello") + "<br />")

document.write(str.indexOf("World") + "<br />")

document.write(str.indexOf("world"))

输出

0

-1

6

使用match()来查找字符串中是否含有某些特定字符，如果有，则返回这个特定字符来表示找到。

var str="Hello world!"

document.write(str.match("world") + "<br />")

document.write(str.match("World") + "<br />")

document.write(str.match("worlld") + "<br />")

document.write(str.match("world!"))

如何使用 replace() 方法在字符串中用某些字符替换另一些字符。

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

 JavaScript String 对象参考手册

date类

http://www.w3school.com.cn/js/js_obj_date.asp    

JavaScript Date 对象参考手册

返回当日的日期和时间

如何使用 Date() 方法获得当日的日期。

getTime()

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()

如何使用 setFullYear() 设置具体的日期。

toUTCString()

如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()

如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

如何显示 实时的时间，而且可以持续。显示一个钟表

 可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

var myDate=new Date() 

注释：Date 对象自动使用当前的日期和时间作为其初始值。

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()

myDate.setFullYear(2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()

myDate.setDate(myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

两个日期可以直接比较

if (myDate>today)

http://www.w3school.com.cn/js/js_obj_array.asp

数组的创建与输出

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (i=0;i<mycars.length;i++)

{

document.write(mycars[i] + "<br />")

}

通过 for(x in 数组) 来遍历数组中的每一个元素的值

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (a in mycars)

{

document.write(mycars[a] + "<br />")

}

一些运算哈数

round()

如何使用 round()。

random()

如何使用 random() 来返回 0 到 1 之间的随机数。

max()

如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

min()

如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）

关于JS Window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

document.write(“asd” + X)

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

location.href 属性返回当前页面的 URL。

location.pathname 属性返回 URL 的路径名。

location.assign() 方法加载新的文档。

history.back() 方法加载历史列表中的前一个 URL。

history forward() 方法加载历史列表中的下一个 URL。

实例

警告框

带有折行的警告框

确认框

提示框

其实就是一个 onclick() 事件调用一个函数，函数是 alert（）。

复杂一点的就是 确认与提示

确认是 需要 var r=confirm(“显示的内容”) ，会出现 确定  取消 两个按钮。然后点击确定 r为true 取消 r为false 。然后判断r的值为true或者false来 alert或者进行一些别的操作、

提示框是可以键入一个值的框 var name=prompt(“输入一点东西吧”，“默认值”) 然后也会有取消或者确定。 name的值就是输入的值，然后可以写一个判断name的值，alert 或者write一些东西

setTimeout(函数(),500)

每500毫秒执行一次函数

开始计时 停止计时的一个功能

带有停止按钮的无穷循环中的计时事件

在本例中，点击计数按钮后根据用户输入的数值开始倒计时，点击停止按钮停止计时。

循环输出也就是  递归原理 ,加上 setTimeout(本函数,时间);

 过一定时间再执行一次 这个函数。

这个例子也就是 给<input type="text" id="txt"> 他的value赋值来造成 计时的效果，每1000毫秒给他的值增加1。然后赋给他。赋给他之后他就能显示出来。

setTimeout()

未来的某时执行代码

clearTimeout()

取消setTimeout()

cookie以后再说