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

黑马程序员_javascript

2013-06-15 11:07 239 查看
JavaScript概述

JavaScript是基于对象和时间的脚步语言.主要应用在客户端.

特点:

1.交互性(他可以做的就是信息的动态交互)

2.安全性(不允许直接访问本地硬盘)

3.跨平台性(只要是可以解释JS的浏览器都可以执行.和平台无关)

-------------------------------------------

JavaScripet与java的不同

1.JS是Netscape公司的产品,前身是LiveScript;java是sun公司;现在是Oracle公司的产品

2.js是基于对象,java是面向对象.

3.js只需要解释就可以执行.java需要先编译成字节码,在执行.

4.js是弱类型.java是强类型.

-----------------------------------------------

JavaScript与Html的结合方式

想要将其他代码融入到html中,都是以标签的形式.

1.js代码存放到标签对<script>....</script>.

2.使用script标签的src属性引入一个js文件.(方便与以后维护和扩展)

列:<scritp src="text.js" type="javascript"></script>

注意:规范中script标签中必须假如type属性.

-------------------------------------------------

javascript的语法

每一种语言都有自己的语法规则,js的语法与java很像.所以学习起来比较容易,js中也一样

有变量语句,函数.数组等常见语言组成的元素.

1. 变量

通过关键字var来定义,弱类型就可以不用指定具体的数据类型.

示例: var x = 3; x="hello";

注意:js中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)

---------------------------------------------------

语句(与java语句格式相同)

判断结构(if)

注: var x=4;

if(x==4)

if(x=4)

示例:

var x = 3;
if(3=x)
alert("yes");
else
alert("no")


选择结构(switch)语句

循环结构(while语句 , do while语句, for语句)

示例:

while(x<3){
alert("x="+x);
x++;
}


注:不同的是.没有了具体数据类型的限制,使用时要注意.

练习:

打印一个99乘法表.用表格形式

table{
<!--让内线和外线重合-->
border-collapse:collapse;
<!--设置框的长度-->
width:600px;
}
table th{
<!--设置内框的颜色和宽度 还有可见度-->
border:#FF0000 1px solid;
}
</style>
</head>

<body>
!<--打印一个99乘法表-->
<script type="text/jscript">
<!--document相当于打印语句-->
document.write("<table>")
for(var x= 1 ; x<=9; x++){
document.write("<tr>");
for(var y= 1 ; y<=x ; y++){
document.write("<th>"+y+"*"+x+"="+x*y+"</th>")
}
document.write("</tr>")
}
document.write("</table>");


----------------------------------------------

javascript数组

方便与操作多元素的容器.可以对其中的元素进行编号

特点:可以存任意元素,长度是可变的.

格式:

var arr = new Array();
arr[0] = "hello";
arr[1] = 123;
var arr =['hello',123,true,"abc"]


---------------------------------------------

javascript函数

1.一般函数

格式

function 函数名字(形式参数...)

{

执行的语句

返回值

}

函数时多条执行语句的封装体.只有被调用才会被执行.

注意:调用有参数的函数,但是没有给期传值.韩式一样可以运行,或者调用没有参数的函数,

给其他传值,该韩式也一样运行,是有货的简单点:只要写了韩式名后面跟了一对小括号,

该韩式就会运行,那么传递的参数呢?

其实,在函数中有一个擦哪壶数组对象(arguments),该对象将传递的参数都封装在一个数组中

示例:

function demo()//定义函数
{
alert(argument.length);
}
demo("hello",123,true)//调用函数.

为了增强阅读性,最好按照规范,按定义好的形式参数传递实际参数.
韩式在调用时的其他写法:
var show = demo();//show变量接收demo函数的返回值.
var show = demo;//这种写法也是可以的.以为show和demo代表同一个函数.
//那么该函数也可以通过show()的方式运行.


2.动态函数

通过js\的内置对象function实现

示例:

var demo = new function("x,y;alert(x+y);");
demo(3,6);
如同:
function demo(x,y)
{
alert(x+y);
}
demo(4,6);


不同的是,动态函数,参数已经函数体都可以通过参数进行传递,可以动态指定/.

3.匿名函数

格式:function(){....}
示例:
var demo = function(){...}
demio();
通常在定义时间属性的行为时比较常用.
例如:
function test()
{
alert("load ok");
}
window.onload = test;
可以写成匿名函数的形式:
window.online = function()
{
alert("load ok")
}


------------------------------------------------------------

JavaScript 中的对象.

示例1:

