2018-07-05 第六十天 JavaScript-阿里云开发者社区

开发者社区> 开发与运维> 正文

2018-07-05 第六十天 JavaScript

简介:

JavaScript

一、JS入门

1.JavaScript使网页起来

2.JavaScript非常有趣

3.JavaScript离不开浏览器

定义:

JavaScript是由Netscape(网景)公司研发出来的一种在它的Navigator浏览器上执行的程序语言。

   

JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。

 

JavaScript组成

 70

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 =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 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 ranMath.random();

//4位随机的整数 1000-9999  验证码

var  =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  ="123";

var ="var c=1";

//可以把字符串转化成可以执行的js代码

eval(b);

//console.log(c);

var  f="123a";

alert(Number(f));

//检查某个值是否是数字。 如果不是返回 T  

var flagisNaN(f);

alert(flag);

}

demo4();

</script>

</head>

<body>

</body>

</html>

 70

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章