web 学习笔记3-JavaScript
2017-04-23 22:30
344 查看
1、Javascript概述：
2、JavaScript语言组成：
3、JavaScript与Html的结合方式：
4、JavaScript基本语法：
5、JavaScript 函数的定义：
6、JavaScript 全局函数：
7、JavaScript常用对象介绍：
a.一种基于对象和事件驱动的脚本语言 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是面向对象。 基于对象就是已经存在对象，面向对象就是需要自己创建对象。
2、JavaScript语言组成：
EcMAScript + BOM + DOM ECMAScript: 规定了一些语法，变量，for循环等等结构 BOM: Browser object Model 浏览器对象模型 DOM: Document object Model 文档对象模型
3、JavaScript与Html的结合方式：
Javascript与HTML的结合方式有三种：
1.采用事件来调用，代码写在字符串中
<button onclick = "alert('大家好')">点击</button>
2.采用定义函数的方式: 用function来定义函数
function fun(){ alert('你好')} ;
3.采用外部js文件.
利用<script src = "a.js"></script>引入
例如：
<!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="">
<script type="text/javascript" src = "a.js"> </script>
<title>Document</title>
</head>
<body>
<p onclick = "alert('你好')" id = "p">大家好</p>
</body>
</html>4、JavaScript基本语法：
定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
数据类型：
undifined,表示未定义类型。
Number类型。代表了一切数字类型
String类型。字符串类型
Boolean类型。布尔类型
Function类型。函数类型
Null类型。
object ：对象类型.
判断变量的类型 :
1. 采用typeof函数判断 :typeof(a) == "string"
2. 采用instanceof运算符： a instanceof String
类型的转换：
1. Number转String : 3 + ""
2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.
3. String转Number:
a. parseInt,parseFloat
b. 乘以1即可
注意：乘以1比较少的一种写法
例如：
<!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>javascript基本语法</title>
</head>
<script type="text/javascript">
<!--
/*
javascript中的数据类型：
a. 基本类型
1. undefined: 没有给变量赋值时的类型
2. String：
3. Boolean
4. Number:
5. function:
6. null
b. 引用类型
Object
判断变量的类型有两种方式：
1. 采用typeof(): 打印的是所有类型的toString方法(所有类型的小写)
2. 采用instanceof关键字判断： 是判断变量是不是由某种类型new出来的
*/
/*var a ;
a = 10 ;
a = "abc" ;
a = true;
a = function(){
alert("aaa");
}
alert(typeof(a)) ;*/
a = 10 ;
a = new Number(10) ;
//alert(a instanceof Number) ;
//alert(typeof(a) == "number") ;
//-->
</script>
<body>
</body>
</html>5、JavaScript 函数的定义：
函数的定义有三种方式：
1.采用function关键字来定义
2.采用匿名的方式来定义
3.采用new Function()的方式(了解,不推荐)
function fun(){
alert("大家好") ;
}
var a = function(){
alert("我是匿名函数") ;
}
var b = new Function("x","y","z","alert(x+y+z)") ;
函数的调用：
1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合
2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
定义函数的不要重名。
函数劫持：改变函数本身的作用.
劫持例如：
<!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>Document</title>
</head>
<body>
<script type="text/javascript">
<!--
//函数劫持:改变javascript的预定义的函数预定义好的功能
window.alert = function(x){
document.write(x) ;
}
alert("abc") ;
//-->
</script>
</body>
</html>6、JavaScript 全局函数：
全局函数：
1.isNaN：用来判断变量是否是数字类型的字符串
NaN: not a Number ,不是一个数字
2.parseInt,parseFloat
3.eval: 把字符串转换成数字
4.escape(): 编码
5.unescape(): 解码
6.encodeURI(): 对网址（URL）进行编码
7.decodeURI(): 对网址（URL）进行解码
例如：
var a = "100" ;
if(isNaN(a)){
alert("不是数字") ;
}else
alert("是数字") ;
运行的结果是：数字7、JavaScript常用对象介绍：
a、Array对象 数组对象，进行数组操
定义方式
1.采用new的方式
2.采用中括号[]来定义
数组的长度可以随时改变
特点：
1.javascript中数组的大小可以随时改变
2.javascript中数组的下标可以是任意对象。
方法：
1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
2.push() : 向数组的末尾添加一个元素
3.reverse() :反转
4.shift() : 删除并返回数组的第一个元素
5.sort() ; 排序 .默认同类型的数据相比较.
例如：
<script type="text/javascript">
<!--
var arr = new Array() ; //定义一个数组arr,初始长度为0
var arr1 = new Array(4) ; //定义一个数组arr1,初始长度是4
arr1[0] = 1 ;
arr1[1] = 10 ;
alert(arr1[2]) ;//弹出来undefined,没有初始化
var arr2 = new Array(1,2,3,4,5) ; //定义一个数组arr2，初始化数据是1,2,3,4,5
var arr3 = [] ; //定义了一个数组，里面是空的
var arr3 = [3,2,4,5] ; //定义了一个数组，同时初始化数据
//注意：
var arr4 = [1,2,"4",true,45.8,false,"abc"] ;//数组里面可以存放不同类型的数据
//alert(arr4[3]) ;
alert(arr4.length) ;
arr4.length = 2 ; //将数组的长度变为2，多于的数据将消失了
//alert(arr4[2]) ; //弹不出原来的数据了，弹出来undefined
var arr5 = ["中国","美国","日本"] ;
arr5["中国"] = ["北京","上海","天津"] ;
alert(arr5["中国"][0]) ;
alert(typeof(arr5)) ;//弹出 object
//-->
</script>
一个简单的例子：
<!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>hello</title>
</head>
<body onload = "init()">
<script type="text/javascript">
<!--
//示例：标题栏的滚动
function init(){
//1.拿到标题栏的文本
var title = document.title ;
//alert(title) ;
//2.将文本字串转换为数组
var arr = title.split("") ;
//3.拿到数组的第一个元素，并从数组中删除
var first = arr.shift() ;
//4.将第一个元素添加到数组的最后
arr.push(first) ;
//5.将数组再组合成一个字符串
title = arr.join("") ;
//6.将字符串再赋值回标题栏
document.title = title ;
//7.每隔1秒做一遍前6步
setTimeout("init()",1000) ;
}
//-->
</script>
</body>
</html>
b、String对象 ----- 字符串类型的引用类型
substr: 截取字符串 两个参数第一个是下标，第二个是长度
substring: 截取字符串 两个参数第一个是下标，第二个是下标
toUppercase:
toLowercase:
indexOf:
charAt() :
replace():
var s = "abcdefg" ;
alert(s.substring(2,3)) ;//结果是：c
alert(s.substr(2,3)) ; //3是i长度，不是索引，结果是：cde
c、Number对象 ---- 数字原始类型引用类型
1. random() : 获得随机数[0,1)
2. ceil() : 返回大于等于次数的最大整数
3. floor() : 返回小于等于次数的最大整数
4. round(): 返回四舍五入后的整数
d、Boolean对象 ---- 布尔原始类型引用类型
e、Math对象 执行数学任务
1.floor(x): 取得小于等于x的最大整数
2.ceil(x) :取得大于于等于x的最大整数
3.random(): 取得0~1之间的随机数(可以等于0，永远不能取得1)
4.round(): 四舍五入为整数
<script type="text/javascript">
<!--
var a = 3.1;
alert(Math.floor(a)) ;//3
alert(Math.ceil(a)) ;//4
alert(Math.round(a))//3
//-->
</script>
f、Date对象 用于处理日期和时间
<script type="text/javascript">
<!--
/*
Date对象：1.拿到当前时间：new Date() ;
2.拿到年月日，时分秒： getXXX() ;
*/
var d = new Date() ;
alert(d.toLocaleString()) ;
alert(d.getYear()) ;
alert(d.getMonth());
alert(d.getDate()) ;
alert(d.getDay()) ;
//-->
</script>
g、RegExp 对象正则表达式对象
写法：
1. new的方式 var r = new RegExp("ab") ;
2. 采用/正则表达式/ (推荐) var r = /ab/ ;
例如：
<script type="text/javascript">
<!--
var reg = /(..)./ ; //括号表示子匹配，就是对结果进一步匹配
var s = "abcde" ;
alert(reg.test(s)) ; //测试字符串中是否包含正则表达式中所匹配的字符串,返回的是boolean类型的，结果：true
alert(reg.exec(s).length) ; //以数组的形式返回匹配的正则表达式的字符串，结果：2
alert(reg.exec(s)[0] + ":" + reg.exec(s)[1]) ;//结果 abc:ab
alert(/(.)./.exec(s));//结果 ab,a
//-->
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Box2d的javascript版本Box2dWeb-2.1a.3学习笔记（一）
- web开发-javascript编程prototype、this、ajax、json、结构体和数组-学习笔记十四
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结
- Java for Web学习笔记（四五）：WebSocket（2）JavaScript Client
- 【Web前端学习笔记】Javascript_01_变量，数据类型，类型转换
- （13）JavaScript学习笔记 - Web浏览器环境
- web 学习笔记4-BOM和JavaScript事件
- 【Web前端学习笔记】Javascript_03_常用对象：String,Number,Math,Date,网页时针
- 【Web前端学习笔记】Javascript_04_BOM,DOM思想,正则表达式
- 【Web前端学习笔记】Javascript_02_运算符，控制语句，常用语句，函数定义
- web 学习笔记6-JavaScript面向对象
- 百度web-ife前端学院-task2 JavaScript基础学习笔记
- （13）JavaScript学习笔记 - Web浏览器环境
- 我的学习笔记005--常见web前台技术之间的关系html，css，javascript...
- JavaScript学习笔记7
- JavaScript 学习笔记 2
- JavaScript学习笔记6
- JavaScript 学习笔记 4
- JavaScript 学习笔记 3
- ASP.NET Forum 学习笔记系列--Web.config