今天开始学习javascript,前面已经对HTML和CSS做了一个大致的了解,不过也只是大致了解了他们的语法规则,现在如果让我做出来一个比较完美的网页我可能还做不到,不过给我一个网页的源码我至少能大致看懂每一块的大致意思。
HTML和CSS是起到了设计网页的作用,而javascript就是让网页动起来,下面是我学习的一些基本语法,如果以前对高级语言java或者C++有所了解的话,这些还是比较容易上手的,主要是要注意一下不一样的地方。
目录
1、在HTML中使用js的第1种方式
直接在head标签中使用script标签,其中加入js的语句即可,这里我是输出了一个hello javascript字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!--
在HTML中使用javascript的两种方式:
(1)直接在script标签中加入
(2)使用srcipt引入.js文件
-->
<script type="text/javascript">
alert("hello javascript!")
</script>
</head>
<body>
</body>
</html>
2、在HTML中使用js的第2种方式
除了嵌入进去使用,还可以单独写一个js文件,将所有的语句存储进去,然后在HTML文件中直接引入这个js文件即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入当前路径下hello.js文件 -->
<script type="text/javascript" src="./hello.js">
</script>
</head>
<body>
</body>
</html>
3、js中的数据类型
js中的数据类型和java有些差别,一共包括5种数据类型:
- 数值类型(num)
- 字符串类型(string)
- 对象类型(object)
- 布尔类型(boolean)
- 函数类型(function)
在定义变量的时候,我们也不需要指定这个变量的类型,只需要使用关键字var定义一个变量,后面给这个变量赋哪个类型的值他就是什么类型,这和python相似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
js中的数据类型
数值类型:number
字符串类型:string
对象类型:object
布尔类型:boolean
函数类型:function
js中特殊的值:undefined, null, NAN
使用的时候使用var定义一个变量,然后后面进行赋值即可
*/
var i = 12;
alert(typeof(i));
</script>
</head>
<body>
</body>
</html>
4、算数表达式
大部分的和java都是一样的,只有一个比较特殊就是等于(==)和全等于。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var a = 12;
var b = "12";
// 只需要数值等于,不要求类型等于,所以这个是true
alert(a == b);
// 全等于:指的是数值和类型必须都等于,所以这个是false
alert(a === b);
</script>
</head>
<body>
</body>
</html>
5、逻辑运算
和java中有区别,运算规则见注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
js中所有的变量都可以做逻辑运算
0, null, undefined, 空串"" 都是false
&& 运算:
两种情况:
(1)当表达式全为真的时候,返回最后一个表达式的值
(2)当表达式中有一个为假的时候,返回第一个为假的表达式的值
|| 运算:
两种情况:
(1)当表达式全为假时,返回最后一个表达式的值
(2)只要有一个表达式为真,就会返回第一个为真的表达式的值
|| 和 && 运算有短路:
就是说当这个&& 或者 || 有计算结果之后,后面的表达式就不再执行
*/
</script>
</head>
<body>
</body>
</html>
6、数组
js中数组可以根据最大下标进行扩容,没被赋值的被给undefined值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 定义一个空的数组
var arr = [];
arr[0] = 1;
arr[2] = 3;
// 可以根据最大下标进行扩容,没被赋值的被给undefined值
arr[5] = "abc";
// 数组的遍历
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
7、函数(第一种定义方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 定义一个无参函数
function fun(){
alert("无参函数fun()被调用了");
}
// 调用无参函数
fun();
// 定义有参函数
function fun2(a, b){
alert("有参函数被调用了 a=>" + a + "b=>" + b);
}
// 调用有参函数
fun2(3, 4);
// 定义具有返回值类型的函数(直接 return 即可)
function fun3(num1, num2){
var num = num1 * num2;
return num;
}
alert("计算两个值的乘积:" + fun3(3, 4));
// js中函数不允许重载,直接覆盖掉
</script>
</head>
<body>
</body>
</html>
8、函数(第二种定义方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var fun1 = function(){
alert("无参函数");
}
var fun2 = function(a, b){
alert("有参函数被调用了 a=>" + a + "b=>" + b);
}
var fun3 = function(a, b){
return a+b;
}
</script>
</head>
<body>
</body>
</html>
9、函数不允许重载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function f1(){
alert("无参函数");
}
function f1(a, b){
alert(a+b);
}
f1(1, 1);
</script>
</head>
<body>
</body>
</html>
10、隐形参数
隐形参数(arguments):就是function中不需要定义,但是却可以直接来获取所有参数的变量(像java中的可变长参数),操作类似于数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
隐形参数(arguments):就是function中不需要定义,但是却可以直接来获取所有参数的变量(像java中的可变长参数)
操作类似数组
*/
function fun(){
alert(arguments.length);
alert(arguments[0]);
alert("无参函数fun()");
for(var i = 0; i<arguments.length; i++){
alert(arguments[i]);
}
}
fun(1, "cd", true);
// 定义一个函数实现计算所有参数的和
function sum(num1, num2){
alert("开始计算所有参数的和······")
var result = 0;
for(var i=0; i<arguments.length; i++){
result += arguments[i];
}
alert("所有参数的和为:" + result);
}
// 调用函数sun()
sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
</script>
</head>
<body>
</body>
</html>