Javascript

主要用途：用在浏览器当中, 也可以作为后台开发语言(nodejs)
语法：类似于 java, 简称 js 

1. 基本数据类型

* Number 数字类型（整数，小数） 1.0  1  -2
* String 字符串类型  "字符串1"  '字符串2'
* Boolean 布尔类型  true  false
* Null  表示空值
* Undefined  未定义 (声明了var变量，但没有赋初值时)

2.变量赋值

所有变量类型 都是 var  (var 可以存储数字，字符串，布尔 ...)    弱类型语言

var i = 10;
var str = "hello, world";

可以利用浏览器提供的 `console` 对象进行调试输出，例如：

console.log("内容");

3. 基本运算

* 没有除0异常，除零会出现正负无穷大(Infinity)

* 如果进行了非法的数字运算，结果是 NaN (Not a Number)
     "aaa" - 9  结果就是 NaN
     包括字符串转换数字失败时，结果也是NaN 例如 parseInt("aaa")

* js中的== 比较的是值（不同类型的会转换后比较）所以
    1 == '1'  结果是 true
  如果既要保证值相等，也要保证类型相等 
    1 === '1'

* 可以条件判断中，使用各种类型的值
    对于数字类型 0 代表 false， 非零 代表 true
    对于字符串  ""  代表 false， 非空串 代表 true
    null , undefined 代表 false

例如： 

var i = 0;
if(i) {
    console.log("ok");
} else {
    console.log("not ok");
}

   输出：not ok

4.js中没有块作用域

例1：

for(var i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i);

最后一个console.log(i); 输出 10

例2：

if(true) {
    var x = 10;
}
console.log(x);

输出 10

5.复杂类型

1）Object 对象类型
定义对象
// {属性名:属性值, 属性名:属性值 ...}

var obj = {"name":"张三", "age": 18};

可以简化

var obj = {name:"张三", age: 18};

 

// 动态添加

obj.sex = "男";

// 修改属性

obj.age = 20;

// 删除属性

delete obj.age;

2） Array  数组类型
定义数组
// [值1, 值2, ... 值n]

var array = [1,2,3,4,5];

// 访问下标为 3  的元素

console.log(array[3]);

// 遍历数组

for(var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

// 修改元素

array[3] = 40;

// 向尾部加入元素

array[5] = 6;
array[9] = 10;

// 向尾部添加元素 .push(元素)

array.push(6);

// 从尾部删除元素 .pop()

array.pop();

// 从中间的某个下标删除元素 splice(下标，个数);

array.splice(1,2); // 代表从下标1开始，删除2个元素

// 拼接数组内的所有元素, 例如

array.join("-"); // 结果就是   1-2-3-4-5

3） Funtion 函数类型
语法：

function 函数名(参数列表) {
    函数体
    return 返回结果
}

例1：

function add(a, b) {
    console.log(arguments);
    return a + b;
}

函数的参数是可变的, 形参和实参的个数可以不一致
例如，调用add(4,5) ==> 9
调用add(4,5,6) ==> 9 // 相当于第三个实参没用上
调用add(4) ==> NaN // b 参数没有赋值，是 undefined  结果是NaN 
获取到所有实际参数： arguments

例2：

var a = 10; // 全局的变量 a
function test() {
    var a = 5; // 局部的变量 a ，与全局的a互不冲突
    console.log(a);
}

函数内定义的 var 变量才是局部变量， 函数外声明的var 都是全局变量

例3：数组遍历其他方式

var array = [1,2,3,4,5]; 
// 其中函数的参数 i 是数组内第i个元素
array.forEach( function aaa(i) {
    console.log(i);
} );

匿名函数

array.forEach( function (i) {
    console.log(i);
} );

箭头函数

array.forEach( (i)=>{
    console.log(i);
} );

 

例4：数组排序

var array = [4,1,3,2,5,11]; 
array.sort(); // 无参数的sort方法把数组内的数字当做字符串排序

array.sort( function comparator(a,b) {
    // 返回的整数 0 表示 a= b   如果返回负数 a < b  如果返回正数表示 a > b
    if( a > b) {
        return 1;
    } else if (a < b ) {
        return -1;
    } else {
        return 0;
    }
    // return a - b;
});

 

4） Date   日期类型

var date = new Date();
console.log(date);
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinute());
console.log(date.getTime());

5） 正则类型 
定义正则表达式

var pattern = /正则表达式/;

