JavaScrip基础

JavaScript概述

历史

1. 由美国的(Netscape)网景公司开发(开发浏览器)。
2. 一种脚本语言（不需要编译 eg ：sql JavaScript python 是由解释器逐行执行）
3. Java是先编译，后交给jvm执行
4. 原名LiveScript,也是面向对象的，应用在网页中的，对网页进行操作
5. 网景公司和SUN公司合作，改名为JavaScript

JavaScript是一种直译式的脚本语言，嵌入在html中，运行在浏览器，为网页添加各种动态效果。

1. 响应各种鼠标键盘事件：onclick当点击标签是，标签会产生一个事件（动作），可以通过事件调用js函数（完成某个操作）

   <input type="button" onlick="alert()"/>
   

2. 客户端页面表单验证：把一些无效的数据过滤掉，减轻服务器端的压力

3. 动态的改变标签的样式（动态操作）

html css js关系

1. html是网页内容(骨架)
2. css是网页样式(皮肤)
3. js是网页行为(动作)

//单行注释 Ctrl+/

/* */多行注释 Ctrl+shift+/

alert(hello);调用js中的全局函数，对话框

导入外部js脚本文件

<script src="" type="text/javascript" charset="utf-8"><!-- 这里不能写脚本 --></script>
		<script type="text/javascript">
			// 这里可以写脚本
			alert("hello");//调用全局函数->对话框
		</script>

js特有基本语法

变量的声明(variable变量)命名规则遵循Java中的规则

1. var name; eg:var a=10;
2. js是弱类型语言，声明变量可以赋任何类型的数据

数据类型

1. 数值型：整数，浮点
2. 布尔型 ：true ，false
3. 字符串：" ",’ ’ 都表示字符串
4. undefined类型：声明后未赋值的变量
5. object类型：对象型 与Java不同 eg: var date=new Date();

运算符

1. 调试console.log(x);

2. 数值+字符串=链接

3. 数值-字符串数字（隐式转换）=数值 （* / > < 都一样）

4. 不满足转换 结果返回NaN

5. 比较运算 赋值= 比较是否相等== 全等（值和类型）===

6. 逻辑 && || ！

   <script type="text/javascript">
   			var a=5;
   			var b="5";
   			console.log(a==b);//true
   			console.log(a===b);//false
   		</script>
   

流程控制

1. for
2. if else
3. switch
4. while…

函数

虽然js是面向对象的语言。但是函数可以独立的定义

函数：为完成某个特定的功能，定义函数，可以多次调用

java中的方法必须写在类中，对象调用

定义函数

function demo(){

alert(“hello”);

}

注意：

1. 定义有参的方法不需要var声明
2. 定义有返回值的函数不需要声明返回值的类型

调用函数

js函数库中提供的全局函数 函数库在浏览器中，可直接使用

1. parseInt(“字符串”);把字符串转换为整数
2. parseFloat(“字符串”);把字符串转换为整数
3. typeof()；返回数据类型
4. eval();运算某个字符串 可以把字符串当做脚本执行

注意：如果有字母，转换字母之前的值，开头为字母则值为NaN

内置对象

java有自己的标准（jdk）

前端五花八门，每个浏览器的标椎不同，写一个网页，在不同的浏览器效果不同

一个页面可以再不同的终端运行 pc pad

在所有前端开发工具中 .提示 都是不太准确的

1. String

   substring (开始位置，结束位置)

   substr(开始位置，截取长度)

   split()分割符

2. Array var a= new Array(); var a=[1,2,3];

   连接：concat();

   删除末尾元素：pop();

   向末尾添加元素并返回长度：push();

   将数组转为字符串，可以用指定的符号链接每个元素: join();

   逆序 : reverse

   排序：sort(); 默认按照字符编码排序，支持自定义的排序规则

3. Date :var date=new Date();

4. Math: Math.pow(2,3);

事件

对标签进行操作（鼠标点击标签，鼠标移入，键盘输入…）

标签就会产生一个事件（动作）单击，双击

通过事件来触发js函数，在函数中执行对网页进行操作的逻辑

1. 单击事件：onclick
2. 双击事件：ondblclick
3. 标签失去焦点：onblur
4. 标签获得焦点：onfocus
5. 鼠标移入：onmouseover
6. 鼠标移出：onmouseout
7. 网页内容加载完毕之后执行：onload 一般在body上
8. 失去焦点&内容改变：onchange
9. 键盘按下：onkeydown
10. 键盘抬起：onkeyup

事件对象

事件产生后，还会产生一个事件对象，包含一些事件相关信息

1. 鼠标在当前标签内的坐标：offsetX,offsetY
2. 获得鼠标在浏览器中的坐标：clintX,clintY
3. 获得鼠标在显示器内的坐标screenX,screenY

DOM对象

1. Document Object Model 文档对象模型
2. js是面向对象的语言，通过js可以对网页进行操作
3. 网页是由一个个标签组成，那么操作网页本质就是操作标签

js怎么操作网页标签呢？

1. 在js中，认为网页中的每个标签就是一个对象（实际存在，可以使用的）操作标签其实就是操作对象
2. DOM对象是对这一类对象的统称

js如何获得到网页中的标签？

要操作，先得到

window是浏览器窗口，是js中最大的一个对象

document是文档对象，表示整个html文档

1. 通过id找到标签(唯一) document.getElementById(“id”);
2. 通过标签名找到标签document.getElementsByTagName(“p”);
3. 通过类名找到标签 domcument.getElementsByClassName(“class”);
4. 通过name找到标签 domcument.getElementsByName(“name”);

注意：2.3.4.获取到的都是集合，即使获取到的只有一个标签对象，也是集合，操作时需要对集合进行循环遍历

js对标签的三种操作

1. 操作标签属性(.属性)
2. 操作标签体中的内容(.innerhtml)
3. 操作标签的css(.style)

表单验证

对表单进行数据验证，减少一些无效数据提交到服务器端

在提交表单之前，对表单数据进行验证，满足我们的输入条件，就提交表单，否则不提交

定义一个正则表达式

var reg=new RegExp("a");
// var reg=/^\d+$/;
//\w:[0-9a-zA-Z_]
var res=reg.test(account);

浏览器对象（BOM Browser）

内置对象 String Array DAte Math RegExp

DOM 指的是网页中的标签

window:表示浏览器窗口，是js中最大的一个对象，其他的全局函数都是它的成员

1. 浏览器对象的内部属性宽度window.innerWidth

2. 浏览器对象的内部属性高度window.innerHeight

3. 获得父级窗口： window.parent(一般用到iframe的地方会用)

   var msg=“需要传递的内容”;

   window.parent.document.getElementById(“showid”).inner HTML=msg;

   window.parent.show(msg);

4. 打开新窗口：window.open(url name feature )

lacation:获取页面地址，并把浏览器重新定位到新页面

1. assign：加载一个新页面到浏览器中，一个窗口打开多个页面，保留原来的（可回退）
2. replace：用新的替换原窗口中的页面（不可回退）
3. reload：重新加载

计时

1. setTimeout(“demo()”,5000);设置一个定时器，在触发后间隔5秒调用指定的函数，只调用一次
2. setInterval (“demo”,5000);每隔5秒执行一次，可多次调用