JavaScript的核心语法

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);//100num = 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);//truebool = 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);//103console.log(str1 - str2);//7console.log(str1 * str2);//30console.log(str1 / str2);//3.3333333335console.log(str1 % str2);//1//boolean类型的特殊点//注意：""、0、undefined、null表示falseif(""){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 nullvar v1 = undefined;var v2 = null;//typeof判断引用的数据类型console.log(typeof v1);//undefinedconsole.log(typeof v2);//object//== vs ===//==判断两个值是否相等//===判断两个值+类型是否相等var v3 = 10;var v4 = "10";console.log(v3 == v4);//trueconsole.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 - undefindfun(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"));//falseconsole.log("判断参数是否不是数字：" + isNaN("abc"));//trueconsole.log("将字符串转换为整数：" + parseInt("100.123"));//100console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123var str = "alert('今天真是个好日子');";eval(str);//认为字符串为js代码去执行</script></body>
</html>