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

HTML_03(javaScript(01))

2012-09-16 22:30 351 查看

一. Js和html结合的方式:

二.

1,将javaScript代码封装到<script>标签中.

2,将javaScript代码封装到js文件中,并且通过<script>中的src属性进行导入..

需要注意的:

a:导入的语句是会自动执行的

b:可以导入多个

c:script标签最好写在body标签里面

三. javaScript的语法:

四.

通常高级程序设计语言所包含的语法内容:

1,关键字:该种语言中被赋予了特殊含义的单词.

2,标识符:用于标识数据和表达式的符号,通过可以理解为在程序中自定义的名字,比如变量名,函数名.

3,注释:注释说明解释程序,用于调试程序.

4,变量:用于标识内存中的一片空间,用于存储数据,该变量中的数据是可以变化的.

5,运算符:可以让数据进行运算.

6,语句:用于对程序的运行流程进行控制的表达式.

7,函数:对于功能代码的封装,使代码有更好的阅读性,

8,数组:是存储数据的一个容器,可以对多个数据进行存储.

9,对象:只要是基于对象的语言,或者是面向对象的语言,就存在对象的概念,对象只是一个封装体.既可以封装数据也可以封装函数.

以上内容都是高级语言所共同拥有的特性,只不过各种语言对这些内容的表现形式不同而已.

<script type="text/javascript">
var  a = 234;
var b = "45";
var d = true;
var e = "您好";
var f = '哈哈';
alert(b+"---"+d+"---"+"----"+e+"----"+f);
</script>

三.运算符

1,算术运算符.

+ - * / % ++ --

2,赋值运算符

= += -= *= /= %=

3,比较运算符:运算的结果要不是false就是true

 < >= <= != ==

4,逻辑运算符

! && ||

5,位运算符

& | ^ >> << >>>

6,三元运算符

? :

小细节:

A):undefined:未定义,其实就是一个常量..

B):要想获取具体值的类型,可以通过typeof来完成

var y ;
alert(y==undefined);//说明:如果没有被定义,里面是一个常量.
*/
var a = '2';
var b = 32.2;
var c = 23;
var d = true;
alert(typeof(a)+"----"+typeof(b)+"----"+typeof(c)+"-----"+typeof(d));//这个可以用来测试一个类型.

总体代码显示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<script type="text/javascript">
/*
var x = 3712;
var y = x/1000*1000;  //类型为Number 小数类型
//		alert(y);
//alert("12"+1);//与字符集连接会自动拼接
//alert("12"-1);//11 有一个自动转换
alert(true+1); //在js里面.true为1,false为零.
var n = 9;
n--;
alert(n);//先赋值.后运算/所以结果为8

var i = 3;
i+=5; //i= i+5;
alert(i);

var z = 3;
alert(z!=4); //true

alert(z>2&&z<5);//true
alert(!false);

var x = 3>5?"大于":"小于";
alert(x);

var y ;
alert(y==undefined);//说明:如果没有被定义,里面是一个常量.
*/
var a = '2';
var b = 32.2;
var c = 23;
var d = true;
alert(typeof(a)+"----"+typeof(b)+"----"+typeof(c)+"-----"+typeof(d));

</script>
</body>
</html>

四.语句

1,顺序结构

2,判断语句

3,选择语句

4,循环语句

5,其他语句

Break:跳出当前的循环

Countine:跳过本次循环.

五.数组

特点:

1,长度是可变的

2,元素的类型是任意的.

Js中的数组定义的两种方式:

Var arr = new Array();//数组

Var arr = [12,34,54,55];

Var arr = [5];//定义长度为5

代码:

<script type="text/javascript">
/*
var arr = [23,44,"您好",true];
for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
}
*/
var arr = new Array();
arr[0] = "33";
arr[6] = 8;
for(var x=0 ; x<arr.length; x++)
{
alert(arr[x]);  //未定义的内容出来啦
}
</script>

六.js函数的表现形式:

动态函数:使用的是js中内置的一个对象Function.

原理: 其实就是创建了一个动态的函数.函数名为Add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
/*
var add = new Function("a,b","var sum; sum=a+b; return sum;");
var sum = add(23,4);
*/

//当您如果这样打印.会打印它的地址..相当于直接打印了toString(java 比喻)
var sum =  function()
{
return 10;
}
var num = sum();
alert(num);

var xixi = function()
{
alert("haha");
}
xixi();

</script>
</body>
</html>

函数再次补充:

1,函数:就是对功能实现封装.

定义功能通常需要两个明确.

1,功能的结果.

2,功能的实现中参与运算的未知内容.

Js中定义函数的格式

3,参数没有类型的.

Function show(a,b)

{

函数体

Return 10;//如果没有返回值,这个return语句可以不写.

}

