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>

转载于:https://my.oschina.net/u/3854538/blog/1841096

2018-07-05 第六十天 JavaScript相关推荐

  1. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  2. JavaScript学习（六十九）—正则表达式实训题

    JavaScript学习(六十九)-正则表达式实训题 复习一下所学的知识 实训练习

  3. JavaScript学习（六十八）—表单校验案例

    JavaScript学习(六十八)-表单校验案例 学习内容 (一).如何获取页面的元素-利用id获取 格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...

  4. JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题

    JavaScript学习(六十六)-字符串对象常用的属性和方法总结以及数组元素的排序问题 学习内容 一.数组去重问题 二.二维数组的定义 三.二维数组的元素操作 四.二维数组的遍历 五.关联数组 六. ...

  5. JavaScript学习（六十五）—数组知识点总结

    JavaScript学习(六十五)-数组 学习内容 一.什么是数组 二.数组的分类 三.数组的创建方式 四.数组元素 五.数组的操作 六.数组元素遍历的四种方法 七.随机数为数组赋值 八.数组的比较 ...

  6. JavaScript学习（六十四）—关于JS的浮点数计算精度问题解决方案

    JavaScript学习(六十四)-关于JS的浮点数计算精度问题解决方案 您的语言没有中断,它正在执行浮点数学运算.计算机只能本地存储整数,因此它们需要某种表示十进制数字的方式.此表示并不完全准确.这 ...

  7. JavaScript学习（六十二）—解析选项和序列化选项

    JavaScript学习(六十二)-解析选项和序列化选项 一.解析选项 格式:JSON.parse(参数1,参数2); 参数说明 参数1:表示要转换为JS对象的json字符串 参数2:表示将json转 ...

  8. 第十弹：网络公开课，免费学习资源，2020.07.05更新

    第十弹:网络公开课,免费学习资源,2020.07.05更新 按照个人兴趣整理的网络公开课资源导航网址:http://www.trochilidaetechnology.com/ 以下为[网络公开课]领 ...

  9. 怀化学院计算机设计大赛报名系统,怀化学院六十周年校庆第十一届大学生计算机程序设计竞赛暨2018年湖南省第十四届大学生程序设计大赛选拔赛成功举办...

    原标题:怀化学院六十周年校庆第十一届大学生计算机程序设计竞赛暨2018年湖南省第十四届大学生程序设计大赛选拔赛成功举办 比赛 信息 1 比赛名称:怀化学院六十周年校庆第十一届大学生计算机程序设计竞赛暨 ...

最新文章

  1. mysql 主从复制 和基于gtid的mysql主从复制
  2. python手机版怎么用-QPython，一个在手机上运行Python的神器
  3. 程序员崩溃的40个瞬间！（动图）
  4. JS中变量和函数的使用
  5. thinkphp mysql 更新_THINKPHP5修改数据库数据出现“缺少更新条件”的错误
  6. 开启httponly之后登陆失败_二次元约会模拟《少女都市》正式版登陆Steam 橘势大好...
  7. php最新版本的安装,centos安装新PHP版本
  8. OPC数据访问方法简介
  9. rdd与mysql表 join_Spark 之RDD
  10. Python查看文章中每个单词的出现频率
  11. 【Mybatis】mybatis的小细节
  12. 2021 年下半年软考-初级程序员考后感想
  13. Python打包成exe.文件教程分享
  14. JS获取浏览器版本号
  15. SSL证书问题SSL certificate problem: self signed certificate
  16. 业务流程图设计-Visio设计
  17. 胡昊—第6次作业—static关键字、对象
  18. 详解 ARM PMU (Performance Monitoring Unit)
  19. （SEED-Lab) Sniffing_Spoofing
  20. 二、生理信号处理 ——1.心电信号(含Matlab代码及数据)

热门文章

  1. week9 - B - 东东学打牌
  2. 狂神说SpringBoot最全笔记
  3. 安卓实现微信朋友圈查看图片功能
  4. Python基础之六面向对象高级编程
  5. Android 相机服务连接失败,android-无法连接到摄像头服务
  6. 2021年中国货物运输量、货物运输周转量及港口货物情况分析[图]
  7. 四种常见的ps怎么模糊背景的方法
  8. 更新版：整理下苏生不惑开发过的那些工具和脚本
  9. 【51单片机】MPU6050陀螺仪控制舵机设计
  10. MDict 平台上的 Merriam-Webster'sCollegiateDictionary 在 EEM 联动下的安装与使用