JavaScript
- JavaScript：
- JavaScript的组成：
- 核心语法：
- Hello：
- 变量：
- JS的基本数据类型：
- 特殊点：
- 数组：
- 流程控制语句：
- 函数：
- 函数的重载：
- 函数的递归:
- 预定义函数：
JavaScript：
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：
交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）。
安全性（不可以直接访问本地硬盘）。
跨平台性（由浏览器解析执行，和平台无关）。
JavaScript的组成：
DOM – >Document Object Model
BOM – >Browser Object Model
核心语法：
Hello：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//弹框
//alert("HelloWorld...1");
//控制台输出
console.log("HelloWorld...1");
</script>
</head>
<body>
<script type="text/javascript">
//弹框
//alert("HelloWorld...2");
//控制台输出
console.log("HelloWorld...2");
</script>
</body>
</html>
变量：
语法格式：
var 变量名 = 值;
注意：
1. var表示变量。
2. 变量的类型随着值的类型发生改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var v = 100;
console.log(v);
v = "abc";
console.log(v);
</script>
</body>
</html>
JS的基本数据类型：
分类：
number - 数值型
string - 字符串类型
boolean - 布尔类型
undefined - 未定义类型
null - 空类型
tips:
- number类型不分整数和小数。
- string类型的值可以用单引号也可以用双引号括起来。
- string类型和Java的String类型写法不一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//number - 数值型
//注意：number类型不分整数和小数
var num = 100;
console.log(num);//100
num = 123.123;
console.log(num);//123.123
//string - 字符串类型
//注意：string类型的值可以用单引号也可以用双引号括起来
var str = 'abc';
console.log(str);
str = "abc";
console.log(str);
//boolean - 布尔类型
var bool = true;
console.log(bool);//true
bool = false;
console.log(bool);//false
//undefined - 未定义类型
var v;
console.log(v);
v = undefined;
console.log(v);
//null - 空类型
var xx = null;
console.log(xx);
</script>
</body>
</html>
特殊点：
- number类型的特殊点:Infinity表示无穷大。
- string类型的特殊点：string加号是字符串拼接符，其余是算数运算符。
- boolean类型的特殊点：“”、0、undefined、null表示false。
- ==判断两个值是否相等，===判断两个值+类型是否相等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//number类型的特殊点
//注意：Infinity表示无穷大
console.log(Infinity + (-Infinity));//NaN - Not a Number
//string类型的特殊点
//注意：string加号是字符串拼接符，其余是算数运算符
var str1 = "10";
var str2 = "3";
console.log(str1 + str2);//103
console.log(str1 - str2);//7
console.log(str1 * str2);//30
console.log(str1 / str2);//3.3333333335
console.log(str1 % str2);//1
//boolean类型的特殊点
//注意：""、0、undefined、null表示false
if(""){
console.log("true");
}else{
console.log("false");
}
if(0){
console.log("true");
}else{
console.log("false");
}
if(undefined){
console.log("true");
}else{
console.log("false");
}
if(null){
console.log("true");
}else{
console.log("false");
}
//undefined vs null
var v1 = undefined;
var v2 = null;
//typeof判断引用的数据类型
console.log(typeof v1);//undefined
console.log(typeof v2);//object
//== vs ===
//==判断两个值是否相等
//===判断两个值+类型是否相等
var v3 = 10;
var v4 = "10";
console.log(v3 == v4);//true
console.log(v3 === v4);//false
</script>
</body>
</html>
数组：
JS的数组和Java的数组不一样，Java数组定义大小后就不能改变长度了，而JS数组可以随意改变长度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = ["小红","小明","小灰"];
//设置指定下标上的元素
arr[0] = "小黑";
//获取指定下标上的元素
console.log("获取指定下标上的元素：" + arr[0]);//小黑
//获取元素个数
console.log("获取元素个数：" + arr.length);
//添加元素
arr[3] = "小白";
arr[4] = "小绿";
arr[10] = "小蓝";
//删除元素
delete arr[4];
console.log("--------------------");
//遍历数组 - for循环
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("--------------------");
//遍历数组 -- for-in
//注意：遍历有效元素的下标（undefined的元素认为是无效元素）
for(var index in arr){
console.log(arr[index]);
}
</script>
</body>
</html>
流程控制语句：
- If else
- For
- For-in(遍历数组时，跟Java是否一样)
- Whil
- Do while
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
需求：求1-100之间的偶数之和。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var sum = 0;
for(var i = 1;i<=100;i++){
if(i%2 == 0){
sum += i;
}
}
console.log("1~100之间偶数之和为：" + sum);
</script>
</body>
</html>
需求：我的梦想:第一个月存3000，每年递增1000，问多少个月后可以存到20万元。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var allMoney = 0;
var money = 3000;
var month = 0;
while(allMoney < 200000){
allMoney += money;
month++;
if(month % 12 == 0){
money += 1000;
}
}
console.log(month + "个月后存满20万");
</script>
</body>
</html>
需求：
打印图形
* ** *** **** *****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i = 0;i<5;i++){
for(var j = 0;j<=i;j++){
document.write("*");
}
document.write("<br/>");
}
</script>
</body>
</html>
函数：
语法结构：
function 函数名(参数列表){…代码块…
}
注意：函数就是方法。
函数分类：
1. 无参无返回值的函数。
2. 带参数的函数。
3. 带返回值的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//无参无返回值的函数
function fun01(){
console.log("今天天气真好1");
}
fun01();
//带参数的函数
//注意：形参不需要加类型，调用方法时可以传参也可以不传参
function fun02(a,b){
console.log("今天天气真好2：" + a + " -- " + b);
}
fun02();
fun02(10,20);
fun02("xxx","yyy");
fun02("abc",12345);
//带返回值的方法
//注意：JS函数里的返回值不用像Java方法里必须指定返回值类型
function fun03(){
return "今天天气真好3";
}
var v = fun03();
console.log(v);
</script>
</body>
</html>
tips:
1. 形参不需要加类型，调用方法时可以传参也可以不传参。
2. JS函数里的返回值不用像Java方法里必须指定返回值类型。
函数的重载：
JS的函数里没有重载的概念，后面定义的相同名称的方法会覆盖前面相同名称的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fun(a,b){
alert(a+b);
}
function fun(a,b,c){
alert(a+b+c);
}
//a - 10
//b - 20
//c - undefind
fun(10,20);//NaN
</script>
</body>
</html>
函数的递归:
递归是一种思想，只要是面向对象的语言都有这个思想。
需求：设计一个函数，传入n，求n的阶乘。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fun(n){
if(n != 1){
return fun(n-1)*n;
}else{
return 1;
}
}
var num = fun(5);
alert(num);
</script>
</body>
</html>
预定义函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
console.log("判断参数是否是数字：" + isFinite("abc"));//false
console.log("判断参数是否不是数字：" + isNaN("abc"));//true
console.log("将字符串转换为整数：" + parseInt("100.123"));//100
console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123
var str = "alert('今天真是个好日子');";
eval(str);//认为字符串为js代码去执行
</script>
</body>
</html>
