Javascript核心技术的基础语法
一、什么是javascript
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：
交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）
二、Javascript vs Java
JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。
JavaScript 是一种弱类型语言，java是强类型语言。一个完整 JavaScript实现由以下3个部分组成
1.核心技术：ECMAscript
2.文档对象模型：DOM
3.浏览器对象模型：BOM
三、javascript版的HelloWorld
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中
<!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>
四、定义变量
弱类型 对比Java定义变量的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>.
<script type="text/javascript">
var v = "abc";//v1 -- string类型
console.log(v);
v = 123;
console.log(v);//v1 -- number类型
</script>
</body>
</html>
五、基本数据类型
1.JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
2.JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号
var carname=“Bill Gates”;
var carname=‘Bill Gates’;
单引号和双引号支持互相包含
3.JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true
var y=false
4.undefined无定义
访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined
5.Null空
被赋予null值的变量通常认为已经定义了，只是不代表任何东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// number类型
var v1 = 123;
console.log(v1);
var v2 = 123.123;
console.log(v2);
//string类型
var v3 = 'abc';
console.log(v3);
var v4 = "abc";
console.log(v4);
//boolean类型
var v5 = true;
console.log(v5);
var v6 = false;
console.log(v6);
//undefined类型
var v7 ;
console.log(v7);
var v8 = undefined;
console.log(v8);
//null类型
var v9 = null;
console.log(v9);
</script>
</body>
</html>
六、基本数据类型的特殊点
数字类型
各种数字的结果都是number
typeof 123Infinity
用来代表超过了javascript处理范围的数值。
1e308两个正无穷大相加会是一个什么结果？
正负相加—NaN字符串
字符串转换问题，字符串和数字类型进行数学运算的时候，除了加法运算以外，其他都会转换为数字类型布尔类型
做逻辑的判断
在javascript中，除了以下值，其他都是true
空字符串“”
null
undefined
0
NaN
false注意：NaN == NaN吗？如何正确判断是否为NaN
比较运算符：
== vs ===
通过typeof对比undefined和null的区别
<!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类型的特殊点
//两个字符串除了+是拼接，其余的都是做运算
var str1 = "10";
var str2 = "5";
console.log(str1 + str2);//105
console.log(str1 - str2);//5
console.log(str1 * str2);//50
console.log(str1 / str2);//2
console.log(str1 % str2);//0
//boolean类型的特殊点
//0、""、undefined、null都认为是false
if (null) {
console.log("ture");
} else{
console.log("false");
}
//typeof -- 获取变量所属类型
console.log(typeof 123);//number
console.log(typeof "123");//string
console.log(typeof true);//boolean
//undefined vs null
var v1 = undefined;
var v2 = null;//js认为v2是一个对象
console.log(typeof v1);//undefined
console.log(typeof v2);//object
//== vs ===
//== 判断值
//=== 既判断值还判断类型
var v3 = 123;
var v4 = "123";
console.log(v3 == v4);//true
console.log(v3 === v4);//false
</script>
</body>
</html>
七、数组
创建一个数组
var arr = [1,2,3];
更新数组的元素
添加数组的元素
删除数组的元素（delete arr[1],注意，此处只是将该元素留空，数组的长度并不会发生变化）
数组的数组
var a = [[1,2,3],[4,5,6]];
关注与Java不同的特性即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = ["曹操","于禁 ","夏侯惇"];
//设置指定下标上的元素
arr[2] = "曹丕";
//添加元素
arr[3] = "曹植";
arr[4] = "吕布";
arr[10] = "貂蝉";
//删除元素
delete arr[4];
//循环数组 -- for循环
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);//获取指定下标上的元素
}
console.log("------------")
//循环数组 -- for-in
//注意：遍历有效下标
for(var index in arr){
console.log(arr[index]);
}
</script>
</body>
</html>
八、流程控制语句
If else
For
For-in(遍历数组时，跟Java是否一样)
While
Do while
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代
1.求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(sum);
</script>
</body>
</html>
2.我的梦想:第一个月存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);
</script>
</body>
</html>
//3.打印图形
// *
// **
// ***
// ****
// *****
<!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/>");
}
// document.write("<pre>第一个write");
// document.writeln("第一个writln");
// document.write("第二个write");
// document.writeln("第二个writln</pre>");
</script>
</body>
</html>
九、函数
JavaScript 函数语法
1.函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname(){
这里是要执行的代码
}
当调用该函数时，会执行函数内的代码。2.调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2){
这里是要执行的代码
}3.带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
function myFunction(){
var x=5;
return x;
}
上面的函数会返回值 5。4.案例：
我们以实现一个求和函数为例来讲解基本的应用
掌握javascript函数传参的特性
掌握javascript的重载问题
实现重载 arguments函数也是数据
函数也是一种数据，我们可以把函数赋值给一个变量
var add = function(a,b,c){
return a+b+c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 函数：相当于Java中的方法
*/
//无参数无返回值的方法
// function fun01(){
// alert("无参数无返回值的方法");
// }
// fun01();
//带参数的方法
// function fun02(a,b){
// var result = a+b;
// alert("带参数的方法 " + result);
// }
// fun02(10,20);
//带返回值的方法
// function fun03(a,b){
// return a+b;
// }
// var sum = fun03(10,20);
// sum = fun03(sum,30);
// alert(sum);
//JS中重载
//注意：JS中没有重载
function add(a,b){
return a+b;
}
function add(a,b,c){
return a+b+c;
}
var sum = add(10,20);
alert(sum);
</script>
</body>
</html>
十、系统提供的预定义函数
parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN
parseFloat()：同上类似
isNaN(xxx)：判断是否为非数字
isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字
eval()：会将其输入的字符串当作javascript代码来执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//将字符串转型成整数
var num1 = parseInt("1000.123");
console.log(num1);
//将字符串转换为小数
var num2 = parseFloat("1000.123");
console.log(num2);
//判断字符串是否是非数字
console.log(isNaN("abc"));//true
//判断字符串是否是数字
console.log(isFinite("123"));//true
//将字符串认为是一段JS代码去运行
eval("alert('用良心做教育');");
</script>
</body>
</html>
3392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
