JavaScript

JavaScript是一种基于对象的脚本语言，用于开发基于客户端和基于服务器的Internet应用程序

1.了解JS

1.1JavaScript的组成
  • JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；
  • DOM (Document Object Model文档对象模型)描述了处理网页内容的方法和接口
    DOM是 HTML 和 XML 的应用程序接口
    DOM 将把整个页面规划成由节点层级构成的文档。
    DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
    DOM 事件 - 描述事件的接口
    DOM 样式 - 描述处理基于 CSS 样式的接口
    DOM 遍历和范围 - 描述遍历和操作文档树的接口
  • BOM （Browser Object Model浏览器对象模型） 描述了与浏览器进行交互的方法和接口。
    由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现
    但实际上浏览器具有一定的通用性
1.2JavaScript的作用
  • 提供用户交互
  • 动态更改内容
  • 验证数据
1.3JavaScript的导入方式

1.3.1使用Script标记

  

1.3.2外部文件导入

  

1.3.3在事件处理程序中使用JavaScript

  
1.4调试
  • 浏览器中通过 F12 键启用调试，并在调试器菜单中选择“控制台”
  • 使用 console.log() 在调试窗口中显示 JavaScript 的值
  • debugger 关键词会停止 JavaScript 的执行，与在调试器中设置断点的功能是一样的

2. ECMAScript

2.1输入输出

JavaScript 不提供任何内建的打印或显示函数。

  • 使用 window.alert() 生成警告框
  • 使用 document.write() 写入 HTML 输出
    在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
    仅适用于测试
  • 使用 innerHTML 写入 HTML 元素
    输出位置便于控制
  • 使用 console.log() 写入浏览器控制台
    仅适用于本地调试
  • 使用窗口的confirm方法，可以生成一个确认对话框
2.2变量

Js中变量的含义、命名规范和java中基本一致

2.2.1变量的声明

声明变量用 var 关键字，初始化为undefined
声明变量时赋值，如：var name=”hello”;

也可以用let关键字定义，会将作用域限制于当前块中

2.2.2基本数据类型与常量

JavaScript 中有五种可包含值的数据类型：

  • 字符串（string）：用两个双引号或两个单引号括起来的字符。控制字符；反斜杠后跟普通字符表示，如：\r（回车）  \n（换行）  \t  \’  \”  \

  • 数值（number）

  • 布尔（boolean）： true/false

  • 对象（object）

  • 函数（function）

    有三种对象类型：

  • 日期（Date）

  • 对象（Object）

  • 数组（Array）
    两种不能包含值的数据类型：

  • null：表示空值的特殊关键字。可以通过设置值为 null 清空对象，但是类型仍然是对象

  • undefined：常量，未定义、未赋值。任何变量均可通过设置值为 undefined 进行清空

2.2.3数值属性与常量

MAX_VALUE：返回 JavaScript 中可能的最大数。
MIN_VALUE：返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY：表示负的无穷大（溢出返回）。
POSITIVE_INFINITY：表示无穷大（溢出返回）。
这些属性只能作为 Number.MAX_VALUE 的形式访问

NaN 表示非数字值的常量（“Not-a-Number”）
指示数字并非合法的数字。
isNaN() 全局函数，判断一个变量是否为NAN
Infinity正无穷大常量，Infinity – Infinity // 返回NaN，Boolean(Infinity) == true，Number.MAX_VALUE < Infinity

2.2.4字符串

内建属性 length 可返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本，返回 -1
search() 方法搜索特定值的字符串，并返回匹配的位置
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
提取部分字符串：slice(start, end)、substring(start, end)、substr(start, length)
replace(oldstr, newstr)替换字符串内容，只替换首个匹配；对大小写敏感；不会改变调用它的字符串，返回的是新字符串
trim()删除字符串两端的空白符
split(分隔符字符串)把字符串分割为数组

2.2.5布尔型

所有具有“真实”值的即为 True
所有不具有“真实”值的即为 False

Boolean(NaN)  //false
Boolean(null)  //false
Boolean(undefined)  //false
Boolean(0)  //false

2.2.6日期

Date 对象

主要方法
setDate(x) getDate()：月中几号(1~31之间)
getDay()：星期几(0是星期天，6是星期六)
setFullYear(year,month,day) getFullYear()：年（如2016）
setHours(hours, mins, secs, ms) getHour()：小时(0~24)
setMillseconds(x) getMillseconds()：毫秒
setMinutes(mins, secs, ms) getMinutes()：分钟
setMonth(month,day) getMonth()：月(注意在0~11之间，0是一月)
setSeconds(secs, ms) getSeconds()：秒
setTime(ms) getTime()：毫妙数

