JavaScript初探

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 = {}; //创建一个空对象
格式: { 属性名:属性值, 属性名:属性值 …}

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);

javascript 浏览器脚本语言
1) 基本数据类型：数字number，字符串string， 布尔值boolean， null， undefined
2) 复杂数据类型：
数组

  var array = new Array();
   var array = [1,2,3,4];
   访问元素  array[下标]

    for(var i = 0; i < array.length; i++) {
       array[i]
    }
   .push(值); .pop();
   .unshift(值);  .shift();
   .splice(下标, 个数);
   .sort(); // 对数组进行排序，但会把元素视为字符串类型
   .sort( (a,b)=>{ a - b } );

对象

   var obj = new Object();
   var obj = {name:"值", age:17};
   obj.sex = "男";
   delete obj.sex;

函数

   function 函数名(形参名1, 形参名2, ... 形参名n) {
       return
   }

函数名(实参1, … 实参 n)

js中函数没有重载特性，同名函数只能有一个，后定义的会覆盖前面定义的

日期
var date = new Date();
var date = new Date(毫秒值);
.getFullYear();
.getMonth();
..

正则表达式
var reg = /正则表达式/;

[0-9] [a-zA-Z]
? , +, *, {m,n}

reg.test(“目标字符串”); // true, false

字符串对象.replace(reg , “替换内容”);

3) html网页中使用js

<script>
    js代码
</script>

F12 控制台窗口

1.js配合html实现网页编程

DOM API (用js来操作html的一套api)
document 文档 Object 对象 Model 模型
可以把整个html视为一个树状结构，html中的每个标签都是树上的一个节点
document
|- html
|-head
|-meta
|-title
|-style
|-script
|-body
|-p
|-form
|-table
|-ul

1.1 查找元素

document.getElementById(标签id值); // 在设计id时要避免重复，id的取值应当唯一
document.getElementsByTagName(标签名字); // 根据标签的名字查找多个元素
父元素.getElementsByTagName(标签名字); // 查找从属于此父元素的所有与标签名称符合的子标签, 缩小了查找范围

通过选择器语法进行查找

id， .class值, 元素

document.querySelector(“选择器”); // 查找与选择器匹配的标签， 匹配第一个
document.querySelectorAll(“选择器”); // 查找与选择器匹配的标签, 匹配所有

1.2 修改

修改内容
.innerText 在赋值时，把字符串当做普通文本处理，如果字符串中包含了html标签，那么这些标签会照原样输出
.innerHTML 在赋值时，把字符串当做html代码处理，会解析html标签再显示
修改属性
.属性名 = “新值”;
修改样式
.className=”新class” // 对应访问class属性 (推荐使用class属性修改样式)
.style.具体样式名=”新值”; // 注意style 优先级较高，会覆盖其它样式

1.3 删除

父元素.removeChild(子元素);

1.4 新增

父元素.appendChild(子元素); // 建立父子元素关系
document.createElement(“标签”); // 创建新的标签元素

2. DOM事件

2. 事件类型

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

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

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

3. 事件对象

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(); // 下一个网页