JavaScript学习

Javascript

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

1.基本数据类型

• Number 数字类型（整数，小数） 1 -3 3.3
• String 字符串类型 “字符串1” “字符串2”
• Boolean 布尔类型 true false
• Null 表示空值
• Undefined 未定义（声明了是var变量，但是没有赋值的时候）

2.变量赋值

所有变量都是var （var可以存储数字。字符串，布尔…）
var 是弱类型语言

var i=10;
var string="hello world";
console.log(i);
10
console.log(string);
hello world

可以利用浏览器提供的console 对象进行调试输出
命令：console.log(内容);

3.基本运算

• 没有除0异常，除零会出现正负无穷大（Infinity）

console.log(i/0);
Infinity

• 如果进行了非法的数学运算，结果是NaN(not a Number) 包括字符串转换类型失败时，结果也是NaN

console.log(string-i);
NaN

• js中的 == 比较的是值（不同类型的值会转换后比较）

if(1=='1'){
    console.log(true);
}else{
    console.log(false);
}
true

所以要保证值相等也要保证数据类型相等

if(1==='1'){
    console.log(true);
}else{
    console.log(false);
}
false

1 == '1' 结果是 true
如果既要保证值相等，也要保证类型相等
1 === '1'

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

 var i=0;
 if(i){
     console.log(false);
 }else{
     console.log(true);
 }
 答案 是true

4.js中没有块作用域

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

答案是：

0
 1
 2
 3
 4
 5
 6
 7
 8
 9
 11

5.复杂类型

1)Object对象类型

*定义对象

{属性名：属性值，属性名：属性值...}
var obj={"name":"张三","age":18};
可以简化：{name:"张三",age:18};
可以动态添加：obj.sex="男";
修改属性：obj.age=20;
删除属性：delete obj.age;

2)Array数组类型

定义数组

[值1，值2，值3...值n]
var array=[1,2,3,4,5];
访问数组下标为4的元素：console.log(array[4]);
遍历数组
for(var i=0;i<array.length;i++){
    console.log(array[i]);
}
修改元素：array[4]=7;
向尾部加入元素：array[5]=6;
array[9]=40;
向尾部添加元素： .push(元素)
array.push(10);
从尾部删除元素： .pop()
array.pop();
从中间的某个下表删除元素 splice(下标，个数)
array.splice(2,2);//从下标为2开始，删除两个元素
拼接数组内的所有元素
array.join("*");//结果就是1*2*3*4*5

3)Function函数类型

语法

function 函数名（参数列表）{
    函数体
    return 返回结果
}

java 中的函数方法：
public static int add(int a,int b){
    return a+b;
}

js中的函数方法：
function  add(a,b){
    return a+b;
}
console.log(add(5,7));
12

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

全局变量和局部变量

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

var t=8;
function Demo(){
    var t=2;//局部的变量a,与全局的a互不冲突
    console.log(t);
}

数组遍历&匿名函数

i值的是数组内的第i个元素

var arr=[1,2,3,4,5,6];
arr.forEach(function test1(i){
    console.log(i);
});

箭头函数

类似于java中的lambda表达式 它的箭头是=>

arr.forEach((i)=>console.log(i));

数组元素排序

无参数的sort方法把数组内的元素当做字符串排序

var array = [4,1,3,2,5,11]; 
array.sort();
结果是：(6) [1, 11, 2, 3, 4, 5]

conmpartor函数

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;
});
结果是：(6) [1, 2, 3, 4, 5, 11]

3)Data日期类型

var date=new Date();
console.log(date);
//返回结果是：Fri Jan 04 2019 12:38:58 GMT+0800 (中国标准时间)
console.log(date.getFullYear());//2019    年
console.log(date.getMonth());//0         月
console.log(date.getDate());//4          日
console.log(date.getHours());//12      时
console.log(date.getMinutes());//38    分
console.log(date.getTime());//1546576738806  毫秒值

4)正则类型

定义正则表达式

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次？
Eg：
(1)密码位数，最少3位，最多10位，可以是任意英文字符和数字

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

(2)手机号码校验，必须是138或者139开头的

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

(3)邮件地址的正则验证
后缀可以是.net .com .cn

var pattern=/^\w+@\w+\.(com|net|org)(\.(cn|en))?$/;

字符串

连接字符串

var a="hello ";
var b="world ";
a+b;//方法1
a.concat(b);//方法2

搜索某个字符

var a="hello ";
a.indexOf("l");//字符首次出现的位置索引
a.indexOf("ll");

根据指定字符切分数组

var str = "a,b,c,d,e";
str.split(",");//根据,来切分字符串成数组：(5) ["a", "b", "c", "d", "e"]

找子串

var str="qweytyuiiuoy";
str.substr(2,2);//参数1是起始下标，参数2是长度
str.substring(2,4);//参数1是起始下标，参数2是结束下标+1

替换字符串

var str="tttttttttttttttttt";
str.replace("t","s");//只替换匹配到的第一个字符
str.replace(/a/g,"s");//global(全局的) 替换所有遇到的

var str1="tttrttttrtttttytt";
str1,replace(/ttt/g,"c");//将全局的ttt 替换成c

//去掉标签
var str2="<p>uuuuu</p>
str2.replace(/<p>/,"").replace(/<\/p>/,"");//替换两次
str2.replace(/(<p>|<\/p>)/g,"");//替换一次

//分组替换
$1 表示第一个分组
$2 表示第二个分组
var str = "<p>aap>aaa</p>";
str.replace(/(<p>)(.+)(<\/p>)/g,"$1");
str.replace(/(<p>)(.+)(<\/p>)/g,"$2");

6 js操作html标签

1.找到页面元素

先给标签一个id属性，然后根据id的值查找

document(文档对象)
    |-html
        |-head
        |-body
            |-p
//根据id值查找页面标签 
document.getElementById("id值");
//根据标签名称查找
document.getElementByTagName("标签名");
//根据选择器查找页面元素（选择器可以是 #id .class 元素，...）
document.querySelectorAll("选择器");

2.改动标签属性

先找到标签元素，把标签元素看做一个对象，用 对象.属性
例如：
找到 img对象.src
找到 input对象.value

3.改动标签内容

内容

标签对象.innerText 标签对象.innerHTML 例如：给内容赋值时 bbbbb 此时 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(函数, 延时毫秒值);

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

func2()

4.4 常见事件

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