一、Javascript概述(知道)
a.一种基于对象和事件驱动的脚本语言b.作用： 给页面添加动态效果
c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscipt.
d.特点：
1). 弱势语言e . javascript和java的一些区别：
2). 由浏览器直接解析执行。（函数不能直接执行）
3). 是一个解释性语言
4). 交互性（它可以做的就是信息的动态交互）
5). 安全性（不允许直接访问本地硬盘）
6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关
1). javascript是一个解释性语言,java是编译解释性语言
2). javascript是一个弱势语言，Java是一个强势语言
3). 在页面上引入的方式不同javascript代表用<script>引入，Java代码<%>
4). JS是基于对象，Java是面向对象。
二、JavaScript语言组成(了解)
EcMAScript + BOM + DOMECMAScript: 规定了一些语法，变量，for循环等等结构
BOM: Browser object Model 浏览器对象模型
DOM: Document object Model 文档对象模型
三、JavaScript与Html的结合方式(掌握)
Javascript与HTML的结合方式有三种：1.采用事件来调用，代码写在字符串中
<button onclick = "alert('大家好')">点击</button>2.采用定义函数的方式: 用function来定义函数
function fun(){ alert('你好')} ;3.采用外部js文件.
利用<script src = "a.js"></script>引入
四、JavaScript基本语法(掌握)
* 定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。* 数据类型： undifined,表示未定义类型。
a. 基本类型1. undefined: 没有给变量赋值时的类型
2. String：
3. Boolean
4. Number:
5. function:
6. null
b. 引用类型
Object
* 判断变量的类型 :object ：对象类型.
1. 采用typeof函数判断 :typeof(a) == "string" 打印的是所有类型的toString方法(所有类型的小写)
2. 采用instanceof运算符： a instanceof String 是判断变量是不是由某种类型new出来的
* 三大结构
a.顺序结构
b.选择结构
c.循环结构 for,while,do...while
* 运算符
1.一元运算符 +(正号) - ++ --
2.二元运算符 +(加法) - * / %
3.三元运算符 ？ ：
4.等号 == 判断的是内容,
=== 全等于 ,判断类型和内容
var a = NaN ;
if(a)
alert("真的") ;
else
alert("假的");
function fun(){
//拿到文本框对象的value属性的值
var txt = document.getElementById("age").value ;
//判断内容
if(txt==100)
alert("年龄等于100") ;
else
alert("年龄不等于100") ;
}
//-->
</script>
<body>
年龄:<input type="text" name="" id = "age">
<input type="button" value="弹出年龄" οnclick="fun()">
</body>* 类型的转换
1. Number转String : 3 + ""
2. Number转Boolean ：在javascript中，非0为真，0为假。如果变量为null或者undefined，也为假.
3. String转Number:
a. parseInt,parseFloat4.把字符串转为boolean：非零为真，零/null/undefined/NaN为假
b. 乘以1即可
五、JavaScript 函数的定义（掌握）
* 函数的定义有三种方式：1.采用function关键字来定义
2.采用匿名的方式来定义
3.采用new Function()的方式(了解,不推荐)
小括号中最后一个参数是函数体，之前所有的参数都是形参.
* 函数的调用：
1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合
2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。
*** 推荐： 定义函数的不要重名。
函数劫持：
改变函数本身的作用.改变javascript的预定义的函数预定义好的功能
<body>
<script type="text/javascript">
<!--
//函数劫持:改变javascript的预定义的函数预定义好的功能
window.alert = function(x){
document.write(x) ;//将参数的内容打印在页面上
}
alert("abc") ;
/*var a = function(){
alert("1") ;
}
a = function(){
alert("2") ;
}*/ //不是函数劫持
//-->
</script>
</body>六、JavaScript 全局函数(掌握)
全局函数：1.isNaN (掌握)：用来判断变量是否是数字类型的字符串x 返回true：不是数字
NaN: not a Number ,不是一个数字2.parseInt,parseFloat
3.eval(掌握): 把字符串转换成数字
4.escape(): 编码b.将json格式的字符串转换为json
{"a":"中国","b":"美国","c":"日本"}
5.unescape(): 解码
6.encodeURI(): 对网址（URL）进行编码
7.decodeURI(): 对网址（URL）进行解码
<body>
<script type="text/javascript">
<!--
/*
NaN: not a number
1.isNaN: 是不是一个数字。返回TRUE不是数字
2.parseInt,parsetFloat
3.eval:
a.主要执行字符串,将结果转换为数字
b.将json格式的字符串转换为json
{"a":"中国","b":"美国","c":"日本"}
4.escape():
*/
var a = "100" ;
/*if(isNaN(a)){
alert("不是数字") ;
}else
alert("是数字") ;*/
// alert(eval("3 + 10") + eval("2")) ;
var b = "中国" ;
var c = escape(b) ;
alert(c) ;
alert(unescape(c)) ;
var e = "http://www.sohu.com?a=中国&b=美国" ;
var f = encodeURI(e) ;
alert(f) ;
alert(decodeURI(f)) ;
//-->
</script>
</body>七、JavaScript常用对象介绍（掌握）
* Array对象
数组对象，进行数组操作
定义方式1.采用new的方式
2.采用中括号[]来定义
数组的长度可以随时改变
特点：
1.javascript中数组的大小可以随时改变
2.javascript中数组的下标可以是任意对象。
<body>
<script type="text/javascript">
<!--
/*
数组对象的定义方式：
1. 采用new Array()的方式
2. 采用[]来定义(推荐)
javascript中数组与java中数组的差别：
a. Java中数组是有类型的，意味着一旦类型确定，则数组中所有的数据都是同一种类型。
javascript中数组时没有类型的，意味着数组中的数据可以存放任意类型 (不推荐)
b. java中数组的长度一旦确定就不能再更改了
javascript中数组的长度是可以变化的(扩大缩小都可以)
变长的两种办法 : 1) 指定length属性的值
2) 指定某个数组中元素的值
c. java中的数组的数据引用必须用下标引用，下标必须是整数.
javascript中数组的数据引用可以用任意对象
*/
var arr = new Array() ; //定义一个数组arr,初始长度为0
var arr1 = new Array(4) ; //定义一个数组arr1,初始长度是4
/*arr1[0] = 1 ;
arr1[1] = 10 ;
alert(arr1[2]) ; //弹出来undefined,没有初始化
alert(arr1[100]); //相当于定义了一个变量arr1[100],没有赋值*/
var arr2 = new Array(1,2,3,4,5) ; //定义一个数组arr2，初始化数据是1,2,3,4,5
//alert(arr2[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 = 100 ; //将数组的长度变为100
//alert(arr4.length) ;
//arr4[100] = 100 ; //将数组的长度变为101
//alert(arr4.length) ;
arr4.length = 2 ; //将数组的长度变为2，多余的数据将消失了
//alert(arr4[2]) ; //弹不出原来的数据了，弹出来undefined
var arr5 = ["中国","美国","日本"] ;
arr5["中国"] = ["北京","上海","天津"] ;
alert(arr5["中国"][0]) ;
alert(typeof(arr5)) ;//object
//-->
</script>
</body>方法：
1.join() : 把数组的所有元素放入一个字符串. 默认用逗号连接
2.push() : 向数组的末尾添加一个元素
4.reverse() :反转
3.shift() : 删除并返回数组的第一个元素
4.sort() ; 排序 .默认同类型的数据相比较.
<title>array对象的方法</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
array对象的方法 :
1. join(): 默认情况下用逗号隔开每个数据
2. push(): 将元素添加到数组的末尾
3. reverse(): 反转顺序
4. shift(): 删除并返回第一个元素
5. sort(): 排序
默认情况下先将能转换为number类型的字符串和number类型的放一起比较(转为string类型比较)
转换不成的作为一组进行比较
如果想按自己的规则进行比较，那么需要传递一个function类型的参数制定比较规则。
*/
/* var arr = ["中国","美国","日本"] ;
//alert(arr.join()) ; //默认用逗号连接
alert(arr.join("")) ; //用空字符串连接
arr.push("韩国") ;
alert(arr.join()) ;
arr.reverse() ;
alert(arr.join()) ;
alert(arr.shift()) ; */
var arr1 = [3,8,"23","34",123,"abc","ab"] ;
//alert(arr1.sort()) ;
alert(arr1.sort(function(a,b){ //传递一个function类型参数，制定我们的比较规则
if(a *1 > b*1)
return 1 ;
else
return -1 ;
})) ;
//-->
</script>
</body>
<title>北京传智播客黑马训练营</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>* String对象
----- 字符串类型的引用类型
String对象：方式： substr: 截取字符串 两个参数第一个是下标，第二个是长度
substring: 截取字符串 两个参数第一个是下标，第二个是下标
toUppercase:
toLowercase:
indexOf:
charAt() :
replace():
<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对象
---- 数字原始类型引用类型
Num对象：1. random() : 获得随机数[0,1)
2. ceil() : 返回大于等于次数的最大整数
3. floor() : 返回小于等于次数的最大整数
4. round(): 返回四舍五入后的整数
* Boolean对象
---- 布尔原始类型引用类型
* Math对象
执行数学任务
<title>Math对象</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
Math对象： 1.floor(x): 取得小于等于x的最大整数
2.ceil(x) :取得大于于等于x的最大整数
3.random(): 取得0~1之间的随机数(可以等于0，永远不能取得1)
4.round(): 四舍五入为整数
*/
var a = 3.1;
alert(Math.floor(a)) ;//3
alert(Math.ceil(a)) ;//4
alert(Math.round(a))//3
//-->
</script>
</body>
</html>* Date对象
用于处理日期和时间
Date对象： 代表一个时间方法： getXXX() : 拿到年月日
<title>Date对象</title>
</head>
<body>
<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>
</body>* RegExp 对象
正则表达式对象
正则表达式写法：
1. new的方式 var r = new RegExp("ab") ;
2. 采用/正则表达式/ (推荐) var r = /ab/ ;<body>
<script type="text/javascript">
<!--
var reg = /(..)./ ; //括号表示子匹配，就是对结果进一步匹配
var s = "abcde" ;
alert(reg.test(s)) ; //测试字符串中是否包含正则表达式中所匹配的字符串,返回的是boolean类型的
alert(reg.exec(s).length) ; //以数组的形式返回匹配的正则表达式的字符串
alert(reg.exec(s)[0] + ":" + reg.exec(s)[1]) ;
//-->
</script>
</body>
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
