03_JavaScript_day1
2021-11-12 本文已影响0人
Du1in9
一、介绍JavaScript
JavaScript是一种轻级的脚本语言，也是一种嵌入式语言，是一种对象模型语言。JavaScript 的核心语法部分相当精简，也就是语言本身，只包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（一系列具有各种功能的对象比如Array、Date、Math等）。想要实现其他复杂的操作和效果，都要依靠宿主环境提供APl，目前，已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境（操作系统）；JavaScript被认为是客户端脚本，它不常叫语言，言外之意是比较简单。但是深入了解之后，你会发现简单的外表下，蕴藏着丰富的内涵。
- JS的强大之处
① 数据验证（表单验证）
② 网页特效（目前大多数网页特效都是通过JS编写）
③ 编写网页小游戏
④ 服务器端编程，数据交互（Ajax、Node.js）
二、如何学习JS
1、IDE
zendstudio
Visio studio
netbeans
phpstrom
webstrom
HBuilder
Sublime Text
2、调试工具
检测JavaScript执行结果最好的工具就是浏览器（推荐Google、Firefox）。
三、语言基础
1、代码位置
JS代码要写到一对script标签中。
script标签要放到哪里？哪都行，只要在html页面中就可以。
除此以外，还可以单独创建一个后缀为js的文件，需要html文件引入js文件。
2、输出
① document.write (输出的内容)；//这种输出的内容会显示在浏览器页面。
② alert (输出的内容)；//这种输出的内容会以提示框的形式显示。
③ console.log (输出的内容)；//这种输出的内容会显示在浏览器的控制台。推荐使用。
3、语句与表达式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//类似于PHP中的 echo 'hello';
document.write("hello_world");
//在浏览器上弹出窗口
alert(123);
//输出的内容在浏览器的控制台
console.log(456,789,"hello");
console.log("apple","huawei");
console.log(1+2+3);
</script>
</body>
</html>
① 变量
<script>
var a=1;
var b;
b=2;
var c=4,d=5,e=6;
console.log(a,b,c,d,e);
var x;
console.log(x) //undefined
function t(){
console.log(m);
var m=3;
}
t(); //undefined
</script>
② 常量
<script>
const A=123;
console.log(A); //123
for(i=0;i<5;i++){
const B=3; //3 3 3 3 3
console.log(B);
}
console.log(B); //B is not defined
function m(){
const C=4;
}
m();
console.log(C); //C is not defined
</script>
③ 运算符
<script>
// 1、赋值运算符（Assignment operators）
// 2、比较运算符（Comparison operators）
var a=1,b=2;
if(a==b){ //false
console.log("相等");
}else{
console.log("不相等");
}
if("false"){
console.log(123); //true
}
// 3、算数运算符（Arithmetic operators）
var d=2,e=5;
d+=e;
d%=e;
console.log(d,e);
// 4、逻辑运算符（Logical operators）
if(true&&false){ //false
console.log(123);
}else{
console.log(456);
}
var a=1,b=2,c=0,d=false;
console.log(a||b); //1
console.log(a||c); //1
console.log(c||a); //1
console.log(c||d); //false
console.log(a&&b); //2
console.log(a&&c); //0
console.log(c&&a); //0
console.log(c&&d); //0
// 5、字符串运算符（String operators）
console.log(123+"hello");
console.log("hello"+"world")
const x=35;
console.log("hahaha"+x);
console.log("hi"+['a','bb','ccc'])
// 6、三元运算符（Conditional operator）
var b=3,c=2;
var a=(b>c)? 5:6
console.log(a);
console.log('false'==fasle ? 1:2);
// 7、一元运算符（Unary operators）
var a=2,b=3;
var c=a++;
var d=++b;
console.log(a,b--,c,d);
// 8、其他
// void 一个函数或一个语言结构，返回值总是无效的undefined。经常用它来使得超链接变得无效。
<a href='javascript:void(0);'></a>
// typeof 一个函数或一个语言结构。typeof（a）、typeof a；用于判断变量的数据类型。
console.log(typeof(123));
console.log(typeof 123);
console.log(typeof 3.14159);
console.log(typeof 'hello_world');
console.log(typeof true);
// in 用于判断下标是否存在数组中，或判断对象中是否有哪个成员+
// instanceof 判断对象的原型
</script>
④ 数组
<script>
var arr1=[]; //空数组
var arr2=['apple','banana'];
var arr3=new Array(); //空数组
var arr4=new Array('apple','banana');
var arr5=new Array(4); //表示数组含有4个单元
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
console.log(arr2[0]); //apple
console.log(arr2.length);
console.log(1 in arr2); //true
console.log(3 in arr2); //false
console.log(1 in arr1); //false
arr3=[]; //清空数组
arr4.length=0; //清空数组
</script>
⑤ 对象
<script>
// 1、创建对象
var obj1={}; //空对象
var obj2={name:'张三丰',age:99};
var obj3={
name:'李四',
age:99,
profession:['打手','司机'],
kungfu:function(){
console.log('降龙十八掌'+' 我的名字：'+this.name);
}
}
console.log(obj1);
console.log(obj2);
console.log(obj3);
// 2、获取对象的成员
console.log(obj3.name);
console.log(obj3.age);
obj3.kungfu();
// 3、判断对象的成员
console.log('kungfu' in obj3); //true 判断成员name是否在对象中
// console.log(kungfu in obj3); //false 判断变量name是否在对象中
// 4、添加对象的成员
obj3.sex='男';
obj3.test=function(){
console.log(this.sex);
}
console.log(obj3);
delete obj3.test; //删除成员方法，不要加小括号
delete obj3.name;
console.log(obj3);
</script>
四、数据类型
- 数据类型
Javascript 语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种（ES6又新增了第七种symbol类型的值）：
① number
② string
③ bool
④ null：空值，如果要设置一个变量的值为null，只能手动设置。null也是一个对象。
⑤ undefined：未定义，如果一个变量声明了，但是没有给值，则这个变是的值就是undefined。
⑥ object：狭义的对象、数组、函数（JS中任何数据类型都可以看做是对象）
使用typeof无法区分null、数组、对象，要想区分他们三个，必须使用 instanceof
使用instanceof的语法：变量 instanceof 类型（包括Array、Object）;
如果一个变量instanceof Array 之后，结果为true，则表示变是是数组类型；
如果一个变量instanceof Object之后，结果为true，则表示变量是对象类型；
通常我们将数值、字符串、布尔值称为原始类型的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型的值或引用类型，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。
对象又可以分成三个子类型，即狭义的对象（object）、数组（array）、函数（function），更加广义的讲，原始类型的值（数值、字符串、布尔）也可以看做对象。
<script>
var a=123; //number:int
var b=3.14 //number:float
var c='hello'; //string
var d=true; //blooean
var e=null; //object:null
var f; //undefined
var g=['apple','pear']; //object:array
var h={name:'李四',age:33}; //object:object
function m(){}; //object:object
function myTypeOf(x){
if(x instanceof Array){
return 'array';
}else if(x instanceof Object){
return 'object';
}else{
return 'null';
}
}
console.log("a:"+typeof(a));
console.log("b:"+typeof(b));
console.log("c:"+typeof(c));
console.log("d:"+typeof(d));
console.log("e:"+myTypeOf(e));
console.log("f:"+typeof(f));
console.log("g:"+myTypeOf(g));
console.log("h:"+myTypeOf(h));
console.log("m:"+myTypeOf(m));
</script>
- 原始类型和引用类型
引用类型指的是狭义上的对象，数组不应该算引用类型。区分是否是引用类型，关键看内存图。对象在内存的栈区只保存它的地址，在堆区保存它的实际内容，这种类型的变量就是引用类型。
<script>
var obj={name:'王麻子',age:20};
function change(o){
o.name='张三';
}
console.log(obj);
change(obj); //对象作为函数的参数
console.log(obj);
var obj1=obj;
obj1.age=33; //两个对象执行同一个堆区地址
console.log(obj1)
var obj2=obj;
obj2=null; //改变其中一个对象，重新分配内存
console.log(obj2);
</script>
