012-String类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String类型</title>
</head>
<body>
<script type="text/javascript">
/*
String类型：
1、在JS当中字符串可以使用单引号，也可以使用双引号。
var s1 = 'abcdef';
var s2 = "test";
2、在JS当中，怎么创建字符串对象呢？
两种方式：
第一种：var s = "abc";
第二种（使用JS内置的支持类String）： var s2 = new String("abc");
需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。
3、无论小string还是大String，他们的属性和函数都是通用的。
4、关于String类型的常用属性和函数？
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
*/
//小String(属于原始类型String)
var x = "king";
alert(typeof x);//string
//大String(属于Object类型)
var y = new Object("abc");
alert(typeof y);//object
//获取字符串的长度
alert(x.length);//4
alert(y.length);//3
alert("http://www.baidu.com".indexOf("http"));//0
alert("http://www.baidu.com".indexOf("https"));//-1
//判断一个字符串是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https")>=0?"包含":"不包含");//不包含
//replace(注意：只替换了第一个)
alert("name=value%name=value%name=value".replace("%","&"));//name=value&name=value%name=value
// 继续调用replace方法,就会替换第“二”个.
// 想全部替换需要使用正则表达式.
alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));//name=value&name=value&name=value
// 考点:经常问 substr和substring的区别？
// substr(startIndex, length)
alert("abcdefxyz".substr(2,4));//cdef
// substring(startIndex, endIndex) 注意:不包含endIndexs
alert("abcdefxyz".substring(2,4));//cd
</script>
</body>
</html>
013-object类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>object类型</title>
</head>
<body>
<script type="text/javascript">
/*
Object类型：
1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
2、Object类包括哪些属性？
prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
constructor属性
3、Object类包括哪些函数？
toString()
valueOf()
toLocaleString()
4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
换句话说，自己定义的类中也有prototype属性。
5、在JS当中怎么定义类？怎么new对象？
定义类的语法：
第一种方式：
function 类名(形参){
}
第二种方式：
类名 = function(形参){
}
创建对象的语法：
new 构造方法名(实参); // 构造方法名和类名一致。
*/
function sayHello(){
}
//把sayHello当做一个普通的函数来调用.
sayHello();
// 这种方式就表示把sayHello当做一个类来创建对象.
var obj = new sayHello();
//定义一个学生类
function Student(){
alert("Student.......")
}
//当做普通函数调用
Student();
//当做类来创建对象
var stu = new Student();
alert(stu); // [object Object]
//JS中的类的定义,同时又是一个构造函数的定义
//在JS中类的定义和构造函数的定义是放在一起来完成的
function User(a,b,c){ // a b c是形参,属于局部变量
// 声明属性 (this表示当前对象)
// User类中有三个属性:sno/sname/sage
this.sno=a;
this.sname=b;
this.sage=c;
}
//创建对象
var u1 = new User(111,"jack",18);
//访问对象的属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
var u2 = new User(222,"rose",16);
//访问对象的属性
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);
// 访问一个对象的属性,还可以使用这种语法
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
//定义类的另一种语法
/*
Emp = function(a,b){
this.ename=a;
this.sal=b;
}
*/
Emp = function(ename,sal){
this.ename=ename;
this.sal = sal;
}
var e1= new Emp("smith",888);
alert(e1["ename"]+","+e1.sal);
Product = function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice=function(){
return this.price;
}
}
var xigua = new Product(1,"西瓜",4.0);
var pri = xigua.getPrice();
alert(pri);//4.0
// 可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname=function(){
return this.pname;
}
// 调用后期扩展的getPname()函数
var pname = xigua.getPname();
alert(pname);
//给String扩展一个函数
String.prototype.suiyi=function(){
alert("这是给String类型扩展的一个函数，叫suiyi");
}
"a".suiyi();
</script>
</body>
</html>
014-null NaN undefined这三个值有什么区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null NaN undefined这三个值有什么区别</title>
</head>
<body>
<script type="text/javascript">
//==是等同运算符
alert(1==true);//true
alert(1===true);//false
//null NaN undefined 数据类型不一致
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
//null和undefined可以等同.
alert(null==NaN);//false
alert(null==undefined);//true
alert(undefined==NaN);//false
// 在JS当中有两个比较特殊的运算符
// ==(等同运算符：只判断值是否相等)
// ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
alert(null===NaN);//false
alert(null===undefined);//false
alert(undefined===NaN);//false
</script>
</body>
</html>
015-JS的常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的常用事件</title>
</head>
<body>
<script>
/*
JS中的事件：
blur失去焦点
focus获得焦点
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
submit表单提交
change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
*/
// 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
// 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
function sayHello(){
alert("hell js !")
}
</script>
<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()" />
<input type="button" value="hello2" id="mybtn"/>
<input type="button" value="hello3" id="mybtn1"/>
<input type="button" value="hello4" id="mybtn2"/>
<script type="text/javascript">
function doSome(){
alert("do some!");
}
/*
第二种注册事件的方式，是使用纯JS代码完成事件的注册。
*/
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
// 第二步:给按钮对象的onclick属性赋值
btnObj.onclick=doSome;// 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
// 这行代码的含义是,将回调函数doSome注册到click事件上.
var mybtn1 = document.getElementById("mybtn1");
mybtn1.onclick=function(){// 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数
alert("test.......");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用s
}
document.getElementById("mybtn2").onclick=function(){
alert("test22222222..............");
}
</script>
</body>
</html>
<!--
java中也有回调函数机制：
public class MyClass{
public static void main(String[] args){
// 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
run();
}
// 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
public static void run(){
System.out.println("run...");
}
}
-->
016-JS代码的执行顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码的执行顺序</title>
</head>
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
<script type="text/javascript">
/*
//第一步:根据id获取节点对象
var btn = document.getElementById("btn");// 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
//第二步:给节点对象绑定时间
btn.onclick=function(){
alert("hello js");
}
*/
function ready(){
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
017-JS代码的执行顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码的执行顺序</title>
</head>
<body>
<script type="text/javascript">
// 页面加载的过程中,将a函数注册给了load事件
// 页面加载完毕之后,load事件发生了,此时执行回调函数a
// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
window.onload=function(){
document.getElementById("btn").onclick=function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
018-JS代码设置节点的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var mytext = document.getElementById("mytext");
// 一个节点对象中只要有的属性都可以"."
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn" />
</body>
</html>
019- JS代码捕捉回车键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var usernameElt = document.getElementById("username");
// 回车键的键值是13
// ESC键的键值是27
/*
usernameElt.onkeydown=function(a,b,c){
//获取键值
alert(a);// [object KeyboardEvent]
alert(b);
alert(c);
}
*/
/*
usernameElt.onkeydown=function(event){
// 获取键值
// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值
alert(event.keyCode);
}
*/
usernameElt.onkeydown=function(event){
if(event.keyCode === 13){
alert("正在进行验证.....")
}
}
}
//程序员张三写了这样一个程序
/*
function sum(){
alert("sum execute........!");
}
*/
/*
function sum(a){
alert("sum execute........!");
}
//程序员李四调用sum函数
sum();
sum("hello world");
*/
</script>
<input type="text" id="username" />
</body>
</html>
|