1.javascript简介
*基于对象和事件驱动的语言,应用于客户端
-基于对象
提供了很多对象,可以直接拿过来使用
-事件驱动
html做网站静态效果,javascript能够呈现动态效果
-客户端:专门指浏览器
js的特点
(1)交互性
-信息的动态交互
(2)安全性
-js不能访问本地磁盘的文件
(3)跨平台性
-只要支持js的浏览器,都可以运行
javascript的组成
三部分
(1)ECMAScript
-ECMA 欧洲计算机协会
-由ECMA组织制定的js语法,语句。。。。
(2)BOM
-broswer object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型 (对网页文字内容进行操作)
2.js和html的结合方式
第一种:
-使用标签 <script type="text/javascript">script代码</script>
第二种:
-使用script标签,引入一个外部的js文件
**创建js文件,写入js代码
<body>
<script type="text/javascript" src="1.js"></script>
</body>
**使用第二种方式时,在<script>里面写内容不会生效 ,需要在js文件写内容才能生效。
3.js的原始类型和声明变量
java的基本数据类型 byte short int long float double char boolean
定义变量 都是用关键字 var
js的原始类型五个
- string:表示字符串
var str ="abc";
- number:数字类型
var m =123;
- boolean:true和false
var flag = true;
- null
var date = new date();
获取对象的引用,null表示对象引用为空,所有对象的引用也是object
- undifined
定义一个变量,没有赋值
var aa;
typeof();查看当前变量的数据类型
<!DOCTYPE html>
<html>
<head>
<title>js的数据类型.html</title>
</head>
<body>
<script type="text/javascript">
//定义一个字符串
var str = "abc";
//alert(str);
alert(typeof(str))
//定义一个数字
//var m = 123;
//alert(m);
//定义bollean类型
//var flag = true;
//alert(flag);
</script>
</body>
</html>
4.js的语句
-java里面的语句:
if判断
for循环
switch
-js语句
if判断
switch语句
<!DOCTYPE html>
<html>
<head>
<title>js语句l.html</title>
</head>
<body>
<script type="text/javascript">
//if语句
/* var a = 5;
if(a==5){
alert("5");
}else{
alert("6"")
} */
//swith语句
/* var b = 6;
switch(b){
case 3:
alert("3");
bleak;
case 6:
alert("6");
bleak;
default:
alert("others"");
} */
//while循环
/* var i =5;
while(i>1){
alert(i);
i--;
} */
//for循环
for(var m=0;m<=5;i++){
alert(m);
}
</script>
</body>
</html>
5.js的运算符
js中不区分整数和小数
<script type="text/javascript">
var j = 123;
alert(j/1000*1000);
//在java里面得到的结果是0;
//在js里面不分整数和小数 ,得到的结果是123
</script>
字符串的相加和相减的操作:
如果是相加得到是字符串连接
如果相减得到是相减的运算
如果不是数字会提示nan错误
var str ="456";
alert(str+1);//在java和js里面都是4561
alert(str-1);//得到 455
bollean操作
var flag=true; true=1
alert(flag+1);
var flag1=false; false=0
alert(flag+1);
== 和===区别
==比较的是值
===比较的是值和类型
引入的知识
直接向页面输出的语句(可以把内容显示在压面上)
*document。write("aaa");
document。write可以输出变量还可以输出html代码
案例:乘法表练习
<!DOCTYPE html>
<html>
<head>
<title>乘法表练习.html</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' border-coler:blue>");
for (var i=1;i<=9;i++){
document.write("<tr>");
for (var j=1;j<=i;j++){
document.write("<td>");
document.write(j+"*"+i+"="+i*j + " ");
document.write("<td/>");
}
//document.write("<br/>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
7.js的数组
定义方式(三种)
第一种
var arr = [1,2,3]
var arr = [1,2,"3"]
第二种 var arr1 = new Array(5);定义数组长度为5
arr1[0] = "1";
第三种:使用内置对象Array:
var arr2 = new Array(3,4,5);定义一个数组
数组里面有一个属性length,可获取数组的长度
数组可以存放不同数据类型的数据。
8.js的函数
js里面定义函数(方法)有三种方式:
第一种方式:
***使用关键字 function
function 方法名(参数列表){
方法体
返回值可有可无
}
代码
<script type="text/javascript">
//第一种方式创建
function test(){
alert("qwert");
}
//调用方法
//test();
function add(a,b){
var sum = a+b;
alert(sum);
}
add(1,2);
function add2(a,b,c){
var sum = a+b+c;
return sum
}
alert(add2(3,4,5));
</script>
第二种方式:
匿名函数
var add= function(参数列表){
方法体和返回值
}
代码:
<script type="text/javascript">
//第二种方法
var add = function(m.n){
alert(m+n)
}
//调用方法
add(2,3)
</script>
第三种方式(用的少,了解)
动态函数
使用到js里面的一个内置对象Function
var add = new Function("参数列表","方法体和返回值");
代码:
var add4 = new Function("x,y","var sum;sum=x+y;return sum")
alert(add4(2,5));
9.js的全局变量和局部变量
全局变量:在<script>中定义,可以在全局使用
局部变量:只能在方法体的内部使用
10.script标签的位置存放
建议将script标签放在</body>后面
如果现在有这么个需求:
在js里面需要获取input里面的值,如果把script标签放在head里面会出现问题
html解析是从上往下解析的,script标签放到的是head里面,直接在里面取input里面的值,因为页面还没有解析到input哪一行,肯定取不到的。
11.js的重载
什么是重载?方法名相同,参数列表不同