Javascript学习1

最新推荐文章于 2024-05-06 15:03:18 发布

danny1991

最新推荐文章于 2024-05-06 15:03:18 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/danny1991/article/details/49494215

版权

一、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.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
*** 推荐：定义函数的不要重名。

函数劫持：
把J avaScript预定义好的函数改变了其作用.

六、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.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 οnlοad="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="变变变" οnclick="fun()">
	 <input type="button" value="变变变1" οnclick="fun1()">

	 <h1 id = "h1"><font>你好</font></h1>
	 <input type="button" value="演示innerHTML和innerText的区别" οnclick="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/ ;

danny1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习1

一、Javascript概述(知道)a.一种基于对象和事件驱动的脚本语言b.作用：给页面添加动态效果c.历史：原名叫做livescript.W3c组织开发的标准叫ECMAscipt.d.特点： 1). 弱势语言 2). 由浏览器直接解析执行。（函数不能直接执行） 3). 是一个解释性语言 4). 交互性（它可以做的就是信息的动态交互） 5).
复制链接

扫一扫