javascript的快速入门介绍

大致内容
javascript简介
使用方法
基础语法
数据类型
运算符
流程控制
函数
对象
内置对象
事件
BOM
HTML DOM

一.javascpirt简介

javascript是一种客户端脚本语言
javascript是一种解释性语言（代码不进行预编译）
特点：弱类型和基于对象
三个核心：ECMAScript基本语法 DOM BOM

前端技术构成
HTML:一种标记语言，用于结构化网页
css:一种样式语言规则，用于将样式应用于HTML内容，例如设置背景颜色和字体
javascript:脚本语言：创建动态更新的内容，控制多媒体，制作图像动画等等

二.使用语法

内部：

外部

内联
讲js写入html代码中，如在HTML标签时间中或超级链接里

三.javascript语法

1.输出方法;
window.alert()弹出警告框
document.write()讲内容写到HTML文档中
innerHTML 写入到HTML元素
console.log() 写入到浏览器控制台
2.变量
声明变量 var name;
命名规则和规范
规则 必须遵守的：
由字母，下划线，数字，美元符号构成，不能以数字开头
不能是关键字和保留字
区分大小写

3.注释
/* */

4.js数据类型

String,Number,Boolean,Null,Underfined,Symbol(es6引入的数据模型，表示独一无二的值)
引用数据类型：对象Object 数组 Array 函数Function

typeof获得数据类型

underfined和null的区别

值类型转换和引用类型转换
值类型：开辟新内存空间，变量值赋予新变量，之后两变量值变动互不影响

引用类型理解：变量之间互相赋值，只是指针交换，并非讲对象复制给新变量，对象依然只有一个

类型转换：

五.js运算符

1.算数运算符

• 加法

• 减法

• 乘法
  / 除法
  ++ 递加
  – 递减

• 两头都是数值就求和，不然做字串连接
  2.赋值运算符
  =
  +=
  -=
  *=
  /=
  %=
  3.比较运算符
  == 等于
  ===等值类型（值相等且类型一致返回true）
  !=不相等
  !==不等值（值不相等或类型不相等为true）
  “>” 大于
  "< "小于
  “>=” 大于或等于
  <= 小于或等于
  ? : 三元运算符

4.逻辑运算符
&& 与运算
|| 或运算
! 非运算

5.类型运算符
typeof 返回变量类型
instanceof 返回true,如果对象是对象类型的实例

6.优先级

六.流程控制

1.分支结构（条件结构）

if else

switch

2.循环结构

for循环

示例代码

for…in循环

while循环

示例

break和continue

七.js函数

1.函数定义方法

第二种 var 函数名=new Function(“参数1”,“参数2”,…“函数体”);

第三种 var 函数名=function(参数1，参数2…){函数体}

函数使用

变量作用域

函数返回值

八.javascript内置对象

1.数字
极大或极小的数字可通过科学（指数）计数法来写：
var y=123e5; // 12300000
数字均为64位 最高精度15位