// 匹配数字 [0-9]  \d
// 匹配所有英文字符 [a-zA-Z]  
// 匹配单词字符 [a-zA-Z0-9_] \w
// 匹配任意 .
// 匹配起始  ^  匹配结束  $
// 匹配次数 {m,n}  最少出现 m 次，最多出现 n 次
//  {m, } 最少出现 m 次, 没有上限
//  {0, } 0到多次 *
//  {1, } 1到多次 +
//  {0,1} 0到1次 ?

例1：密码位数，最少3位， 最多10 位, 可以是任意英文字符和数字

var pattern = /^[a-zA-Z0-9]{3,10}$/;

例2：手机号码校验 必须是 138或139 打头的

var pattern = /^13[89]\d{8}$/

例3：邮件地址的正则验证
manyhf16@sina.com
manyhf16@163.com.cn

后缀是 .net | .com |  .cn

var pattern = /^\w+@\w+(\.\w+){1,2}$/
var pattern = /^\w+@\w+\.(com|net|org)(\.(cn|en))?$/

6） 字符串
// 连接字符串

var a = "hello";
var b = "world";
a+b;
a.concat(b)

// 搜索某个字符

var c = "abcde";
c.indexOf("cd");
var str = "a,b,c,d,e";
str.split(","); // 根据,号切分为数组

// 找子串

var str = "abcde";
str.substr(2,2);  // 参数1是起始下标，参数2是长度

str.substring(2, 4) // 参数1是起始下标, 参数2是结束下标+1

 

// 替换字符串

var str = "aaabbbaaa"; // 把 a-->c
str.replace("a", "c");  // "caabbbaaa" 只替换了第一个匹配的

str.replace( /a/g, "c" ); // "cccbbbccc"  global(全局的) 替换所有遇到的

var str = "aaabbbaaa"; // aaa-->c     cbbbc
str.replace(/aaa/g, "c"); // "cbbbc"

var str = "<p>aaaaa</p>"; // 把标签去掉， 只留内容
str.replace(/<p>/, "").replace(/<\/p>/,""); // 替换了两次 "aaaaa"
str.replace(/(<p>|<\/p>)/g, "");// "aaaaa"

var str = "<p>aap>aaa</p>"; // <span>aaaaa</span>
// 分组替换
/(<p>)(.+)(<\/p>)/g

$1 表示第一个分组
$2 表示第二个分组
...
str.replace(/(<p>)(.+)(<\/p>)/g, "$1");
str.replace(/(<p>)(.+)(<\/p>)/g, "<span>$2</span>");

6. js 操作 html 标签

1) 找到页面元素
先给标签一个id属性，然后根据id的值查找

document (文档对象)
    |- html
        |- head
        |- body
            |-p

// 根据id值查找页面标签

document.getElementById("id值");

// 根据标签名称查找

document.getElementsByTagName("标签名");

// 根据选择器查找页面元素

document.querySelectorAll("选择器");

   其中选择器可以是  #id,  .class,  元素, ...

2) 改动标签属性

先找到标签元素，把标签元素看做一个对象, 用`对象.属性`
例如：

<img src>  找到 `img对象.src ` 
<input value> 找到 `input对象.value`

3) 改动标签内容
<p>内容</p>

标签对象.innerText  
标签对象.innerHTML

例如：给内容赋值时`"<span style='color:red'>aaa</span>"`
这时 innerText 会把这段html按照普通文本的方式显示
innerHTML 会把这些html先按照html语法进行解析，解析后显示

4) 添加事件
鼠标单击事件
4.1) 方法1

找到标签.事件属性 = function() {}

onclick 鼠标单击事件
onmouseover 鼠标移入事件
onkeydown 按键按下事件

例如：

document.getElementById("img1").onclick = function (){
    console.log("鼠标单击发生了");
    document.getElementById("img1").src = "2.jpg";
};

4.2) 方法2

<script>
function fun1() {
    document.getElementById("img1").src = "2.jpg";
}
</script>

<img src="1.jpg" onclick="fun1()">

 

4.3) 定时器方法

setTimeout(函数, 延时毫秒值);

例如：5s之后再执行function()

var i = 0;
function func2() {
    setTimeout(function(){
        func2();
        console.log("ok:" + i);
        i++;
        
    } , 5000);
}

 第一次调用func2,

func2()

4.4) 常见事件

ondblclick  鼠标双击
onchange   value取值发生改变时(主要指表单标签)
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus  获取焦点
onblur   失去焦点
onkeydown 按键按下
onkeyup  按键松开