后台学的js

javascript 既可以作为前端语言，也可以作为后端语言

语法上与java有类似之处，但本质上与java语言没有关系

1. javascript 基本语法

1.1 基本数据类型

number 数字类型， 1.0 100
string 字符串类型 "hello" 'world'
null 空值
undefined 未定义比如一个变量还没有赋值
布尔类型 true false

变量是弱类型，值有类型
int a = 10; // java 语法
String b = "hello";

var a = 10; // var 表示任意的类型，数字，字符串，空值 ...
var b = "hello";

1.2 调试基本方法

用F12调出浏览器控制台窗口，切换到Console ，可以输入js代码进行调试
console.log(变量); 用来将变量或表达式结果输出到console窗口

1.3 复杂类型

1) 数组【重点】
var a = new Array(); // 新建一个空数组
var a = []; // 新建一个空数组
var a = [1,2,3,4,5]; // 五个整数元素数组

访问数组元素, 通过数组[下标]来访问
遍历数组：
for(var i = 0; i < a.length; i++) { // 推荐写法
console.log(a[i]);
}
for(var i in a) {
console.log(a[i]);
}

添加元素
   .push(元素); // 在数组的尾部新增
   .unshift(元素); // 在数组的头部新增
修改元素
   直接通过下标修改
删除元素
   .pop(); // 删除尾部元素
   .shift(); // 从头部删除元素
.splice(要删除的下标, 要删的个数);
排序
   .sort();
   .sort( (a,b) => b - a );

var a = [1, 21, 12, 2, 3, 31]; // 默认不带参数排序，是把数字当做了字符串进行的排序
a.sort( (a,b) => a - b ); // 减法可以让字符串再变回数字

2) 对象 (js对象属性可以动态添加)【重点】
var a = new Object(); //创建一个空对象
a.name = "张三";
a.age = 18;
还可以使用 delete a.age 来删除a对象中的age属性

简化写法：
var a = {}; //创建一个空对象
格式: { 属性名:属性值, 属性名:属性值 ...}

扫描二维码关注公众号，回复： 3116656 查看本文章

var a = {"name":"张三", "age":18}; // 属性名两边的双引号可以省略3) 函数 (类似于java的方法)【重点】
语法
function 函数名(a, b) {
...
}




function sum (a, b) {
    return a + b;
}

等价写法
var sum = function (a, b) { // 匿名(没有名字的函数)
return a + b;
}
调用函数 sum(5, 4);js中实际参数和形参可以不匹配
sum(4,5,6)
sum(4,5,6,7)
sum(4); // 4+undefined = NaN (not a number)

function sum (a, b) {
    return a + b;
}

function sum (a, b, c) {
    return a + b + c;
}

如果定义了两个同名函数，后定义的会覆盖前面定义的。

4) 日期【了解】
var date = new Date();
date.getFullYear(); // 获取年份
date.getMonth(); // 获得月份(从0开始)
date.getDate(); // 获取日期

var date = new Date(1535445539597); // 根据毫秒值创建日期

5) 正则表达式【了解】
var reg = new RegExp("正则表达式"); // 用new来创建
简化写法
var reg = /正则表达式/;

例如：是否全部是数字
var reg = /^[0-9]+$/;
reg.test("目标字符串");

验证是否是手机号码
var reg = /^1[35789][0-9]{9}$/;

替换功能
var str = "aaaabbbcccaaa";
str.replace(/a+/, "A"); // 只会替换第一个匹配到的子串
str.replace(/a+/g, "A"); // 会替换所有匹配的子串

javascript 最大作用：能够操作页面上的标签

查找页面标签
1）根据id查找页面标签
document.getElementById("id值");
2）获取标签内的内容
标签对象.innerText
3）获取属性
标签对象.属性名

特殊的：获取class属性标签对象.className
获取style样式标签对象.style.具体样式名

4）删除
父标签对象.removeChild(子标签对象);

5）新增
var p = document.createElement("p"); // 创建了段落标签, 但没有加到页面上
p.innerText = "标签内容";

父标签对象.appendChild(子标签对象); // 在末尾添加子标签

 var     a = document.createElement("a");
   a.href="aaa";
   a.innerText="我是超链接";
   document.body.appendChild(a);

2. DOM事件

事件类型
鼠标单击事件 onclick
鼠标双击事件 ondblclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
鼠标点击事件 onmousedown
   window.event 有一个buttons属性
   取值为1表示左键被按下
   取值为2表示右键被按下
   取值为4表示中间滚轮被按下
光标移入事件(获得焦点) onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘 onkeydown 按下按键时
onkeypress 按下按键时
   onkeyup 松开按键时

   keydown先发生 > onkeypress 再发生 > onkeyup 最后发生

   keyCode不区分大小写 keyCode区分大小写
   可以识别特殊字符只能识别可打印字符

事件对象
window.event 事件发生时的所有跟事件相关联的信息
可以简写为event

event.preventDefault(); // 阻止标签的默认行为
设计一个文本框，只能输入数字 (可以利用 event.preventDefault())

event.stopPropagation(); // 停止事件冒泡
事件冒泡就是指：在子标签上触发的一个事件，会沿着标签的包含关系，逐级向上传播 4. this

class A {
    private int a;
    public void test() {
        this.a = 33;
    }
}
A x1 = new A();
x1.test();

A x2 = new A();
x2.test();

在javascript中， this代表触发了事件的标签对象
例如

<input type="button" value="删除" onclick="del(this)">

这里的this就代表当前的input按钮

5. BOM

Browser object model

window 代表整个浏览器窗口对象
   .alert("提示的文字"); // 弹出对话框窗口
   .confirm("提示的文字"); // 弹出确认框窗口如果点击了确定，返回true，点击了取消返回false
   .setTimeout(函数名称, 毫秒值); // 延时执行一个函数
例如：
function delay() {
   console.log("ok");
}
var n = window.setTimeout(delay, 10000); // 执行会返回一个数字
window.clearTimeout(n); // 根据setTimeout返回的数字，可以使用clearTimeout清除延时效果

.setInterval(函数名称, 毫秒值); // 根据时间间隔执行函数
.clearInterval() // 取消间隔执行

location 对浏览器地址栏的抽象
location.href 用来获取或改变地址栏的值
location.reload(); // 刷新页面

history.back(); // 上一个网页
history.forward(); // 下一个网页