您的位置：首页 > Web前端 > JavaScript

Javascript学习1

2015-10-29 17:17 555 查看

一、Javascript概述(知道)

a.一种基于对象和事件驱动的脚本语言       

脚本语言，嵌入在其他语言中的语言，寄生语言，java也是 
事件驱动：发生那件事，执行这个动作
面向对象：继承，封装，多态    需要new一个对象
基于对象：对象已经存在

b.作用： 给页面添加动态效果

c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.

d.特点：

1). 弱势语言

2). 由浏览器直接解析执行。（函数不能直接执行）

3). 是一个解释性语言

4). 交互性（它可以做的就是信息的动态交互）

5). 安全性（不允许直接访问本地硬盘） 
沙箱
6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关

e . javascript和java的一些区别：

1). javascript是一个解释性语言,java是编译解释性语言

2). javascript是一个弱势语言，Java是一个强势语言

3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>

4). JS是基于对象，Java是面向对象。

二、JavaScript语言组成(了解)

EcMAScript  + BOM + DOM 

ECMAScript: 规定了一些语法，变量，for循环等等结构

BOM: Browser  object  Model 浏览器对象模型

DOM: Document  object  Model 文档对象模型

三、JavaScript与Html的结合方式(掌握)

Javascript与HTML的结合方式有三种：                一般写在head与body之间

1.采用事件来调用，代码写在字符串中

<button onclick = "alert('大家好')">点击</button>

2.采用定义函数的方式: 用function来定义函数 

function fun(){ alert('你好')} ;

<script type="text/javascript">
<!--
alert("哈哈哈");
//-->
</script>


3.采用外部js文件.

利用<script src = "a.js"></script>引入
可以取任意后缀名，只要内部是JavaScript代码

四、JavaScript基本语法(掌握)

* 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。

* 数据类型：   
a、基本类型： undifined,表示未定义类型。

Number类型。代表了一切数字类型

String类型。字符串类型

Boolean类型。布尔类型

Function类型。函数类型

Null类型。 

b、引用类型：object ：对象类型.

* 判断变量的类型 : 
1. 采用typeof函数判断 :typeof(a) == "string"           打印的是所有类型的toString方法（所有类型的小写）
2. 采用instanceof运算符： a instanceof String        是判断变量是不是由某种类型new出来的   

例子：
var a = 10;
alert(a instanceof Number);         结果是false

var a = new Number(10);

alert(a instanceof Number);         结果是true

* 三大结构

a.顺序结构

b.选择结构

c.循环结构 for,while,do...while

* 运算符

1.一元运算符 +(正号) -  ++ -- 

2.二元运算符 +(加法) - * / %       取模可以针对于浮点数

3.三元运算符 ？ ：
4.等号            == 判断的是内容,                      
  例子： var a = 100; var b ="100"; alert(a==b);          结果为true！！！！

                      === 全等于 ,判断类型和内容

* 类型的转换

1. Number转String : 3 + ""

2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.

3. String转Number:   数字类型的String！！

a. parseInt,parseFloat

b. 乘以1即可

4、NaN： not a number     假的！

五、JavaScript 函数的定义（掌握）

* 函数的定义有三种方式： 

1.采用function关键字来定义
2.采用匿名的方式来定义 

3.采用new Function()的方式(了解,不推荐)
function fun(){
alert("大家好") ;
}
//  fun() ;

var a = function(){
alert("我是匿名函数") ;
}
// a() ;

var b = new Function("x","y","z","alert(x+y+z)") ;
// b(3,4,5) ;


* 函数的调用：         没有重载

1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合

2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。

*** 推荐： 定义函数的不要重名。

函数劫持：

把JavaScript预定义好的函数改变了其作用.

六、JavaScript 全局函数(掌握)

全局函数：

1.isNaN (掌握)：用来判断变量是否是数字类型的字符串

NaN: not a Number ,不是一个数字，true   值判断内容

2.parseInt,parseFloat
3.eval(掌握): 

执行字符串，把字符串转换成数字

alert(eval("3 + 5")+eval("2"));           结果为10

将json格式的字符串转换为json格式

4.escape(): 编码

5.unescape(): 解码

6.encodeURI(): 对网址（URL）进行编码

7.decodeURI(): 对网址（URL）进行解码

七、JavaScript常用对象介绍（掌握）

* Array对象 数组对象，进行数组操作

定义方式

1.采用new的方式       一个数字是初始化长度，一个字符串时初始化数据，多个数字则是初始化数据
2.采用中括号[]来定义

var arr = [];

数组的长度可以随时改变      初始长度为0          未初始化或不存在的就是undefined

特点： 

1.javascript中数组的大小可以随时改变
2.javascript中数组的下标可以是任意对象。

java与JavaScript数组的差别：

a. Java中数组是有类型的，意味着一旦类型确定，则数组中所有的数据都是同一种类型。

    javascript中数组时没有类型的，意味着数组中的数据可以存放任意类型 (不推荐)

