JavaScript
概述
JS是弱类型定义语言,Java是强类型定义语言
。
强类型定义语言:
强制数据类型定义的语言。也就是说,一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了。举个例子:如果你定义了一个整型变量a,那么程序根本不可能将a当作字符串类型处理。强类型定义语言是类型安全的语言。
弱类型定义语言:
数据类型可以被忽略的语言。它与强类型定义语言相反,一个变量可以赋不同数据类型的值
。
JS的特点:
- 交互性(它可以做的就是信息的动态交互)
- 安全性(不允许直接访问本地硬盘)
- 跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)
引入JS方式
在html内直接写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- js代码建议放在文档的最后 -->
<!-- 使用<script>标签引入js -->
<!-- 页面加载至此处,代码就会执行 -->
<script type="text/javascript">
// 在此处写js代码
// 输出语句,输出到开发者工具的控制台
console.log("js日志...")
</script>
</body>
</html>
html与js分离
我们可以单独的将js代码写在一个文件中,然后在html页面内引入js文件即可。
定义变量
由于js是弱类型语言,因此不用像java一样考虑数据的数据类型。直接使用关键字var
即可。
语法格式:
var 变量名 = 值;
或
var 变量名; //该变量输出为undefined
案例:
var a = 1;
console.log(a); // 1
var b;
console.log(b) //undefined
变量的数据类型
- 数值类型:number(int 、short 、double、float、long)
- 字符串类型:string (字符串、字符都可以)
- 布尔类型:boolean
- 未定义:undefined
- 对象类型:Object
- 函数类型:function
案例:
// 声明变量
// var 变量名 = 值;
var a = 1;
var b = "我爱js";
var c = 1.1;
var d = false;
var e = new Date();
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
// 打印类型,typeof(参数),该方法会将类型返回
console.log("-----------------");
console.log(typeof(a)) // number
console.log(typeof(c)) // number
console.log(typeof(b)) // string
console.log(typeof(d)) // Boolean
console.log(typeof(e)) // object类型,不是基本类型,是引用类型
console.log(typeof(h)) // 未定义
js变量中的三个特殊值
- undefined :未定义 (在JavaScript中
所有的变量未赋值时,都是undefined
) - null: 空值
- NaN:全称:Not a Number。非数字,非数值。(如数值型变量a与字符串类型b相乘,在JS语法上没有错误,但结果是NaN。)
字符串类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var ch = 'e';
var str = "JavaScript";
//js中的字符串方法与java中的字符串方法基本一致
console.log(str.length); //获取字符串长度
console.log(str.charAt(3)); //通过下标找指定字符
console.log(str.indexOf('p')); //通过字符找下标
console.log(str.substring(4)); //截取
console.logstr.substring(4,6); //截取
console.log(str.split("-")); // 按照指定字符拆分,返回的是数组
</script>
</head>
<body>
</body>
</html>
数组类型
<script type="text/javascript">
/*
长度不固定,类型不固定
*/
var arr1 = []; // 空数组
arr1[0] = 1; // 给值
var arr2 = [1,"二",false,new Date];
var arr3 = new Array(3); // 指定长度创建数组,但是长度没有限制
arr3[0] = 0;
arr3[1] = 1;
arr3[2] = 2;
arr3[3] = 3;
console.log(arr3);
//当
/**
* 使用数组:
*/
// 取值
console.log(arr3[0])
// 赋值
arr3[0] = 10;
console.log(arr3[0])
console.log("--------");
// 方法
// length:数组长度
// join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
// pop():返回并删除最后元素
// push():向数组的末尾添加一个或更多元素,并返回新的长度
// reverse();反转数组
// sort();排序
var arr4 = [1,2,3,4,5];
console.log(arr4.length);
console.log(arr4.join("-")); // 与字符串方法split相反
console.log(arr4.pop());
console.log(arr4);
console.log(arr4.push(6));
console.log(arr4);
console.log(arr4.reverse());
console.log(arr4.sort()); // 只会升序排序
</script>
javaScript语言中的数组,只要我们通过数组下标赋值
,那么最大的下标值,就会自动
的给数组做扩容
操作。而没有赋值的下标元素,值为undefined。
<script type="text/javascript">
var arr = [];
alert(arr.length); //长度为0
arr[0] = 12;
alert(arr[0]); //12
arr[2] = 'abc';
alert(arr[2]); //abc
alert(arr.length); //长度为3
alert(arr[1]); //undefined
</script>
引用类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 声明一个引用对象
var user = {
id:1,
name:"狗蛋",
age:18,
sex:false,
address:{
contry:"中国",
province:"河南",
city:"郑州"},
};
// 其实这就是JSON,后续学过框架,学过前后端分离开发,学过RESTFul之后
// JSON会用的很多。
// 获得属性
console.log(user.name+"---"+user.age)
// 更改属性
user.name = "杉杉";
console.log(user.name+"---"+user.age)
</script>
</body>
</html>
日期类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var data = new Date(); //获取当前时间
console.log(data); //Wed Aug 24 2022 19:11:41 GMT+0800 (中国标准时间)
console.log(data.getFullYear()); //获取年份 //2022年
console.log(data.getDate()); //获取一个月中的第几天 //24号
console.log(data.getDay()); //获取一周中的第几天 //周3
console.log(data.getMonth()+1); //获取月份,从0-11月份 //8月
console.log(data.getTime()); //获取毫秒值 //1661339553735
console.log(data.toLocaleString()); //按照本地格式打印时间 //2022/8/24 19:12:41
</script>
</head>
<body>
</body>
</html>
运算符
运算符包括了算数运算符、逻辑运算符、关系运算符、三目运算符。
算数运算符:加(+)、减(-)、乘(*)、除(/)。
逻辑运算符:与(&&)、或(||)、非(!)
在JavaScript语言中,所有的变量
,都可以做为一个 boolean类型
的变量去使用。其中0 、null、 undefined、""(空串,不能有空格)都认为是 false
;
测试:
<script type="text/javascript">
var a = null;
if (null){
alert("null为true");
}else {
alert("null为false");
}
</script>
//结果()
null为false;
关系运算符:大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)、全等(== / ===)
。
在js中的关系运算符中,全等有两种。1、 == 只是简单的判断值是否相等。2、=== 除了做字面上的数值比较
外,还要比较两个变量的数据类型
。
<script type="text/javascript">
var a= 12;
var b= '12';
alert (a == b); //true
alert (a === b); //false
</script>
三目运算符
语法格式:条件成立取值1,不成立取值2.
判断条件? 值1:值2;
<script>
var i = 1;
var j = 2;
console.log(i < j ? "i":"j");
</script>
分支
js中的分支和java中的分支一样。
if
if…else
if…slse…else…
switch…case
循环
while
do…while
for
<script type="text/javascript">
var i = 1;
while(i < 11){
console.log(i);
i++;
}
console.log("--------");
var j = 1;
do{
console.log(j);
j++;
}while(j < 11);
console.log("--------");
for(var k = 1;k < 11;k++) {
console.log(k)
}
</script>
函数
函数,就是类似Java中的方法,可以完成某些功能。
<script type="text/javascript">
//方式一:
//无参函数
function f() {
alert("无参函数被调用了");
}
f();
//有参函数
function f1(a,b) {
alert("有参函数被调用了;a = " + a + ", b = " + b);
}
f1(1,'abc');
//带返回值函数
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
alert(sum(12, 23));
//方式二:
var 函数名 = function(形参列表){
函数体;
}
</script>
注意
在Java中可以重载,但是在JS中函数的加载会直接覆盖掉上一次的定义。
<script type="text/javascript">
function f() {
alert("无参函数被调用了");
}
function f(a,b) {
alert("无参函数被覆盖掉了; 且a = " + a +", b = "+b);
}
f(12,13);
</script>
//结果
无参函数被覆盖掉了; 且a = 12, b = 13