演示代码:

<body>
<script type="text/javascript">
/*
var arr = [23,44,"您好",true];
for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
}
*/
/*
var arr = new Array();
arr[0] = "33";
arr[6] = 8;
for(var x=0 ; x<arr.length; x++)
{
alert(arr[x]);  //未定义的内容出来啦
}
*/
function show()
{
alert("hello");
}
show();

var happy = function()
{
alert("happy");
}
happy();

function sum(a,b)
{
return a+b;
}
var sum = sum(2,3);
alert(sum);

function say()
{
alert("oh了吧!!");
}
var aa = say;//现在没有输出去...也就是说say的地址已经和aa的地址一样
aa();//其实就是调用了say函数
</script>
</body>

函数细节:

1,只要是使用了函数的名称就是对这个函数的调用.

2,函数只有一个数组在对传入的参数进行存储.这个数组就是arguments

<body>
<script  type="text/javascript">

function show()
{
for(var x=0; x<arguments.length; x++)
{
alert(arguments[x]);
}
alert("哦!然来参数类型不匹配也可以传入进去.但是一般我们不这样做..不符合逻辑规则嘛,只知道这样是没有错误就可以了");
}
show("1",3,4,5,6,7);
var info = show();//就是表示对函数的调用
var info = show;//这个就是表示了show的地址给了info…  当如果我再次调用info方法.其实就是调用了show方法.
</script>
</body>

题目与锻炼:

1,九九乘法表:
document.write("<table>"); //从页面显示出来的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>嘻嘻,,哈哈,,嘿嘿,,哦哦,</title>
<style>
table
{
color:#FF0000;
background-color:#003399;
width:600px;
border:dotted;

}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<table>");
for(var i=1; i<=9; i++)
{
document.write("<tr>");
for(var j=1;j<=i;j++)
{
document.write('<td>'+i+"*"+j+"="+i*j+'</td>');
}
document.write("</tr>")
}
document.write("</table>");
</script>
</body>
</html>

2,求一个最大值,并且排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
//获取一个最大值
var arr = [23,56,3,2,4,66];
var println = function()
{
document.write("<br/>");
}
//获取一个最大值
function max(arr)
{
max = arr[0];
for(var x=0; x<arr.length; x++)
{
if(max<arr[x])
max = arr[x];
}
return max;
}
var max = max(arr);
document.write("方法一的求最大值:"+max);
println();

//方法二:
function getMax(arr)
{
var max = 0;
for(var x=1; x<arr.length;x++)
{
if(arr[max]<arr[x])
max = x;
}
return arr[max];
}
document.write("最大值为:"+getMax(arr));

//排序:
function button(arr)
{
for(var x=0; x<arr.length; x++)
{
for(var j=0;j<arr.length-x-1; j++)
{
if(arr[j]<arr[j+1])
{
swap(arr,j,j+1);
}
}
}
}
//打印数组
function show(arr)
{
//如果我打印arr.那么就是打印这个数组.并且以,隔开
document.write(arr);
}
//交换两个数字的位置
function swap(arr,i,j)
{
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}

println();//换行
document.write("排序之前:");
show(arr);
println();
document.write("排序之后:");
button(arr);
//排完再打印出去..冲凉一次.
show(arr);

</script>
</body>
</html>

3,查找一个数字的出现的位置..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
//对数组查找,,对数组进行反转
var arr = [23,45,67,332,1111,111133];

//查找
function getkey(arr,key)
{
for(var x=0; x<arr.length; x++)
{
if(arr[x]==key)
return x+1;
}
return -1;
}
var value = getkey(arr,33);
//	document.write(value);
//document.write("<br/>");

//折半查找
function binarySearch(arr,key)
{
var max,min,mid;
min = 0;
max = arr.length-1;
while(min<=max)
{
mid = (max+min)>>1;
if(key>arr[mid])
min = mid+1;
else if(key<arr[mid])
max = mid-1;
else
return mid+1;//代表中了
}
return -1;
}
var x = binarySearch(arr,332);
document.write(x);
</script>
</body>
</html>

4.反转数字:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">
var arr = [12,34,56,77,88];
function reverseArray(arr)
{
for(var start=0,end=arr.length-1;start<end;start++,end--)
{
//一个自+,一个自-
swap(arr,start,end);
}
}
function swap(arr,start,end)
{
var temp = arr[start];
arr[start] = arr[end];
arr[end] = temp;
}
document.write("之前:"+arr);
reverseArray(arr);
document.write("之后:"+arr);
//必须要让其值一样.要不然就是相当于拷贝一份的问题啦

</script>
</body>
</html>

心得:

今天总体来说还是不错的,,,这个就当复习啦..明天复习的内容..画图理解一下这个函数的问题/..和折半查找..和反转数字…

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航