03-初学JavaScript
又是美好的一天 继续今天的学习
一、变量作用域
//i = 20;//全局变量
function a(){
i = 10;//函数内部的变量是局部变量(函数内没有对变量做声明。变量默认为全局变量)
alert(i);
}
a();
alert(i);
如果声明了i 那函数里的i就是局部变量了 如果 没有声明 默认是全局变量
二、有三种声明对象的方法
js是半面向过程半面向对象的
- js有类和对象的概念,但是没有抽象类和接口一说
- 类:对现实世界中同一类事物的抽象定义
- 对象:是类的具体实例,与实现事物对应
声明一个js类（js类与js函数差不多，js类名大写，js函数名小写）
//声明属性
this.name = name;
this.age = age;
//方法
this.eat = function(){
alert(this.name + "能吃")
}
}
var p = new Person('刘能');
//alert(p.name);
//p.eat();
//js允许动态添加类中的成员
p.phone = '10086';
//alert(p.phone);
p.run = function(a){
alert(this.name + '能跑'+a);
}
p.run('能跳');
//删除p的属性
delete p.name;
alert(p.name);
//delete p.run();
//p.run('能跳');
//对象有方法
Person.a = function(){
alert('静态方法');
}
Person.prototype.b = function(){
alert('实例方法');
}
var p1 = new Person('赵四');
p1.run('能跳');
可以添加属性
可以删除属性
第一种和第二种声明用的情况比较少
var p = new Object();
p.name = '李四';
p.eat = function(){
alert(this.name + '能吃')
;
}
alert(p.name);
p.eat();
字面量的形式创建对象（重点）
var person = {
name:'刘能',
age:30,
eat:function(){
alert(this.name +"能吃")
},
run:function(){
},
phone:'123456',
email:'123@qq.com'
};
循环遍历
alert(person['name']);
//遍历（for in 循环）
// for(var i in person){//i是键
// alert(i +' '+person[i] );
// }
小练习 不输出 方法
for(var i in person){
if(typeof person[i] == 'function'){
continue;
}
alert(person[i]);
}
js中数组长度是可变的
js数组创建也有三种方式
方式一
// var arr1 = new Array();
// arr1[0] = '刘能';
// arr1[1] = '赵四';
// arr1[2] = 10;
//
// alert(arr1);
// 方式二
// var arr2 = new Array('aa','bb','cc');
// alert(arr2);
// 方式三（字面量）
var arr3 = ['a','b','c','d'];
// alert(arr3);
遍历也有三种
js数组的第一种遍历方式
// for (var i = 0;i < arr3.length;i++) {
// alert(arr3[i])
// }
// js数组的第二种遍历方式
// for(var i in arr3){//i是元素下标
// alert(arr3[i])
// }
// js数组的第三种遍历方式
// arr3.forEach(function(x,index){
// alert(x +" " + index )
//
// })
多维数组
三级联动小练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="school">
<option value="">请选择省</option>
</select>
<select id="xi">
<option value="">请选择市</option>
</select>
<select id="classes">
<option value="">请选择县</option>
</select>
<script type="text/javascript">
var school = ["黑龙江省","吉林省","辽宁省"];
var xi = [
["绥化市","哈尔滨市","齐齐哈尔市","大庆市"],
["长春市","吉林市","四平"],
["大连","沈阳","铁岭","鞍山"]
];
var classes = [
[
["绥棱县1","绥棱县2","绥棱县3"],
["南岗1","南岗2"],
["龙沙1","龙沙2","龙沙3","龙沙4"],
["新村1","新村2","新村3","新村4"]
],
[
["长春1","长春2","长春3"],
["吉林1","吉林2"],
["四平1","四平2","四平3","四平4"]
],
[
["大连1","大连2","大连3"],
["沈阳1","沈阳2"],
["铁岭1","铁岭2","铁岭3","铁岭4"],
["鞍山1","鞍山2","鞍山3","鞍山4"]
]
];
window.onload = function() {
//获得select列表框对象
var schoolBox = document.getElementById('school');
var xiBox = document.getElementById('xi');
var classesBox = document.getElementById('classes');
//一级菜单（学校）
for (var i = 0;i < school.length;i ++) {
var opt = new Option(school[i],school[i]);
schoolBox.add(opt);
}
//二级菜单（专业）
schoolBox.onchange = function() {
//清空专业
xiBox.options.length = 1;
//清空班级
classesBox.options.length = 1;
var index = schoolBox.selectedIndex;//获得选择option的下标
if (index == 0)
return;
var xis = xi[index-1];//获得对应专业
for (var i = 0;i < xis.length;i ++) {
var opt = new Option(xis[i],xis[i]);
xiBox.add(opt);
}
}
//三级菜单（班级）
xiBox.onchange = function() {
//清空班级
classesBox.options.length = 1;
//获得学校选择的option下标
var schoolIndex = schoolBox.selectedIndex;
//获得专业选择的option下标
var xiIndex = xiBox.selectedIndex;
if (schoolIndex == 0 || xiIndex == 0)
return;
//获得对应的班级
var classNames = classes[schoolIndex-1][xiIndex-1];
for (var i = 0;i < classNames.length;i ++) {
var opt = new Option(classNames[i],classNames[i]);
classesBox.add(opt);
}
}
}
</script>
</body>
</html>
之后学了
数组的各种方法。。
还有字符串的方法
由于学过直接做了练习
// 将城市取出来放在数组中,并且遍历数组
/* var str = "北京,大连,上海,广州,深圳";
var strs = str.split(',');
for (var i = 0;i < strs.length;i++) {
console.log(strs[i]);
}
*/
// 封装一个方法,传入任意字符串,返回字符串的后3位
/*function a(str){
if(str.length <= 3){
return str;
}else{
return str.substr(-3);
}
}*/
// 封装一个方法,输入一个参数,判断参数是否为合法标识符
// 合法标识符要求:小写字母开头,后面可以是字母,数字.下划线,位数为6-8位
// function a(str){
// //判断位数
// if(str.length<6 || str.length > 8){
//
// return false;
// }
// //判断第一个字符
// var c = str.charAt(0);
//
// if(c < 'a' || c > 'z'){
//
// return false;
// }
// //后面是否是字母,数字.下划线
//
// for(var i = 1;i<str.length;i++){
// c = str.charAt(i);
//
// if((c < 'a' || c >'z') && (c < 'A' || c >'Z') && (c < '0' || c > '9') && (c!='_')){
//
// return false;
// }
//
// }
// return true;
//
//
//
// }
其实判断是否为合法字符也可以用正则表达式
/^[a-z][a-zA-Z0-9_]{5,7}$/.test(str)
// 正则:用一系列特殊字符来制定字符串的匹配规则
// 创建正则对象的方式
// 方式一:
// var reg = new RegExp('模式',[g/i]);//g全局匹配，i忽略大写
// var reg = new RegExp('^[a-z][a-zA-Z0-9_]{5,7}$','i');
// 方式二:
// var reg = /模式/[g/i]
// var reg = new RegExp('ab','i');//字符串含有ab且ab相连接即可
var reg = /ab/i;
alert(reg.test('Acab'));
之后做了一点练习
var str = '张三的手机号码是13312345678,李四的手机号码是16911111111,王五的手机号码是13822222222';
var r = /13\d{9}/g;
var result = str.match(r); //返回匹配的结果（数组）
console.log(result);
浙公网安备 33010602011771号