前言
本文主要讲述后端开发者需要的基本web知识点，讲述了JavaScript 的一些基本内容。
一、JavaScript
1、定义
js 是用来写逻辑代码的一种编程语言。
深入的来讲，js 相当于一半java 语言与一半C 语言的结合体。
js代码在 html中 必须要写在<head></head>环境中的<script language="javascript">这里写js代码</script>环境下，
2、JS编程基础
js语言基础：
1、变量
js 是一种弱类型语言，数据没有类型。
js 是一个半面向对象的语言， 变量没有初始化 / 赋值，不能直接使用 (会出现undefined)，虽然不会报错（这是程序规范）。
变量可以是任何类型，定义赋值变量之后 ，才可以说它是什么类型。
定义方式：
var 变量名=值;
/**
* js 是一种弱类型语言，数据没有类型
* （可以是任何类型，定义赋值之后 才可以说它是什么类型）
* 半面向对象的语言 变量没有初始化/赋值，不能直接使用 (会出现undefined)，虽然不会报错（程序规范）
* typeof()函数，输出变量的类型
*/
var i=100; // 定义+初始化
console.log(i+": "+typeof(i));
i=12.4;
console.log(i+": "+typeof(i));
i='hello';
console.log(i+": "+typeof(i));
i=new Date();
console.log(i+": "+typeof(i));
i=true;
console.log(i+": "+typeof(i));
i=null;
console.log(i+": "+typeof(i));
var j;
console.log(j+": "+typeof(j));
2、输出
输出到页面：
document.write("hello world");
输出到控制台：
// 查看方法（在浏览器页面）：1、按F12 2、右键检查，点击控制台
console.log('hello world');
以提示框形式输出：
alert('123');
3、基本的运算法则（运算规则同java类似）：
（加） +、（减）-、（乘）*、（除）/、取余（%）
4、判断循环（运算规则同java类似）：
判断：（if、switch case）
循环：（for、while）
5、函数定义及调用：
function 函数名(函数形参){
函数体
}
// 5、函数
/**
* 函数 js 中函数不需要声明返回类型，执行了return则有返回，没有则无
* 形参：不需要声明var,直接写参数名（不确定类型）
* 调用：1. 在代码块中直接调用定义的函数
* 2. 更多的情况下，通过界面元素的操作来调用函数 如：按钮、超链接等
*/
// 有返回值的函数
function myadd(a,b){
return a+b;
}
// 无返回值的函数
function changecolor(c){
document.bgColor=c;
}
// 无返回值的函数————直接输出页面元素
// 通过js 代码获取页面元素上的数据 通过id、name...来找到获取内容
function myfunc(){
var usernaem=document.getElementById("username").value;
alert(usernaem);
}
// 调用函数1.————（实参类型可以不同）
var result =myadd(1,3);
console.log(result);
result=myadd("a","b");
console.log(result);
<body>
<!--调用函数2.————利用按钮调用，当点击按钮时，调用函数-->
<!--onclick 属性，被点击时触发事件，可以写函数-->
<button onclick="myfunc()">MYFUN</button>
</body>
3、JS 内置对象
1、Array 对象
// 1.数组的创建和赋值
var arr= new Array();
arr=[10,20,30];
console.log(arr);
// 2.数组的长度：可以随便变化，里面数据的个数决定数组的长度
// 3.数组的数据类型：没有固定的数据类型，可任意
arr[0]=1;
arr[1]=2;
arr[2]=true;
arr[3]="hello";
console.log(arr);
// 4.循环遍历 数组的长度属性: arr.length()
for (var i=0;i<arr.length;i++){
console.log(arr[i]);
}
// 5.数组常用的方法：
// 方法1.数组拼接join ————将数组的每个元素合并成一个string
var result=arr.join('-');
console.log(result);
// 方法2. 数组反转reverse ————顺序的反转
arr=arr.reverse();
console.log(arr);
// 方法3. 数组排序sort————转成字符串排序
// 解决方法：可写一个函数作为比较器
arr.sort();
console.log(arr);
arr=[3,1,5,10,2,8];
arr.sort();
console.log(arr);
// 存在的问题: js不分数据类型，sort方法只是将数组每个数据转为string再去排序。
// 设置数字排序规则，可以写一个方法（作为比较器） ，将该方法作为sort的参数，就可以实现按照你写的方法进行排序。
// 例如：compara 函数：只有数字才能做减法，不是数字，会强制转换。
// 结果整数表示大于，负数表示小于，0表示等于
function compare(a,b){
return a-b;
}
arr.sort(compare);// 使用比较器之后在进行比较
console.log(arr);
//方法4. 索引操作————找到索引为3的数组元素
console.log(arr.indexOf(3));
// concat 数组拼接 将两个数组拼接起来合成一个新的数组
// push 在末尾增加元素
arr.push("hello");
console.log(arr);
// pop 在末尾删除元素
arr.pop();
console.log(arr);
// 方法5. 截取操作————截取数组中索引1到3的元素（前闭后开）,返回的是一个数组
console.log(arr.slice(1,3));
// 6.数组的维度———— 二维数组，其外层数据中，每个数据都是个数组
var arr2=new Array(
new Array(1,2,3),
new Array(4,5,6),
new Array(7,8,3)
);
// 遍历输出
console.log(arr2);
for (var i=0;i<arr2.length;i++){
for(var j=0;j<arr2[i].length;j++){
console.log(arr2[i][j]);
}
console.log('-------------------');
}
2、数学工具类
// 所有方法都是静态方法
document.write(Math.PI); // 数学中的圆周率
document.write(Math.pow(2,3)+"<br/>"); // 次方运算——2的3次方
document.write(Math.abs(-19)+"<br/>"); // 绝对值
document.write(Math.round(3.9)+"<br/>"); //四舍五入取整
document.write(Math.ceil(3.9)+"<br/>"); // 向上取整（ceil天花板）
document.write(Math.floor(3.9)+"<br/>"); // 向下取整（floor地板）
document.write(Math.random()+"<br/>");// 随机数，默认0到1（float）[可通过乘法得到自己想要的范围]
document.write(Math.max(2,4,43,23,4)+"<br/>"); // 求这些数中的最大值
document.write(Math.min(2,4,43,23,4)+"<br/>"); // 求这些数中的最小值
3、日期类
// 创建对象
var date=new Date(); // 默认系统的当前时间
console.log(date);
console.log("Year "+date.getYear()); // 获取的是1900到现在的年份差
console.log("Year "+date.getFullYear()); // 现在的年份
console.log("month "+(date.getMonth()+1)); // 获取的是索引（从0开始），所以使用的时候需要加1
console.log("date "+date.getDate()); // 今天多少号
console.log("星期 "+date.getDay()); // 星期几
console.log("格式输出 "+date.toString());
4、String 类
// 创建对象
var str =new String("helloo");
console.log(str);
// 常用属性及方法
console.log(str.length); // 长度属性，获取字符串的长度
// 找到字母'o'的索引（注：索引从0开始）
// 如果有多个字符，则返回找到的第一个字符的索引
console.log(str.indexOf('o'));
// 如果有多个字符，则返回找到的最后一个字符的索引
console.log(str.lastIndexOf('o'));
console.log(str.indexOf('x'));
console.log(str.charAt(3)); // 获取索引为3的字符
// 截取字符串
console.log(str.substr(3,1)); //开始索引3，截取长度1
console.log(str.substring(3,5)); // 开始索引3，结束位置5（前闭后开）
console.log(str.slice(3,5)); // 开始索引3，结束位置5（前闭后开）
// 替换字符
// 使用正则表达式进行替换可以替换所有匹配的值，否则只能替换第一个
console.log(str.replace('l','e'));
console.log(str.replace(/l/g,'e'));
5、window对象
// window 的常用方法：
// 方法1、弹出框
// 某些不需要对象的方法，其实默认是window对象，只是没有写出来
// 例如：（弹出框）alert、confirm、prompt
alert("hello"); // 提示框 【window.alert("hello");】
confirm("word"); // 确认对话框 【window.confirm("word");】
// 输入对话框，可以通过变量拿到输入的值 【var msg = window.prompt("JavaScript"); 】
prompt("JavaScript");
// 方法2、打开关闭浏览器 注：使用代码时候需要注释配合，否则一进去就打开另一个网页并关闭了，无法体现效果。使用的时候推荐像函数一样配合按钮使用。
window.open("work2_2.html"); // 打开该工程下的work2_2.html 网页
window.close(); // 关闭当前网页
// window 常用属性
// 属性1、宽高（screen）———通过window获取屏幕宽高
alert(window.screen.width + " " + window.screen.height);
// 属性2、状态（status）————设置浏览器底部状态栏文本（不常用）
window.status="hello";
// 属性3、地址栏（location）————可获取浏览器链接、实现跳转、重新加载
// location 获取设置地址栏的内容，href属性实现跳转 reload 重新加载
var url =window.location; // 浏览器的链接地址
alert(url);
window.location.href="work2_2.html"; // 跳转页面，可写在函数内，配合按钮使用，让按钮实现超链接的功能。
window.location.reload; // 重新加载
6、document对象
/**
* DOCUMENT 对象
* 1.基本属性: 通过属性获取：表单名（.forms）、链接地址（.URL）
* 2.对象方法: 通过id、name、标签等获取页面元素（非常重要）
*/
// 属性：
// alert(document.URL);
// alert(document.forms);
// 方法：【联动方法和按钮实现效果】
// 使用document 的各个get 方法获取页面元素
function showdiv(){
var myid=document.getElementById("myid"); // 通过id值 获取元素
alert(myid.innerHTML); // 获取标签中的内容
}
function showname(){
var spans=document.getElementsByNames("myid"); // 通过name值 获取元素
for (var i=0;i<spans.length;i++){
console.log(spans[i].innerHTML); // 获取标签中的内容
}
}
// 通过标签名定位同类元素
function showtag(){
var tags=document.getElementsByTagName("p");
for (var i=0;i<tags.length;i++){
console.log(tags[i].innerHTML); // 获取标签中的内容
}
}
// .innerHTML是大多数标签的属性，可以通过设置它的值来 设置/获取 标签中的内容
// .innerHTML('你好'); 设置标签中的内容为: 你好
4、JS 应用实例
JS 应用：
1、应用于一些基础的计算（例如：计算器等）
2、应用于样式功能的联动 （例如：鼠标放上去，样式改变、图片的滚动等）
3、应用于同用户实现交互（例如：登录功能的验证【密码长度需要大于XXX】）
例子：（字符串跑马灯效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language='javascript'>
// 字符串跑马灯效果：
var str=new String("Hello");
function rollstr(){
var topp=str.charAt(0);
str1=str.substr(1,str.length-1);
str=str1+topp;
var strdiv=document.getElementById("strdiv");
strdiv.innerHTML=str;
setTimeout('rollstr()',1000); // 隔1s,调用一遍函数'rollstr()'
}
</script>
</head>
<body onload="rollstr();"><!--onload 属性，当登录时，实现XXXX -->
<div id="strdiv"></div>
</body>
</html>