JS+正则入门

JS学习

1.输出

alert(); //页面弹窗
document.write();//向body中输出内容
console.log();//控制台输出

2.注意事项

• JS严格区分大小写
• 每一条语句以分号结尾–（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候浏览器分号会加错）
• JS会忽略多个空格和换行

3.数据类型

基本类型：指直接保存在栈内存中，

• String 字符串

-  使用双引号、单引号都可以。引号不能嵌套。 \转义字符

var str1 = 'hello';
var str2 = "hello";
str1 = "i say : 'today is a good day!' ";

• Number 数值 (没有整数和浮点数之分，进行浮点运算，会出现精度不精确的问题)

-  Infinity 正无穷
-  -Infinity 负无穷
-  NaN 非类型
-  typeof 检查类型


var a = Number.MIN_VALUE; //大于0的最小数5e-324
console.log(typeof a);

• Boolean 布尔值

-  true or  false

var bool = true;
console.log(typeof bool);

• Null 空值

-  Null类型的值只有一个null
-  null表示为空的对象

var a = null;
console.log(typeof a); //object

• Undefined 未定义

var b = undefied;
console.log(b);// undefied
console.log(typeof b); //undefied

引用类型：指存在堆内存

• Object 对象

对象分类：

1.内置对象
	-ES标准中定义的对象，在任何的ES的实现中都可以使用
	-比如:Math Sting Number Boolean Function Object...

2.宿主对象
	-由JS的运行环境提供的环境对象，目前来讲主要指由浏览器提供的对象
	-比如BOM DOM
3.自定义对象
	- 由开发人员自己创建的对象

对象的创建：
1.  var obj = new Object();
2.  var obj = {};

obj.name = "孙悟空";
var obj2 = {
    name:"猪八戒",
    age:28,
    gender:"男"
};

-- 对象字面量的属性名可以加引号也可以不加，建议不加。如果使用一些特殊的名字，必须加引号
-- 名和值之间使用:连接，多个名和值直接使用,隔开

var obj2 = {
    name:"猪八戒";
    age:28,
    gender:"男",
    test:{name:"沙和尚"}
};

强制类型转换

var a = 123;

将其他类型转换成字符串 
方法一：调用被转换类型的toString()的方法
1.null和undefined没有toString()方法，调用会报错
方法二：调String()函数，

a.toString();
a = 123;
a = String(a);

将其他类型转换为number方法一：调用Number()方法
字符串-->数字
1.纯数字的字符串，则转化为数字
2.如果字符串含有非数字内容，则转换为NaN
3.如果字符串 一个空串或者全是空格的字符串，转化为0
4.Boolean转化为数字，true->1,false->0
5.null-->0
6.undefied-->NaN
转换方法二:
parsInt()方法专门对付字符串，将一个字符串中第一个有效的整数内容取出来
a = '123adac'
a = paseInt(a); // a = 123
parseFloat()取浮点数

a = Number(a);

a = 0x10; //0x开头是十六进制
a = 0xff;
a = 007;//0开头是八进制
a = 0b10;//0b开头二进制
a = paseInt(a,10);//第二个参数，用来指定进制


转换为Boolean值
调用Boolean()函数
数字非0--->true
数字0和NaN--->false
非空字符串-->true
空串--->false
null和undefined ---> false
object -->true

质数练习：

<script>
// 求 2-num之间的质数
var num = prompt("");
boolean flag = true; 
if (num <= 1){
    alert("");
}else{
    for(var i = 2; i < num; i++){
    flag = true;
        for(var j = 2; j*j <= i; j++){
         // Math.sqrt(i)
            if(i%j == 0){
                flag = false;
                break;
            }
        }
        if(flag == true){
            console.log(i + " ");
        }
    }
}
</script>

4.Unicode转义字符编码

js中 \u unicode编码

console.log('\u2620');

• 在网页中使用Unicode编码
• &#编码; 需要转换为十进制
• <h1 style="font-size: 200px">&#9760;</h1>

5.正则表达式（定义字符串的规则）

创建正则表达式的对象

语法：
- var 变量 = new RegExp("正则表达式","匹配模式");
- 使用typeof检查正则对象性，会返回object
- var reg = new RegExp("a");这个正则表达式可以用来检测一个字符串是否含有a
    在构造函数中，可以传递一个匹配模式作为第二个参数。（更灵活）
    可以是
          - i 忽略大小写
          - g 全局匹配模式
    正则表达式的方法：test()，用于检测一个字符串是否符合正则表达式

    var str = "a";
    var result = re.test(str);
    consolo.log(result);

-   使用字面量来创建正则表达（更简单）
-   语法:  var 变量 = /正则表达式/匹配模式
    

var reg = /a/i;
reg = /a|b|c/;

- | 表示或的意思
- [] 里面的内容也是或的关系
- [ab] == a|b
- [a-z] 任意小写字母
- [A-Z] 任意大写字母
- [A-z] 任意字母
- [^ab] 除了ab以外的
-  . 表示任意字符
- \. 转义字符 表示.
- \w 任意字母、数字、_ ==>[A-z0-9]
- \W 除了任意字母、数字、_==>[^A-z0-9]
- \d 任意数字 [0-9]
- \D 除了数字 [^0-9]
- \s 空格
- \S 除了空格
-  g 全局匹配模式  reg = /s/g;
- \b 单词边界  reg = /\bchild\b/; 
- \B 除了单词边界 
量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前面的一个内容起作用
- {n} 正好出现n次
- {1,3} 出现 1~3次  reg = /a{1,3}/;
- {3,} 出现3次以上   reg = /a{3,}b/;
- + 至少一个    ==>{1,}
- * 0个或者多个 ==>{0,}
- ? 0个或者1个  ==>{0,1}
- ^a 检查一个字符串开头是否以a开头
- a$ 结尾是否为a


reg = /[a-z]/; //任意小写字母
reg = /[^ab]/; //除了ab以外的

手机号的规则：
- 以1开头
- 第二位是3-9的任意数字
- 三位以后任意数 9位
- /^1[3-9][0-9]{9}$/
var phoneStr = "123567890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

match()
-可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
-默认情况下我们的match只会找到第一个符合要求的内容，找到后救停止检索
 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有内容
-match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
 
replace()
-可以将 字符串中自定内容替换为新的内容
-参数：
     1.被替换的内容，可以接受一个正则表达式作为参数
     2.新的内容
-默认只会替换第一个

split()
-可以将一个字符串拆分为一个数组
-方法中可以传递一个正则表达式作为参数，这样方法会根据正则表达式去拆分字符串
- 这个方法默认全局匹配

search()
-可以搜索字符串中是否含有指定内容
-如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到，就返回-1
-它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串

6.DOM树（Document Object Model）

js是解释型语言，代码的执行顺序是自上而下。

var  btn = document.getElementById("btn");

btn.onclick = function(){

alert("hello");

}; 


//先加载js 再加载页面 
window.onload = function(){
	var  btn = document.getElementById("btn");
    btn.onclick = function(){
		alert("hello");
	}; 
};

• getElementById()//通过id获取一个元素节点对象
• getElementByTagName()//通过标签名获取一组元素节点对象
• getElementsByname() // 通过name属性获取一组元素节点对象

7.函数

- 函数也是一个对象
- 函数中可以封装一些功能（代码）

//可以将要封装的代码以字符串的形式传递给构造函数，
//封装到函数的代码不会立即执行
var fun = new Function("console.log('hello');");
fun(); //调用