2018-07-05 第六十天 JavaScript

最新推荐文章于 2024-01-23 14:40:05 发布

Winnieeeee

最新推荐文章于 2024-01-23 14:40:05 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/Winnieeeee/article/details/80934269

版权

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>

/*js的弹框*/

alert("js学习");

</script>

<!--

切记：

[1]两种引入方式如果都使用了，那么两种js代码都会执行

[2]在书写js的时候不要把两者书写二合一

-->

</head>

<body>

</body>

</html>

三、JS中的变量

<!DOCTYPE html>

<html>

<head>

<!--

[1]变量的声明

var 变量=值;

[2]变量的使用

js中的变量区分大小写

js中的变量可以重复的，但是重复的变量会覆盖

js中分号可以省略的（不建议这样书写）

js中的双引号和单引号是不区分的

[3]数据类型

number(数字类型)

string(字符串类型)

boolean（布尔类型）

object(对象类型)

[4]特殊数据类型

undefined(未定义的)

NaN（不是一个数字） not a number

null(空对象)

-->

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>

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>

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>

* 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>

/*数组的声明*/

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>

/*****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>

Winnieeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018-07-05 第六十天 JavaScript

JavaScript一、JS入门1.JavaScript使网页“动”起来2.JavaScript非常有趣3.JavaScript离不开浏览器定义：JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。 JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言...
复制链接

扫一扫