b. java中数组的长度一旦确定就不能再更改了

    javascript中数组的长度是可以变化的(扩大缩小都可以)

    变长的两种办法 : 1) 指定length属性的值

                                  2) 指定某个数组中元素的值

c. java中的数组的数据引用必须用下标引用，下标必须是整数.

    javascript中数组的数据引用可以用任意对象     主要是因为没有二维数组

方法： 

1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接  arr.join(“”);没有东西连接

2.push() : 向数组的末尾添加一个元素

4.reverse() :反转

3.shift() : 删除并返回数组的第一个元素
4.sort() ; 排序 .默认同类型的数据相比较.

默认情况下先将能转换为number类型的字符串和number类型的放一起比较(转为string类型比较)

转换不成的作为一组进行比较

如果想按自己的规则进行比较，那么需要传递一个function类型的参数制定比较规则。

自定义升序：

alert(arr1.sort(function(a,b){    //传递一个function类型参数，制定我们的比较规则
if(a *1  > b*1)
return 1 ;
else
return -1 ;
})) ;


标题栏滚动的应用实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
c0fd
0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北京传智播客黑马训练营</title>
</head>
<script type="text/javascript">
<!--
function init(){
//1、拿到文本
var title = document.title;
//2、将文本转换成数组
var arr=title.split("");
//3、拿到数组的第一个元素，并从数组中删除
var first = arr.shift();
//4、将第一个元素添加到数组的最后
arr.push(first);
//5、将数组再组合成字符串
title = arr.join("");
//6、将字符串再赋值为标题栏
document.title = title;
//7、每隔一秒更新一次标题栏
setTimeout("init()",1000);
}
//-->
</script>
<body onload="init()">
</body>
</html>


* String对象 ----- 字符串类型的引用类型

String对象： 

方式： substr: 截取字符串 两个参数第一个是下标，第二个是长度

substring: 截取字符串 两个参数第一个是下标，第二个是下标   不包括最后一个下标，顺序都可以   下面的例子中为c

toUppercase:

toLowercase:

indexOf:

charAt() :
replace():

String实例，并演示innerHTML与innerText的区别，innerHTML包含头尾标签的内部全部HTML代码，而innerText则只包含头尾标签中的文本！！！

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>String对象</title>
</head>
<script type="text/javascript">
<!--
/*
String对象的方法：
1. substr(): 截取子字符串,两个参数，第一个参数是下标，第二个参数是截取的长度
2. substring(): 截取子字符串，两个参数，代表的是下标

*/

function fun(){
//1.拿到p标签对象
var p = document.getElementById("p") ;
//2.拿到p标签对象的主体内容
var txt = p.innerHTML ; //innerHTML必须是有开始标签和结束标签的标签对象才能使用
//3.改变字体内容，再赋值回去
p.innerHTML = txt.big().big() ;
}

//示例：点击变变变1按钮，让p标签中的文本的颜色随机变换
var arr = ["red","blue","green","yellow","#666666"] ;
function fun1(){
//1.拿到p标签对象
var p = document.getElementById("p") ;
//2.随机取得一个整数作为数组的下标
var index = Math.floor(Math.random()*arr.length) ;
//3. 拿到p标签对象的主体内容
// var txt = p.innerHTML ;
var txt = p.innerText ;
//3.给p标签对象的主体内容改变颜色，并赋值回去
p.innerHTML = txt.fontcolor(arr[index]) ;
// alert(p.innerHTML) ;

setTimeout("fun1()",500) ;
}

function fun2(){
var txt = document.getElementById("h1").innerHTML ;
txt = document.getElementById("h1").innerText;
alert(txt) ;
}

var s = "abcdefg" ;
//alert(s.substring(2,3)) ;
// alert(s.substring(300,-200)) ;
alert(s.substr(2,3)) ; //3是i长度，不是索引
//-->
</script>
<body>
<p id = "p">大</p>
<input type="button" value="变变变" onclick="fun()">
<input type="button" value="变变变1" onclick="fun1()">

<h1 id = "h1"><font>你好</font></h1>
<input type="button" value="演示innerHTML和innerText的区别" onclick="fun2()">
</body>
</html>


* Number对象 ---- 数字原始类型引用类型

* Boolean对象 ---- 布尔原始类型引用类型 

* Math对象 执行数学任务

1. random() : 获得随机数[0,1)      可以取到0，不能取到1

2. ceil() : 返回大于等于次数的最大整数

3. floor() : 返回小于等于次数的最大整数

4. round(): 返回四舍五入后的整数

* Date对象 用于处理日期和时间

Date对象： 代表一个时间

toLocaleString:当地时间格式。

方法： getXXX() : 拿到年月日

a.toLocaleString();
a.getYear();              //年-1990
a.getMonth();           //月-1
a.getDate();             //
a.getDay();              //日是0,三是3


* RegExp 对象正则表达式对象 

正则表达式

写法： 1. new的方式   var r = new RegExp("ab") ;

      2. 采用/正则表达式/ (推荐)  var r = /ab/ ;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航