JavaScript是基于对象和事件驱动的脚本语言,能够实现信息的动态交互,具有跨平台性,主要应用在客户端。
JavaScript主要是用于处理网页的前端验证(检查用户输入的内容是否符合一定的规则,如用户名的长度,密码等)
JS和html结合的方式:
1.在html的<body>或者<head>中添加 <script type="text/javascript"></script>
alert("hello world!");
2.新建 .js文件,在html中添加<script type="text/javascript" src="Untitled-1.js">。其中,src是js文件的名字。
注:如果<script>中执行src属性,那么该标签中的js语句不会被执行。所以通常导入js文件都是由单独的<script>标签来执行。
在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。而且JS文件不能直接运行,需嵌入到HTML文件中执行。
javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等)
注释:JS中单行注释: // 多行注释: /* */
JS互动方式:
1.alert(str);
弹出str的小对话窗口
2.confirm(str);
str:在消息对话框中要显示的文本 返回值: Boolean值
当用户点击"确定"按钮时,返回true 当用户点击"取消"按钮时,返回false
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
3.prompt
prompt弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)
prompt(str1, str2); //str1: 要显示在消息对话框中的文本,不可修改 str2:文本框中的内容,可以修改
返回值:点击确定按钮,文本框中的数据将作为函数返回值,点击取消按钮,返回null。
function rec(){
var score; //score变量,用来存储用户输入的成绩值。
score = prompt("你的分数是多少?");
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
4.open打开新的窗口
window.open([URL], [窗口名称], [参数字符串]);
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页 _self:在当前窗口显示目标网页 _top:框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
<script type="text/javascript">
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script>
//在新窗口打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口。
5.关闭窗口
<窗口对象>.close(); //关闭指定的窗口
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
mywin.close(); //上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。
JS语法:
通常高级程序设计语言所包含的语法内容:
关键字:在该语言中被赋予特殊含义的单词。
标识符:在该程序中自定义的名称,比如变量名,函数名等。
变量:在JS中定义变量要使用关键字 var(由于JS不严谨,var不写也可以)。
由于JS是弱类型,可对变量重新赋予不同类型的数值(如将整形转成字符串或者浮点型)。
JS中运算符和java中基本相同。
细节:当定义变量但未赋值时,此时变量为undefined类型。使用typeof可以获取数据类型。其中整形和浮点型统称为 number类型。
数组:长度可变,元素类型任意。当定义的某个数组元素大于数组长度时,从len-1 到该元素-1,都是undefined。
两种定义方式:
1. var arr = [] ; or var arr = [1 ,2 ,3 ,4 ] ;
2. var arr = new Array(); or var arr = new Array(5);//定义一个长度为5的数组
or var arr = new Array(5,6,7);//定义一个元素是5,6,7的数组。
如:var arr=[1,2,3];
for(var x = 0 ; x < arr.length ; x ++)
{
document.write("arr["+x+"]="+arr[x]+"<br/>");
}//可对数组进行遍历
JS函数:
格式:function 函数名(参数列表){
函数体
return 返回值;//如果没有返回值,return可以不写。
exp1:
function add(x,y)
{
return x + y ;
}
var sum = add(1,2);
alert("sum="+sum);
注释:1.只要使用函数名称,就是对该函数的调用。
2.数组arguments对传入的数组进行存储。
exp2:
function show(x,y)
{
for(var x = 0 ; x < arguments.length ; x ++)
{
document.write(arguments[x]+"<br/>");
}
}
show(1,2,3,5,6,4);//当传入参数长度大于函数定义的参数长度时,使用arguments可查询传入的参数。
匿名函数:
exp3:<script type="text/javascript" >
var sum = function(a,b)
{
return a + b;
}
alert("sum="+sum(1,2));
</script>
exp4:
function haha()
{
alert("haha run");
}
var xixi = haha;
xixi();
//可简写成:
var xixi = function()
{
alert("haha run");
}
xixi();
函数练习:
要求:定义函数,实现对数组的最值,排序,查找和反转功能。
1.求最值:
var arr= {13,5322,35435,54,45,587};
var max = arr[0];
function getMax(arr)
{
for( x = 1 ; x < arr.length ; x ++)
{
if (arr[x] > max)
max = arr[x] ;
}
return max;
}
var maxValue = getMax(arr);
alert("maxValue="+maxValue);
2.排序
var arr= [13,5322,35435,54,45,587];
//paixu
function sortArray(arr)
{
for(var x = 0 ; x < arr.length ; x ++)
{
for( var y = x + 1 ; y < arr.length ; y ++)
{
if( arr[x] > arr[y])
{
swap(arr,x,y);
}
}
}
}
//swap
function swap(arr,x,y)
{
var temp;
temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
//print
function println(t)
{
document.write(t+"<br/>");
}
println("before:"+arr);
sortArray(arr);
println("after:"+arr);
3.元素查找
var arr = [3242,4453,24234,789,24,345];
function findArray(arr,key)
{
for(var x = 0 ; x < arr.length ; x ++)
{
if( arr[x] == key)
{
return x ;
}
}
}
var t = findArray(arr,789);
document.write(t);
4.元素反转
function revArray(arr)
{
for( var start = 0 , end = arr.length-1 ; start < end ; start ++ , end --)
{
swap(arr,start,end);
}
}
全局和局部变量:
在<script>中定义的是全局变量,在整个页面中可用。在function中定义的是局部变量。
var x = 0;
function show(x)
{
x = 1;
}
show(x);
document.write(x);//输出x = 0。
String的基本用法:
<script type="text/javascript" src="Untitled-1.js"></script>
<script type="text/javascript">
var str = "aferfdfgdfrfr";
println("length="+str.length); //长度
println(str.bold());//加粗
println(str.fontcolor("yellow")); //颜色
println(str.link("http://www.baidu.com")); //超链接
println(str.substr(3,4)); //从角标为3的元素开始,取长度为4的子字符串
println(str.substring(3,4)); //从角标为3的元素开始,到end-1的子字符串
</script>
其中,function println(param)
{
document.write(param+"<br/>");
}
String自定义功能:
function trim(str)
{
//自定义去除字符串两端空格的功能
//定义两个变量,分别记录字符串的起始和末尾的位置。
//对开始的字符进行判断,如果是空格,就递增,直到不是空格为止
//对末尾的字符进行判断,如果是空格,就递减,直到不是空格为止
//必须保证起始位置 < = 末尾位置
var start , end;
start = 0;
end = str.length - 1;
while( start < = end && str.charAt(start) == ' ')
{
start ++;
}
while( start < = end && str.charAt(end) == ' ')
{
end --;
}
return str.substring(start,end+1);
}
String的prototype属性:
原型就是对某个对象的描述。在该对象中如果添加了新的功能,那么该对象就会具备这些功能。
通过prototype可以对对象的功能进行扩展。
需求:想给string字符串添加一个去除字符串两端空格的功能,就可以通过原型实现。即在prototype中添加一个新功能。
注释:给对象添加新功能,直接使用 对象.新功能 。