大家好,今天咱们来学习第三节的课程内容,今天内容比前两节内容有意思的多,因为今天学习的js技术可以让我们写的页面变成活的,可以与我们进行交互,具体怎么交互的,咱们慢慢来看。
1.什么是js?
js的全名叫做JavaScript,虽然里面有java字样,但是和java是一毛钱关系都没有的。
2.js的作用?
它可以写在html代码中,让一个页面能够活起来,让用户和页面之间形成交互的关系。
3.js的引入方式?
咱们简单的知道了什么是js,那具体怎么使用呢,大家不要着急,想要使用js,要先引入再使用,具体怎么引入呢,咱们来看一看。
引入方式一:
<head>
<script type=”text/javascript”>
</script>
</head>
引入方式二:
<script type=”text/javascript” src=”js/check.js”>
4.js的基本语法?
js的语法和java的语法是很像的。
我们当时学习java语法都包含哪些呢?大家一起来回忆一下。有变量,数据类型,语句,函数,数组,对象等。
其实js中也有这些,并且大多数的和java中学习的都是一样的,那咱们只需要学习一些不一样的即可。
变量:
js中定义一个变量用var
var x = 5;
java中定义一个变量用数据类型
int x = 5;
在java中,一个int类型占4个字节,所以如果我们写int x = 5;在内存中会有一个可以存储4个字节的内存空间。
但在我们今天学的js中就不一样了,var不是一个什么类型,它可以是任意类型的数据。
var x = 5;
alert(x);
x = "abc";//x = 'abc',在js中不管是单引号还是双引号都是字符串,没有字符的概念。
alert(x);
x = new Object();
alert(x);
x = true;
alert(x);
这么写都可以。
我们可以来看一下打印x的类型。
var x = 5;
alert(typeof(x));
x = "abc";
alert(typeof(x));
x = new Object();
alert(typeof(x));
x = true;
alert(typeof(x));
var x;
alert(typeof(x));//undefined
alert(x / 2);//NaN,Not A Number,这不是报错,是运行完的。
x = null;
alert(typeof(x));//object
语句:
js的语句和java是完全一样的。
唯一说道的就是判断的时候布尔值问题。
var x = 5;
if(x % 2 == 0) {
alert("偶数");
} else {
alert("奇数");
}
var x = 5;
if(x) {
alert("偶数");
} else {
alert("奇数");
}
打印出来的结果是偶数,因为数字只有0会当做false,其他的数都是true。
var x = "abc";
if(x) {
alert("true");
} else {
alert("false");
}
打印出来的结果是true,字符串只有空串是false,其他的是true。
var x = new Object();
if(x) {
alert("true");
} else {
alert("false");
}
打印出来的结果是true,对象只有null是false,其他的是true。
var x;
if(x) {
alert("true");
} else {
lert("false");
}
打印出来的是false。
所以只有0,"",null,undefined是false,其他所有的都是true。
switch(表达式){}
在java中表达式的数据类型为byte,short,int,char,枚举,String
在js中表达式可以为任意类型。
函数:
在java中定义函数是public void xxx() {}
在js中定义函数的格式和java不太一样。
例:
function xxx() {
alert("xxx");
}
xxx();
例:
function getArea(a, b) {
alert("矩形的面试为:" + a * b);
}
getArea(5, 10);
例:
function getArea(a, b) {
alert("矩形的面试为:" + a * b);
}
function getArea(r) {
alert("该圆形的面积为:" 3.14 * r * r);
}
getArea(10);
getArea(10, 5);
在js中没有方法的重载,后写的会覆盖先写的。
在js中,所有的函数当中有一个默认的内置数组,叫做arguments。
验证:alert(arguments.length);
例:
function getArea(a, b) {
return a * b;
}
var area = getArea(5, 10);
alert(area);
例:
var xxx = new function("x, y", "alert(x + y);");
这么写和
function xxx(x, y) {
alert(x + y);
}是一模一样的
例:
var xxx = new function("x,y","alert(x+y);");
function ooo(x, y) {
alert(x - y);
}
xxx(5, 10);
xxx = ooo;
xxx(5, 10);
alert(typeof(xxx));
例:
匿名函数,一般用在事件处理的时候。
window.onload = function() {//页面加载完毕时执行匿名函数。
alert("弹出一个对话框");
}
数组:
java中数组是一个容器,但是长度不可以变,类型必须一致。
js中数组可以存任意类型元素,长度可变,有点类似java中的list集合。
例:
var arr = [1,2,3];
for(var x = 0; x < arr.length; x++) {
alert(arr[x]);
}
例:
var arr = [1,2,3];
alert(arr.length);
arr[5] = 100;
alert(arr.length);
例:
var arr = [1, true, "abc", 3.14];
例:
var arr = new Array();
例:
var arr = [];
例:
js中没有for-each循环,有for-in循环。
var arr = [1,2,3];
for(x in arr) {//x为数组的索引
alert(arr[x]);
}
5.js中的事件处理?
js中有事件的概念,事件的好处是可以让一个死气沉沉的页面变成活的。
事件处理方式有两种:
方式一:
使用html的事件属性
<head>
<script type="text/javascript">
function xxx() {
Alert("哈哈");
}
</script>
</head>
<body>
<input type="button" value="点我啊">
</body>
方式二:
使用匿名函数的方式,通过js的内置对象document获取元素对象。
<head>
<script type="text/javascript">
window.onload = function() {
var bt = document.getElementById("bt");
bt.onclick = function() {
alert("哈哈");
}
}
</script>
</head>
<body>
<input type="button" value="点我啊" id="bt">
</body>
以上就是这节课js的一些知识点,js对以后的开发来说还是比较重要的,所以大家要多加练习,反复练习,至少希望大家看完我写的这些,能基本掌握一些小知识,那咱们下次再见。
|
|