本文共 6307 字，大约阅读时间需要 21 分钟。
写给自己的笔记
javascript是基于对象模型和事件驱动的脚本语言，可以嵌入html中。
注意：js也是弱类型语言
特点：(1)交互性
(2)安全性：js不能访问本地磁盘
(3)跨平台性：所有的浏览器都内置js解析器
js作用：
(1)可用动态修改(增删)html及css的代码
(2)js可以动态的校验数据
js组成： ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
(1)内嵌脚本<body> <input type="button" value="button" onclick="alert('x')" /></body>(2)内部脚本<html><head> <title></title><script type="text/javascript"> document.getElementById("btn").onclick=function(){ alert("xxx"); };</script></head><body> <input id="btn" type="button" value="button" /></body></html>(3)外部脚本先创建一个.js文件，将js短代码写在其中，在html中使用script标签进行引入。my.js:window.onload=function(){ document.getElementById("btn").onclick=function(){ alert("xxx"); };};lab.html:<!DOCTYPE h tml><html><head> <title></title> <script type="text/javascript" src="my.js"></script></head><body> <input id="btn" type="button" value="button" /></body></html>1、变量:用var定义var x;2、原始类型number：数字类型string：字符串类型boolean：布尔类型undefined：未定义null：空类型unfined+1 = NaNnull+1 = 1字符串string可以访问length <script type="text/javascript"> alert('hello world'.length); </script>类型转换：number和boolean转成string：x.toString(); String(x); +号拼接string转成number：parseInt(x); parseFloat(x); Number(x); 利用加减乘除进行隐式转换强转boolean：Boolean(value)3、引用类型var obj = new Object();4、js运算符(1)赋值运算符 var x=5;(2)判断运算符 <、>、<=、>=、!=、==、===(3)算术运算符 加号：如果一个加数是字符串，进行字符串拼接 其他：如果是字符串数字在进行类似减法运算时，先把字符串转换成数字然后在运算(4)逻辑运算符 (5)void运算符 <a href="javascript:void(0);">dianji</a>(6)类型运算符 typeof判断数据类型、instanceof预测5、isNaN(var):判断var是不是数字类型，是的话返回false，否则返回true6、转义字符同C语言7、js逻辑语句if、if else、if elseif else、switch casefor (index in count){ }for (var i=1; i<=5; i++){ } <script type="text/javascript"> switch(表达式) { case value1: 执行语句1; break; case value2: 执行语句2; break; default: 执行最后的语句; } </script>8、注意：js没有块级作用域9、js引擎运行js分两步：预解析、代码执行预解析：js引擎把js里面所有的var和function提升到当前作用域最前面代码执行：按照代码书写顺序从上到下执行预解析分为变量预解析(变量提升)和函数预解析(函数提升)变量提升：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作函数提升：把所有的函数声明提升到当前作用域的最前面输入输出语句
<script type="text/javascript"> //弹出输入框 prompt('prompt'); //弹出警示框 alert('alert'); //console 控制台输出 console.log('console'); </script>输入变量并弹框
<script type="text/javascript"> var str = prompt('input: '); alert(str); </script>数组
<script type="text/javascript"> //利用数组对象创建 var arr = new Array(); //利用数组字面量创建 var arr1 = [1,2,3,'hello']; var len = arr1.length;</script><script type="text/javascript"> var arr = [1,2,3,4,5]; console.log(arr); arr.length = 6; console.log(arr); arr[5] = 6; console.log(arr);</script>1、Number对象创建方式：var myNum=new Number(value); var myNum=Number(value);常用方法：toString():把数字转成字符串 valueOf():返回一个Number对象的数值2、Boolean对象创建方式：var bool=new Boolean(value); var bool=Boolean(value);常用方法：toString():转成字符串 valueOf():返回Boolean对象的数值3、String对象创建方式：var str=new String(s); var str=String(s);属性：length常用方法：indexOf:检索字符串 lastIndexOf():从后向前搜索字符串 split():把字符串分割为字符串数组 substring():提取字符串中两个指定索引之间的字符(左闭右开) substr():从起始索引字符串提取字符串中指定数目的字符4、Date对象创建方式：var date=new Date(); data对象自动把当前日期和时间保存为其初始值(毫秒)常见方法：getFullYear():以四位数字返回年份 getMonth():返回月份 getDate():获取日 getDay():返回一周中的某一天5、Math对象没有构造函数。可以像调用java中的静态方法一样调用常见方法：略6、RegExp对象创建方式：var reg=new RegExp(pattern); var reg=/pattern/;常用方法：正则表达式.test(待校验的字符串)7、Array对象创建方式：var arr=new Array(); var arr=new Array(size); var arr=new Array(element0, element1....); var arr=[element0, element1....];属性：length：数组的长度常用方法：join():把数组的元素通过指定字符分隔的形式放入一个字符串中 pop():删除并返回数组最后一个元素 reverse():反转1、自定义函数(1)普遍函数function 函数名称(参数列表){ 函数体} 示例 <script type="text/javascript"> function func(){ return [1,2,3,4,5]; } console.log(func()); </script> (2)匿名函数var method=function(参数列表){ 函数体}(3)对象函数new Fuction("参数1", "参数2", ..."函数体");var method=new Function("str", "alert(str)");method("hello");2、全局函数略(需要时查)3、arguments使用 <script type="text/javascript"> function func(){ console.log(arguments); console.log(arguments.length); for (var i=0; i<arguments.length; i++){ console.log(arguments[i]); } } func(1,2,3,4,5,6); </script>创建对象、构造函数
利用对象字面量创建对象<script type="text/javascript"> var obj = { name: 'name1', age: 18, sayHi: function() { console.log('hi~'); } } console.log(obj.name); console.log(obj['age']); obj.sayHi();</script>利用new Object创建对象<script type="text/javascript"> var obj = new Object();//创建空对象 obj.name = 'name1'; obj.age = 18; obj.sayHi = function(){ console.log('hi~'); } console.log(obj.name); console.log(obj.age); obj.sayHi();</script>构造函数<script type="text/javascript"> 用法 function 构造函数名() { this.属性 = value; this.方法 = function() { } } new 构造函数名(); function Stu(_name, _age){ this.name = _name; this.age = _age; this.sayHi = function(sentence){ console.log(sentence); } } var stu = new Stu('name', 18);</script>补充
javascript对变量分配空间的规则和c不同
简单数据类型直接在栈中分配空间
复杂数据类型在堆区分配空间，在栈中保留一个指向堆区的地址
简单数据类型传参调用按值传递
复杂数据类型传参调用按地址传递，
1、常用事件onchange事件、onfocus事件onmouseover事件、onload事件、onclick2、事件与事件源的绑定方式(1)事件与相应行为与事件源绑定<input type="button" value="button" onclick="alert('x')" />(2)事件与事件源绑定 相应行为使用函数封装<script type="text/javascript"> function method(str){ alert(str); }</script><body> <input type="button" value="button" onclick=method("hello") /></body>或this关键字：代表本事件源对象<body> <input type="button" value="button" onclick=method(this) /></body><script type="text/javascript"> function method(obj){ alert(obj.type); }</script>(3)事件、相应行为、事件源完全分离<body> <input id="myinput" type="button" value="button" /></body><script type="text/javascript"> var inputObj=document.getElementById("myinput"); inputObj.onclick=function(){ alert("hello"); }</script>3、阻止事件的默认行为W3C标准：e.preventDefault();IE标准：window.event.returnValue=false;<body> <a href="http://www.baidu.com" onclick="prevernt(event)">跳转到百度</a></body><script type="text/javascript"> function.prevent(e){ e.preventDefault(); }</script>browser对象包括了Window、Navigator、Screen、History、Location、存储。
用的时候查文档，这里只记录几个简单的。
1、window对象(1)弹框方法：提示框：alert(确认信息)确认框：confirm(确认信息)输入框：prompt(输入提示信息)(2)open方法作用是在js中使用此方法打开新页面(3)定时器方法：指定的延时时间后执行一定行为setTimeout(毫秒值, 函数对象)setInterval(函数对象, 毫秒值)2、location对象Location 对象包含有关当前 URL 的信息。location.href="url路径"; 3、history对象history.back()：返回上一页history.forward()：进入下一页history.go()：跳转到哪一页用的时候查文档，这里只记录几个简单的。
document.getElementById("id属性值");document.getElementsByTagName("标签名称");innerHTML:获取某个元素中的html代码转载地址：http://mpnh.baihongyu.com/