function Pershon()
{
alert("load run")
}
var p = new Pershon();
p.name = "zhangsan";
p.age = 20;
p.chifan = function()
{
alert("吃饭");
}
p.chifan();


示例2:

function Person(nhame,age)
{
this.name = name;
this.age = age;
}
var p = new Person("孙百鑫",21);

alert(p.name+"..."p.age);
//第二种方式调用
alert(p.["name"]+"...."+p.age);


示例3:

要运行的html

<script type="text/jscript" src="Person.js"></script>
<script type="text/jscript">
alert(p.name+":"+p.age);
p.chifan();
alert(p.getName());


定义的person.js对象

// JavaScript Document

function Person(name,age)
{
this.name =name;
this.age = age;
}
var  p = new Person("lisi",20);

p.chifan = function()
{
alert("chifan");
}
p.getName = function()
{
return p.name;
}


示例4:

//需要导入定义好的对象
<script type="text/javascript" src="Arraytool.js"></script>

var arr = [3,6,4,9,7,10];
//将数组传入到定义好的方法中
var a = ArrayTool.getMax(arr);
//返回最大值
alert("max="+a);


js

// JavaScript Document

function ArrayTool(){};//这个相当于定义一个类

var Arraytool = new ArrayTool();//这个相当于实例化那个类

ArrayTool.getMax =function(arr)//也可以定义内部类
{
var max = arr[0];
for(var x = 1 ; x<arr.length; x++)
{
if(max<arr[x])
max = arr[x];
}
return max;
}

ArrayTool.getMax =getMax;//让定义的对象和方法产生关系
function getMax(arr)
{
var max = arr[0];
for(var x = 1 ; x<arr.length; x++)
{
if(max<arr[x])
max = arr[x];
}
return max;
}


------------------------------------------------

javascript 中的原型

原型是什么.简单一句话就是让一个对象本身具备了一些处理数据的方法

比如数组.的获取最大值最小值.原型的关键字是prototype

示例:

让数组的原型具备可以获取最小值的方法.

<script type="text/jscript" src="arrayutil.js"></script>//导入js文件
<script type="text/jscript">
var arr = [5,4,6,7,9,13];
alert("min="+arr.getMin());
</script>
//js中的代码
Array.prototype.getMin = function()
{
var min = this[0];
for(var x = 1; x<this.length; x++)
{
if(min>this[x])
min = this[x];
}
return min;
}


示例:

通过原型可以让对象之间产生父类关系.好比java中的继承.

<script type="text/jscript" >
function Person(name){//创建人的对象,相当于私有化一样
this.name = name;
}
Person.prototype.setName = function(name){//让人的原型就具备set方法类设置学生的名字.
this.name = name;
}
Person.prototype.getName = function(){//让人的原型具备get方法设置学生的名字.
return this.name;
}
var p = new Person("zhangsna");//创建父类对象
function Student(){};//建立学生类
Student.prototype = p;//让学生类的原型是Person.这样就相当于继承了.主要就是这句话.让两个对象之间有了关系.
var s = new Student();//创建学生对象.
s.setName("lisi");//就可以使用继承过来的setName方法来进行设置了
alert(s.getName());//显示在窗口上.
</script>


用子类也可以覆盖父类的参数.

<script type="text/jscript" >
function Animal(name){
this.name = name;
}
Animal.prototype.setName  = function(){
this.name = name;
}
Animal.prototype.getName = function(){
return this.name;
}
Animal.prototype.eat = function(){
alert("吃东西");
}
var animal = new Animal("动物");
function Cat(){};
Cat.prototype = animal;
Cat.prototype.eat = function()//相当于覆盖了父类的吃的方法
{
alert("吃鱼");
}
var cat = new Cat();
cat.eat();//调用吃的方法


-----------------------------------------------------------------------------------

javascript中的for in方法 和with语句

可以获取对象中的属性.也可以获取数组中的元素.

获取属性示例:

function Person(){
this.name = "张三";
this.get = 26;
this.getName = function(){
alert(name+"...."+age);
}
}
var p = new Person();
//alert(p["name"]);
for(x in p){
alert(x+":"+p[x]);
}


获取数组的元素示例:

var arr=[3,6,4,8,6];
for(x in arr)
{
alert(arr[x]);
}


with语句示例:

with(对象)
{
可以直径使用该对象的功能.
}
去定了该对象作用的范围,在繁重内,可以直接使用该对象的方法
var date  = new Date();
with(date){
alert(getYear()+"年"+(getMonth()+1)+"月"+getDate()+"日");
}
with(Math)
{
alert((random()))
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航