JavaScript
一、JS入门
1.JavaScript使网页“动”起来
2.JavaScript非常有趣
3.JavaScript离不开浏览器
定义：
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。
JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。
JavaScript组成
1.ECMAScript：JavaScript的核心。
2.文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。
3.浏览器对象模型（BOM）对浏览器窗口进行访问和操作。
扩展：JScript：微软推出的类似JavaScript的语言。
特点：
1.脚本语言：
脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
2、基于对象的语言 ：
面向对象有三大特点（封装，继承，多态）却一不可。
通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”。
3. 事件驱动：
在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
4、简单性 ：
变量类型是采用弱类型，并未使用严格的数据类型。
var a,b,c; a=123; b=“abc”; a=b;
5、安全性 :
JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6、跨平台性:
JavaScript依赖于浏览器本身，与操作平台无关，只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。
缺点：
各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持。
JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
与java的区别：
区别1：公司不同，前身不同：
JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak语言。
区别2：基于对象和面向对象
JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。
区别3：变量类型强弱不同
Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。
二、JavaScript的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--[1]js引入的方式一-->
<script type="text/javascript">
/*js的弹框*/
alert("js学习");
</script>
<!--[2]js的引入方式2-->
<!--src:引入的路径 type：引入否认类型 charset：引入文件的编码 -->
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
<!--
切记：
[1]两种引入方式如果都使用了，那么两种js代码都会执行
[2]在书写js的时候不要把两者书写二合一
-->
</head>
<body>
</body>
</html>
三、JS中的变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
[1]变量的声明
var 变量=值;
[2]变量的使用
js中的变量区分大小写
js中的变量可以重复的，但是重复的变量会覆盖
js中分号可以省略的（不建议这样书写）
js中的双引号和单引号是不区分的
[3]数据类型
number(数字类型)
string(字符串类型)
boolean（布尔类型）
object(对象类型)
[4]特殊数据类型
undefined(未定义的)
NaN（不是一个数字） not a number
null(空对象)
-->
<script type="text/javascript">
var a=1;
var b=1.3;
var c="baidu";
var d='js学习';
var e=true;
var f=new Date();
var a=7;
//js中数据的类型
alert(typeof f);
//特殊数据类型
var aa;
alert(aa);
var bb="123a";
//强制转换成number类型
alert(Number(bb));
var cc=null;
</script>
</head>
<body>
</body>
</html>
四、JS中的运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a=10;
var b =21;
alert(b/a);//2.1
var c="123";
alert(b+a+c);//31123
var d=true;//true--1 false--0
alert(a+d);// 11
var e=1;
var e2="1";// number("1")--1
var e3=true;//--1 number(true)--1
var e4="true";//number("true")--NAN
alert(e==e2);//F--true
alert(e==e3);//T
alert(e==e4);//F
alert(e2==e3);//F--true
alert(e2==e4);//F
alert(e3==e4);//F
alert(e===e2);//F
alert(e===e3);//F
alert(e===e4);//F
alert(e2===e3);//F
alert(e2===e4);//F
alert(e3===e4);//F
</script>
</head>
<body>
</body>
</html>
<!--
算数运算符
+ - * / % ++ --
逻辑运算符
& | ! && || ^ > < >= <= !=
连接运算符
+
特殊运算
==:（等值符）
先进行数据类型的比较 类型不一致 统一转换成number 在比较内容是否一致 ---内容一致返回 T 内容不一致返回 F
===:（等同符）
先进行数据类型的比较 :类型不一致直接返回F ，类型一致在比较内容 ，内容一致返回T ， 不一致返回F
-->
五、JS中的控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
//直接打印到浏览器上
document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br />")
}
</script>
</head>
<body>
</body>
</html>
<!--
js中的控制语句
条件语句
if(){}
if(){}else {}
if(){}else if(){}..else{}
选择语句
switch (a){
case 10:
alert(a);
break;
case 20:
alert(a);
break;
case 30:
alert(a);
break;
default:
break;
}
循环语句
while(){}
do{}while()
for(){}
-->
六、JS中的函数声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
* java声明函数的方式
* public String aa(){
}*/
/*js函数声明的方式一*/
function a(){
alert("我是函数A");
}
/*函数声明方式二*/
var b=function (){
alert("我是函数声明B");
}
/*函数声明方式三 函数本身就是对象 （了解）*/
var c=new Function("alert('我是函数声明C')");
/*****参数的传递*********/
function d(aa,bb){
//输出到浏览器的控制台中
console.log(aa+"---"+bb);
}
// d(1,2);
// d(123); //123---undefined
// d(1,2,3);//1---2
/*js中形参的个数和实参的个数可以不一致*/
/*******函数的返回值******/
function e(){
console.log("方法e");
return 2;
}
//每一个函数没有定义返回值默认返回undefined
// alert(e());
function f(t){
console.log(t());
}
var uu=function(){
alert("我是uu方法");
}
f(uu);
</script>
</head>
<body>
</body>
</html>
<!--
[1]函数声明的方式
方式一：
function 函数名(){
函数体
}
方式二：
var 变量名=function(){
函数体
}
方式三：
var 变量名=new Function("函数体");
[2]函数参数的传递
js中形参的个数和实参的个数可以不一致
[3]函数的返回值
每一个函数如果没有定义返回值默认返回undefined
[4]函数的执行符 ()
-->
七、JS中数组的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*数组的声明*/
function demo1(){
//数组声明方式一
var arr=new Array();
//数组声明方式二 5-长度
var arr2=new Array(5);
//数组声明方式三
var arr3=new Array(1,1.2,"baidu",true,new Date());
//数组声明方式四(常用)
var arr4=[1,1.2,"baidu",true,new Date()];
console.log(arr4);
}
/**数组的使用*/
function demo2(){
var arr=[];
arr[0]=123;
arr[1]=true;
arr[2]="你好";
arr[6]="baidu";
arr[10]=new Date();
//js中数组下标是可以不连续的， 如果没有定义指定的下标内容是empty
console.log(arr);
}
/***数组的扩充**/
function demo3(){
var arr=[1,1.2,"baidu",true,new Date()];
console.log("前："+arr);
//数组的缩小
//arr.length=3;
//数组长度的扩充
arr.length=7;
console.log("后："+arr);
}
/*****数组的遍历***************/
function demo4(){
var arr=[1,1.2,"baidu",true,new Date()];
/*for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}*/
for(var i in arr){
//i是数组的下标
console.log(arr[i]);
}
}
/**数组中常用的方法**/
function demo5(){
var arr=[1,1.2,"baidu",true,new Date()];
//删除最后一个元素,返回元素
//var p= arr.pop();
//在最后添加元素返回的是数组的长度
//var p=arr.push("你好");
console.log(arr);
//删除 从下标为1开始 删除两个
//arr.splice(1,2);
//添加 添加的下标 删除的个数(0) 添加的元素
arr.splice(1,0,false);
console.log(arr);
}
demo5();
</script>
</head>
<body>
</body>
</html>
<!--
[1]数组的声明
[2]数组的使用
[3]数组的扩充
[4]数组的遍历
[5]数组中常用的方法
-->
八、JS中常用的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*****Date日期对象*********/
function demo1(){
var date=new Date();
//118 1900到现在的时间
console.log(date.getYear());
//6 从0-11 月份
console.log(date.getMonth());
//5 日期 几号
console.log(date.getDate());
//4 星期几 0:代表星期天
console.log(date.getDay());
//2018 全年
console.log(date.getFullYear());
//2018/7/5 下午5:57:56
console.log(date.toLocaleString());
}
/********Math 对象**************/
function demo2(){
//范围是0-1 不包含1
var ran= Math.random();
//4位随机的整数 1000-9999 验证码
var a =ran*9000+1000;
//向下取整
console.log(Math.floor(a));
//向上取整
console.log(Math.ceil(12.3));
//四舍五入
console.log(Math.round(12.4));
}
/******字符串对象**************/
function demo3(){
var a="星-期-四";
var b=new String("123");
//期-四
console.log(a.substr(2));
//-期 开始index size
console.log(a.substr(1,2));
//期-四
console.log(a.substring(2));
//- 开始的index 结束的index
console.log(a.substring(1,2));
//字符串的分割 "-" 返回的是一个新的数组
console.log(a.split("-"));
}
/*****Global对象的学习*****/
function demo4(){
var a ="123";
var b ="var c=1";
//可以把字符串转化成可以执行的js代码
eval(b);
//console.log(c);
var f="123a";
alert(Number(f));
//检查某个值是否是数字。 如果不是返回 T
var flag= isNaN(f);
alert(flag);
}
demo4();
</script>
</head>
<body>
</body>
</html>