无穷大:基于它们的加、减、乘和除运算结果还是无穷大
myNumber=2;
while (myNumber!=Infinity)
{
myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
var x = 1000 / “Apple”;
isNaN(x); // 返回 true
var y = 100 / “1000”;
isNaN(y); // 返回 false

Number属性

数字方法

2.String
一个字符串可以使用单引号或双引号：
var carname=“Volvo XC60”;
可以在字符串中使用转义字符()使用引号：var answer=‘It’s alright’;

常用方法
a.使用长度属性length来计算字符串的长度：document.write(txt.length);
b.使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置
var str=“Hello world, welcome to the universe.”;
var n=str.indexOf(“welcome”);
c.match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
var str=“Hello world!”;
document.write(str.match(“world”) + “
”);
document.write(str.match(“World”) + “
”);
document.write(str.match(“world!”));
d.替换
replace() 方法在字符串中用某些字符替换另一些字符。
str=“Please visit Microsoft!”
var n=str.replace(“Microsoft”,“Runoob”);
e.字符串转为数组
txt=“a,b,c,d,e” // String
txt.split(","); // 使用逗号分隔
txt.split(" “); // 使用空格分隔
txt.split(”|"); // 使用竖线分隔
f.特殊字符

g.其他属性和方法

3.日期
a.初始化日期

b.设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

c.如何将日期变成指定格式?

Date.prototype.format = function(fmt){
  var o = {
    "M+" : this.getMonth()+1,                 //月份
    "d+" : this.getDate(),                    //日
    "h+" : this.getHours(),                   //小时
    "m+" : this.getMinutes(),                 //分
    "s+" : this.getSeconds(),                 //秒
    "q+" : Math.floor((this.getMonth()+3)/3), //季度
    "S"  : this.getMilliseconds()             //毫秒
  };

  if(/(y+)/.test(fmt)){
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  }
        
  for(var k in o){
    if(new RegExp("("+ k +")").test(fmt)){
      fmt = fmt.replace(
        RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
    }       
  }

  return fmt;
}

document.getElementById("demo1").innerHTML=new Date(79,5,24,11,33,0).format("MM月dd日"); 

var now = new Date();
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo2").innerHTML=new Date().format("yyyy年MM月dd日");
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo3").innerHTML=new Date().format("yyyy年MM月dd日hh小时mm分ss秒");
alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

4.数组
a.创建
var myCars=new Array();
myCars[0]=“Saab”;
myCars[1]=“Volvo”;
myCars[2]=“BMW”;
b.访问
var name=myCars[0];

c.可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

5.布尔值
初始化
var myBoolean=new Boolean();
如果布尔对象无初始值或者其值为:
0
-0
null
“”
false
undefined
NaN
那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！

6.Math类
生成随机数 document.getElementById(“demo”).innerHTML=Math.round(2.5);
算数方法
Math 对象的 round 方法对一个数进行四舍五入。 document.write(Math.round(4.7));
Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数 document.write(Math.random());
Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：
document.write(Math.floor(Math.random()*11));

九.BOM

a.windows
有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
其他 Window 方法
一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

b.window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

document.write(location.href);

c.window.history
history.back() 方法加载历史列表中的前一个 URL。
history forward() 方法加载历史列表中的下一个 URL。

实例
在页面上创建后退按钮：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
function goBack()
{
    window.history.back()
}
</script>
</head>
<body>
 
<input type="button" value="Back" onclick="goBack()">
 
</body>
</html>

d.弹窗
警告框
window.alert() 方法可以不带上window对象，直接使用alert()方法。
window.alert(“sometext”);
确认框
var r=confirm(“按下按钮”);
if (r==true)
{
x=“你按下了"确定"按钮!”;
}
else
{
x=“你按下了"取消"按钮!”;
}
提示框
提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt(“请输入你的名字”,“Harry Potter”);
if (person!=null && person!="")
{
x="你好 " + person + “! 今天感觉如何?”;
document.getElementById(“demo”).innerHTML=x;
}

换行
弹窗使用 反斜杠 + “n”(\n) 来设置换行。
alert(“Hello\nHow are you?”);

e.计时事件
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
实例

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

停止运行
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

停止

十.DOM对象

A.DOM HTML
a.改变HTML内容

Old Header

b.改变html属性

B.DOM 改变CSS

Hello World!

Hello World!

以上段落通过脚本修改。

通过触发事件来执行代码

C.事件
这是比较常用的
HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

点击文本!

a.onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

b.onchange 事件 onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

c.onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

d.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

D.DOM监听
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

a.向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener(“click”, myFunction);
你可以向同个元素添加不同类型的事件：
element.addEventListener(“mouseover”, myFunction);
element.addEventListener(“click”, mySecondFunction);
element.addEventListener(“mouseout”, myThirdFunction);

b.removeEventListener() 方法
element.removeEventListener(“mousemove”, myFunction);