2.2.7数组

数组的定义和java数组的定义类似

var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");

常用方法
concat()：将两个数组合并
join()：使用指定字符串将树族元素拼接成一个字符串
push()：在数组末尾添加一个元素
pop()：从数组末尾删除一个元素
shift()：删除数组的第一个元素
unshift()：在数组头部增加一个元素
sort()：排序
reverse()：倒排数组元素顺序

2.2.8Math工具类

Math对象是javascript中的内置对象，不需创建就可使用，提供了大量数学计算方法：
Math.abs(x)：返回x的绝对值
Math.ceil(x)：返回大于等于x但最接近x的整数
Math.floor(x)：返回小于等于x但最接近x的整数
Math.round(x)：返回最接近x的整数，既对x做四舍五入运算
Math.max(args…)：返回一组参数中的最大值
Math.min(args…)：返回一组参数中的最小值
Math.random()：返回0.0~0.1中的一个随机数

2.3.函数

function 函数名称(参数类表)
{
程序代码
return 表达式;
}

js将函数调用的参数存储在arguments的数组中，可以用参数名或者arguments数组元素调用参数

2.4对象

对象的创建

var name ={

属性名：属性值；

方法名：function(){方法体}

}

对象的原型(继承)机制

child.下划线proto下划线=father

3.DOM

3.1浏览器对象模型

Web初级——JavaScript_JavaScript

Window：是顶对象，包含其它对象。
Navigator：是浏览器对象，包含了浏览器的名称、版本、运行平台、是否支持cookies等信息。
Frames：数组引用一组窗口对象
Location ：对象存储当前页的URL地址
Document：既文档对象，是编程中使用的最多的对象
History：记录当前会话中用户访问了哪些网页
Screen：提供了当前计算机的显示特性，如屏幕宽度、高度、颜色深度等

3.2文档对象模型

Web初级——JavaScript_Web_02

3.4Document 对象

Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。
方法
clear
close
open
write
writeln
getElementById
getElementsByName
getElemenstByTagName
createElement

3.5操作BOM对象

Window 对象

Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。
属性

navigator（封装了浏览器的基本信息）document（代表当前的页面，html dom文档树）、event、history （记录浏览记录，前进后退）、location（代表当前界面的url信息）、screen（代表屏幕尺寸）
方法
alert  生成警告框
confirm 写入html
close  关闭窗口
open  打开弹窗

3.6操作DOM对象

3.6.1获取节点对象

document.getElementById();//通过id获取节点
document.getElementsByClassName();//通过类名获取节点
document.getElementsByTagName();//通过节点名获取节点

3.6.2更新节点对象

节点名.innerText='';修改文本
节点名.innerHTML='';加入HTML代码
节点名.style.css属性=XX;修改格式
如id.style.color = 'yellow';

3.6.3删除节点

先获取父节点，在通过父节点删除自己
父节点.removeChild(子节点);

3.6.4插入节点

父节点.appendChild(子节点);向后插入一个子节点
父节点.inserBefore(1节点，2节点);将1节点插入到2节点前
var name = document.createElement('标签名');
设置节点属性
name.id='';
name.innerText='';
name.setAttribute('key','value');
比如:name.setAttribute('id','p1');增加一个p1的id属性
3.7操作表单

用var text = document.getElementById获取文本节点

text.value获取文本值

表单提交验证，在表单中添加onsubmit属性

onsubmit="return 绑定事件" 当返回值为false时，阻止表单提交

function juage(){
        var a = document.getElementById(('text1'));
        var b = document.getElementById(('text2'));
        if(b.value=='123456')
            return true
        else {
            alert("密码错误")
            return false
        }
    }
4.jQuery
$(selector).action();
4.1select（选择器）
jQuery的选择器和css一致,比如
$('#id')    $(.class)  $('p')....
4.5action（事件）
.mousedown()   //鼠标按下
.mousemove()  //鼠标移动
.text('');   //获取(修改)文本
.html(''); //添加html语句
.css('key','value');  //设置css格式
.show()  .hide()   //显示/隐藏节点
.append()   //追加元素或者内容
.after()  .before()    //后方、前方加入
.remove()  //删除该元素及其子元素
.empty()   //清空该元素的所有子元素
5.Ajax
5.1创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础
var xml = new ActiveXObject("Microsoft.XMLHTTP");
5.2向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
Web初级——JavaScript_Web_03
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
5.3基于状态响应的处理