学习大数据：前端篇之js

1. js：java script
   js：基于对象，结束执行
   java：面向对象，编译执行

2. html引入js方式
   (1) 内部js：body的最后一行
   <script>
   …
   </script>
   (2) 外部js：
   <script src=””></script>

3. 控制台的输入输出
   console.log(内容);

4. js变量和数据类型
   (1) 变量声明
   ① var varName;
   ② let varNmae;
   (2) 赋值式确定变量的类型
   注意：值类型决定变量类型
   变量的类型随着赋值类型的不同，可以改变
   甚至变量可以不用声明，直接赋值使用，但不允许
   ① var str = typeof(var) 获取变量的实际类型
   ② string “”,””,’’,’’
   字符串转化为数据类型
   1) var int = parseInt; 字符串转化为整数
   2) var float = parseFloat; 字符串转化为小数
   3) var length = str.length;
   4) var ix = str.indexOf(subStr[, beginIndex]);
   从beginIndex开始查找subStr的首字符在str首次出现的位置，存在返回0~str.length-1,否则返回-1
   5) var lastIx = str.lastIndexOf(subStr[, beginIndex]);
   从beginIndex开始查找subStr的首字符在str最后出现的位置
   6) var subStr = str.substring(beginIndex[, endIndex]);
   截取从beginIndex开始到endIndex之间的字符串
   7) var arr = str.split(sepStr);
   以sepStr为分隔符，将字符串str拆分成字符串数组
   8) 字符串拼接：
   同Java
   ③ number 所有的数字
   var float = float.toFixed(n); 保留精度n
   ④ boolean true/false
   js中：0,””,’’,null作为false使用
   ⑤ undefined 未赋值
   ⑥ object 引用类型
   1) 数组
   a. 创建数组
   var arr = new Array(val,val2,val3,…);
   b. 数组的常用属性和方法
   int len = arr.length; //获取数组长度
   arr.push(item); //尾部追加元素
   arr.splice(beginIndex,howManytoDelete,item…);
   //从beginIndex开始删除howManytoDelete个元素，并插入item…，如果howManytoDelete为0，则默认为插入操作；如果item…为空，则默认为删除操作
   var peak = arr.pop(); //获取并删除最后一个元素
   var top = arr.shift(); //获取并删除第一个元素
   var str = arr.join(joinStr);//使用指定的joinStr将数组元素连成字符串
   c. 数据遍历

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

i为下标

for(const i in names){
        console.log(names[i]);
}

names.forEach((e,i)=>{
        console.log(i+””+e);
})

names.forEach(e=>{
        console.log(e);
})

2) 日期
var date = new Date([long]);
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var weekday = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var millisec = date.getMillionSeconds();
3) 自定义对象
var instanceof Type //类型判断
var obj = new Object();
var obj = {};

//构造函数

function Student(stuNo,name,age){
        this.stuNo = stuNo;
        this.name = name;
        this.age = age;

        this.getStuNo = function(){return this.stuNo;}
        this.getName = function(){return this.name;}
        this.getAge = function(){return this.age;}

        this.setStuNo = function(stuNo){this.stuNo = stuNo;}
        this.setName = function(name){this.name = name;}
        this.setAge = function(age){this.age = age;}

        this.toString = function(){
            return [this.stuNo,this.name,this.age].join(',');
        }
    }

//构造函数创建对象：
var stu = new Student(1,"obo",18);
stu.setName(“bob”);
console.log(stu.toString());

//json对象
var student = {
stuNo:1,
name:"bob",
age:19
};
var stuStr = JSON.stringify(student);

//json字符串(模板格式)
var stuStr = {“stuNo”:1,”name”:”bo”,”age”:20};
var jsonStu = JSON.parse(stuStr);

//访问对象的属性
var val = obj.field
var val = obj[“fieldName”]

//js中类似反射
for(const field in student){
console.log(field+”=”+student[field]);
}

⑦ function 函数类型
1) 自定义函数
a. function funcName(param…){…}
b. var funcName = function(param…){…}
c. 参数的值传递和引用传递
2) 内置函数：比如：parseInt…
parseInt
parseFloat
JSON.stringify
JSON.parse
setTimeout(func,time(ms)); 延时函数
setInterval(func,time(ms)); 定时函数
3) 构造函数：相当于java中的类
4) 回调函数：将函数作为引用传给另一个函数

js操作
浏览器窗口内置对象
window.location.href = url; 修改当前浏览器窗口显示的资源路径
var searchStr = window.location.search; 静态页面跳转传值

js获取html标签对象

1. 根据选择器获取
   (1) 根据id选择器获取唯一对象
   var e = document.getElementById(idStr);
   (2) 根据class选择器获取对象数组
   var arr = document.getElementsByClassName(classStr);
   (3) 根据标签选择器获取对象数组
   var arr = document.getElementsByTagName(tagName);
   (4) 根据表单元素
   var arr = document.getElementsByName(formElName);
2. 根据家族关系获取:var ref = …;
   (1) 获取子元素数组：
   var childs = ref.children;
   (2) 获取兄弟元素：
   var prevEl = ref.previousElementSibling;
   var nextEl = ref.nextElementSibling;
   (3) 获取父级元素：
   var parentEl = ref.parentElement;

js创建html标签对象
var newel = document.creatElement(elName);

js操作html标签对象 var el = …;

1. 操作值
   (1) 表单元素的值：var val = el.value;
   (2) 非表单元素的文本：var txt = el.innerText;
   (3) 非表单元素的内部结构：var structor = el.innerHTML;
2. 操作属性
   var attrVal =

3. 操作样式
   (1) 具体样式：el.style.xxxYyy = “value”;
   (2) 类选择器：
   el.className = “cn”;
   el.classList.add(cn…);
   el.classList.remove(cn…);
   var bool = el.classList.contains(cn);
   el.classList.toggle(cn);

4. 操作子元素
   (1) 添加子元素：el.appendChild(tagEl);
   (2) 删除元素：el.remove();

   事件、事件函数、事件绑定事件函数

5. 事件
   (1) onclick
   (2) onkeydown
   (3) onkeyup
   (4) onkeypress
   (5) onfocus
   (6) onblur
   (7) onmouseenter
   (8) onmouseleave
   (9) onmousemove
   (10) onscroll

6. 事件函数：没有参数、没有返回值的普通函数

7. 如何捆绑：标签对象.事件 = 函数;