Hom's Blog

Home Category Tags Link About RSS

Javascript基础篇

JavaScript 是属于网络的轻量级脚本语言,可以直接插入HTML页面中使用, 因此被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies以及更多的应用,是因特网上最流行的脚本语言。 Javasciprt使用浏览器即可运行和查看结果,不需另装任何解析器! JavaScript和Java语法类似,但是完全是两种不同的语言.

JavaScript 是面向对象的语言，但JS不使用类。在JS中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。JavaScript 基于 prototype，而不是基于类的.

在HTML中使用外链(src="/*.js")或者内嵌的方法引入JS.例如下面的例子. 其中. HTML type默认是JS, 所以可以不写.

<!--外链-->
<script type="text/javascript" src="/jsmol/JSmol.min.js"></script>
<!--内嵌-->
<script type="text/javascript">
var hello;
</script>

测试和练习十分容易, 新建一个txt文件,改名为test.html, 文本编辑器打开后, 写入以下基本信息.在中间填入指令, 并用浏览器打开刷新即可.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> This is a test for javascript! </p>
<script type="text/javascript">



</script>
<button type="button" onclick="alert('Welcome!')">点击这里测试</button>
</body>
</html>

JS的内容会在页面加载时加载. 事件发生时动作可以利用函数来调用. 通过事件来操作页面元素是JS重要的作用.

基础知识

  • 分割语句;,注释//和/* comment */, 大小写敏感, 字符串' '和" "相等. null空值清空变量; undefined是没赋值.
  • 基础对象: String字符串型; 数字类型只有一种浮点类型Number,可以用科学计数法y=123e-5,支持8/16进制0577,0x1f;Boolean布尔型true/false;
  • 内置对象: Date日期型; Array数组型; Math 数学型; Regexp正则表达式类型; Event事件类型 (其实就是各种相应罢了,不怎么算对象); Object 对象型; Function函数型.
  • 浏览器对象: Window 窗口对象; Navigator浏览器对象; Screen 显示屏对象; History 浏览历史记录对象; Location 网站地址对象
  • 变量 var v1=1,v2="age"; var万能的动态类型. 全局变量(在函数外声明的)生存期是页面; 局部变量是函数结束. 函数内使用 vname=value 不声明就赋值的会被作为全局变量.
  • 数组,var=new Array();var[0]=1;var[1]=2;也可以=new Array(1,2)或=[1,2].数组下标0开始.
  • 字典, 本质是数组,也是对象. var a = new Array(); a['hi']=1;a['hh']=2;也可以用var a={"hi":1,"hh":2};. 可以用for (var key in ary)作循环. 字典的key既可以作为key,也可以作为对象的属性 a.hi. 字典的length属性不起效..
  • 对象(Object), var person={name:"Bill", id:5566};,调用属性person.name;person["name"];,方法类似. 对象当然还有方法了. Java的想法: 一切皆对象. 利用函数构造function person(name,age){this.name=name;this.age=age;}(对象构造器,this是自身);this.changeName=changeName;function changeName(name){this.lastname=name;} 对象内创建方法.
  • 函数 function fname([var1,var2]){..}, 可以return var1;返回值.JS居然不支持参数默认值方法..
  • 运算: 和C类似,支持%求余,++累加,+=自运算.
  • 字符串: 连接也是用加号. 数字和字符串相加,数字会转为字符串再处理.
  • 比较: ==等于(5==”5”是对),===全等于(值和类型),!=不等于, >,>=, &&与,||或,!非.
  • 条件句: if (){;} else if {;} else {;}; switch(var1){case val1: {;} break; default:{;}}; 三目: var1=(condition)?trueValue:falseValue
  • 循环: for (var i=0;循环条件;i++){;}; for (x in person){;}遍历对象属性(x此时为属性名); while (循环条件){;}和do {;} while (循环条件) 先判后做和先做后判; break和continue;
  • 标签: labelname: {..;break/continue labelname;..} 可用于跳出指定代码块.
  • 错误: try{;} catch(err){;} 测试并捕获. throw exception 抛出错误,一般是字符串.

HTML DOM

DOM就是document objective model.就是HTML各个元素对象. JS可以操控他们, 通过id,标签名,类名来找到元素, 并可以改变他们的元素,属性,css,对事件作出反应. 更多事件参考.

  • x=document.getElementById("demo") : 获取元素
  • var y=x.getElementsByTagName("p"); : 在获取元素后使用tag名来获取子元素(所有子元素).
  • document.write(""); : 写入内容到网页,加载完网页后执行,会覆盖网页…
  • document.getElementById("p1").innerHTML="New_Val": 改变其HTML内容.
  • document.getElementById(id).attribute=new_value: 改变属性值
  • document.getElementById("p2").style.color="blue" 改变样式.
  • document.getElementById("myBtn").onclick=function(){displayDate()}; 对事件做响应,这里通过调用元素事件完成.
  • document.getElementsByName("name") 通过元素名来获取元素,可能是个多对象的数组.
  • document.createElement("p"); 创建元素(节点)
  • document.createTextNode("这是新段落。");创建元素内容
  • para.appendChild(node);div1.appendChild(para) 向元素添加内容,再把元素放到父元素里

  • child.parentNode.removeChild(child); 删除子元素.这里通过调用父元素属性再实现移除.

  • <h1 onclick="changetext(this)">请点击该文本</h1> 对事件作出响应,这里调用函数完成,函数中参数是id,这里this就是该元素.
  • <body onload="checkCookies()"> onload事件就是页面加载时做的东东,onunload是离开页面做的.经常用于cookie处理,检查浏览器等.
  • <input type="text" id="fname" onchange="upperCase()"> onchange事件是离开输入框/按下确定时的事件.
  • <div onmouseover="mOver(this)" onmouseout="mOut(this)"> onmouseover/out是鼠标移入和移出事件,相应不同函数.
  • onmousedown, onmouseup 这两个事件对应鼠标按下和释放的事件.和onclick相关

常用属性和方法

全局对象(属性和方法)

Infinity 代表正的无穷大的数值。
java 代表 java.* 包层级的一个 JavaPackage。
NaN 指示某个值是不是数字值。
Packages 根 JavaPackage 对象。
undefined 指示未定义的值。
  • decodeURI() : 解码某个编码的 URI。
  • decodeURIComponent() : 解码一个编码的 URI 组件。
  • encodeURI() : 把字符串编码为 URI。
  • encodeURIComponent() : 把字符串编码为 URI 组件。
  • escape(str) : 将字符串转为网址那种编码.被废弃,应该用encodeURI()和encodeURIComponent()来代替.
  • eval() : 计算 JavaScript 字符串，并把它作为脚本代码来执行。
  • getClass() : 返回一个 JavaObject 的 JavaClass。
  • isFinite() : 检查某个值是否为有穷大的数。
  • isNaN() : 检查某个值是否是数字。
  • Number() : 把对象的值转换为数字。
  • parseFloat() : 解析一个字符串并返回一个浮点数。
  • parseInt() : 解析一个字符串并返回一个整数。
  • String() : 把对象的值转换为字符串。
  • unescape() : 对由 escape() 编码的字符串进行解码。

Number对象

constructor 返回对创建此对象的 Number 函数的引用。
MAX_VALUE 可表示的最大的数。
MIN_VALUE 可表示的最小的数。
NaN 非数字值。
NEGATIVE_INFINITY 负无穷大，溢出时返回该值。
POSITIVE_INFINITY 正无穷大，溢出时返回该值。
prototype 使您有能力向对象添加属性和方法。
  • toString(radix) : 把数字转换为字符串，使用指定的基数(默认10,10进制)。
  • toLocaleString() : 把数字转换为字符串，使用本地数字格式顺序。
  • toFixed(num) : 把数字转换为字符串，结果的小数点后有指定位数的数字。num是小数位数,0~20. 会四舍五入.
  • toExponential(num) : 把对象的值转换为指数计数法。num是小数位数,0~20.
  • toPrecision(num) : 把数字格式化为指定的长度指数计数法。num是小数位数,1~21. 一般用于大整数.
  • valueOf : 返回一个 Number 对象的基本数字值。

字符串对象

  • str.length 返回长度
  • anchor() : 创建 HTML 锚。
  • big() : 用大号字体显示字符串。
  • blink() : 显示闪动字符串。
  • bold() : 使用粗体显示字符串。
  • charAt() : 返回在指定位置的字符。
  • charCodeAt() : 返回在指定的位置的字符的 Unicode 编码。
  • concat() : 连接字符串。
  • fixed() : 以打字机文本显示字符串。
  • fontcolor() : 使用指定的颜色来显示字符串。
  • fontsize() : 使用指定的尺寸来显示字符串。
  • fromCharCode() : 从字符编码创建一个字符串。
  • indexOf(str2[,start]) : 检索字符串。从start位开始(默认0)搜索str2,找到后返回首个匹配字母的索引,没找到返回-1.
  • italics() : 使用斜体显示字符串。
  • lastIndexOf() : 从后向前搜索字符串。
  • link() : 将字符串显示为链接。
  • localeCompare() : 用本地特定的顺序来比较两个字符串。
  • match() : 找到一个或多个正则表达式/子串的匹配。
  • replace(regexp/substr,replacement) : 替换与正则表达式匹配的子串。
  • search() : 检索与正则表达式相匹配的值。
  • slice() : 提取字符串的片断，并在新的字符串中返回被提取的部分。
  • small() : 使用小字号来显示字符串。
  • split(separator,max) : 把字符串分割为字符串数组。必须指明分隔符. max是最大分的次数,默认无穷.
  • strike() : 使用删除线来显示字符串。
  • sub() : 把字符串显示为下标。
  • substr(start[,len]) : 从起始索引号提取字符串中指定数目的字符。从start开始长度为len. 注意序号0开始,支持-1负数表示从后倒数起.len省略则返回到结尾.
  • substring(x,y) : 提取字符串中两个指定的索引号之间的字符。和python的语法类似,0开始[x,y)返回x+1到y的子串.
  • sup() : 把字符串显示为上标。
  • toLocaleLowerCase() : 把字符串转换为小写。
  • toLocaleUpperCase() : 把字符串转换为大写。
  • toLowerCase() : 把字符串转换为小写。
  • toUpperCase() : 把字符串转换为大写。
  • toString() : 返回字符串。
  • valueOf() : 返回某个字符串对象的原始值。
  • toSource() 代表对象的源代码。

数组

  • ary.length 返回数组的长度
  • concat(arrayX,arrayY,……) : 连接两个或更多的数组，并返回结果。
  • join([separator]) : 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。默认分隔符,
  • pop() : 删除并返回数组的最后一个元素
  • push(ele….) : 向数组的末尾添加一个或更多元素，并返回新的长度。
  • reverse() : 颠倒数组中元素的顺序。改变数组而非返回新数组
  • shift(ele….) : 删除并返回数组的第一个元素
  • slice(start,end) : 从某个已有的数组返回选定的元素, 分片.支持负数
  • sort() : 对数组的元素进行排序
  • splice(index,N,ele….) : 从数组中index开始(可以负数)删除N个元素,N=0则不删除只增加.ele是要添加的元素. 改变原来数组,返回删除的项目.ary.splice(0,ary.length);清空数组,和ary=[];一样
  • toSource() : 返回该对象的源代码。很多浏览器不支持.
  • toString() : 把数组转换为字符串，并返回结果。自动用,连接
  • toLocaleString() : 把数组转换为本地数组，并返回结果。
  • unshift(ele….) : 向数组的开头添加一个或更多元素，并返回新的长度。
  • valueOf() : 返回数组对象的原始值
  • ary.hasOwnProperty(key); 字典判断是否有键值.返回true/false
  • $.inArray("value", ary); 检查数组是否有值,返回所在位置(0起),没有则返回-1.

Math对象方法

E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
  • abs(x) : 返回数的绝对值。
  • acos(x) : 返回数的反余弦值。
  • asin(x) : 返回数的反正弦值。
  • atan(x) : 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
  • atan2(y,x) : 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
  • ceil(x) : 对数进行上舍入。
  • cos(x) : 返回数的余弦。
  • exp(x) : 返回 e 的指数。
  • floor(x) : 对数进行下舍入。
  • log(x) : 返回数的自然对数（底为e）。
  • max(x,y) : 返回 x 和 y 中的最高值。
  • min(x,y) : 返回 x 和 y 中的最低值。
  • pow(x,y) : 返回 x 的 y 次幂。
  • random() : 返回 0 ~ 1 之间的随机数。
  • round(x) : 把数四舍五入为最接近的整数。
  • sin(x) : 返回数的正弦。
  • sqrt(x) : 返回数的平方根。
  • tan(x) : 返回角的正切。
  • toSource() : 返回该对象的源代码。
  • valueOf() : 返回 Math 对象的原始值。

事件参考

onabort 图像加载被中断 onblur 元素失去焦点
onchange 用户改变域的内容 onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点 onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸
onselect 文本被选定 onsubmit 提交按钮被点击
onunload 用户退出页面 . .

JS常用浏览器对象方法

  • alert('Welcome!') : 弹出提示框
  • confirm(str);:弹出对话框,提示字符串str,返回true/false(确定/取消)
  • prompt(str1, str2);: 提问对话框,可输入值.str1是提示信息,str2是预设内容.按确定返回输入字符串,取消null.
  • console.log(command) 执行命令后将结果返回到控制台.控制台要另外在浏览器调用.

Screen对象

  • screen.availHeight : 返回显示屏幕的高度 (除 Windows 任务栏之外)。
  • screen.availWidth : 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
  • screen.bufferDepth : 设置或返回调色板的比特深度。
  • screen.colorDepth : 返回目标设备或缓冲器上的调色板的比特深度。
  • screen.deviceXDPI : 返回显示屏幕的每英寸水平点数。
  • screen.deviceYDPI : 返回显示屏幕的每英寸垂直点数。
  • screen.fontSmoothingEnabled : 返回用户是否在显示控制面板中启用了字体平滑。
  • screen.height : 返回显示屏幕的高度。
  • screen.logicalXDPI : 返回显示屏幕每英寸的水平方向的常规点数。
  • screen.logicalYDPI : 返回显示屏幕每英寸的垂直方向的常规点数。
  • screen.pixelDepth : 返回显示屏幕的颜色分辨率（比特每像素）。
  • screen.updateInterval : 设置或返回屏幕的刷新率。
  • screen.width : 返回显示器屏幕的宽度。

Location对象(Window对象的属性)

  • location.hash : 设置或返回从井号 (#) 开始的 URL（锚）。
  • location.host : 设置或返回主机名和当前 URL 的端口号。
  • location.hostname : 设置或返回当前 URL 的主机名。
  • location.href : 设置或返回完整的 URL。
  • location.pathname : 设置或返回当前 URL 的路径部分。
  • location.port : 设置或返回当前 URL 的端口号。
  • location.protocol : 设置或返回当前 URL 的协议。
  • location.search : 设置或返回从问号 (?) 开始的 URL（查询部分）。
  • location.assign(URL) : 加载新的文档。
  • location.reload([force]) : 重新加载当前文档,相当于刷新。force为true/false,是否强制刷新,默认false时若服务器网页没修改则从缓存加载
  • location.replace(newURL) : 用新的文档替换当前文档。不会产生新历史记录而是直接覆盖当前历史记录.

Window对象

  • window.frames[] : 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。
  • window.closed : 返回窗口是否已被关闭。
  • window.defaultStatus : 设置或返回窗口状态栏中的默认文本。
  • window.document : 对 Document 对象的只读引用。请参阅 Document 对象。
  • window.history : 对 History 对象的只读引用。请参数 History 对象。
  • window.innerheight : 返回窗口的文档显示区的高度。
  • window.innerwidth : 返回窗口的文档显示区的宽度。
  • window.length : 设置或返回窗口中的框架数量。
  • window.location : 用于窗口或框架的 Location 对象。请参阅 Location 对象。
  • window.name : 设置或返回窗口的名称。
  • window.Navigator : 对 Navigator 对象的只读引用。请参数 Navigator 对象。
  • window.opener : 返回对创建此窗口的窗口的引用。
  • window.outerheight : 返回窗口的外部高度。
  • window.outerwidth : 返回窗口的外部宽度。
  • window.pageXOffset : 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
  • window.pageYOffset : 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
  • window.parent : 返回父窗口。
  • window.Screen : 对 Screen 对象的只读引用。请参数 Screen 对象。
  • window.self : 返回对当前窗口的引用。等价于 Window 属性。
  • window.status : 设置窗口状态栏的文本。
  • window.top : 返回最顶层的先辈窗口。
  • window.window : window 属性等价于 self 属性，它包含了对窗口自身的引用。
  • window.screenLeft,window.screenTop,window.screenX,window.screenY : 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。
  • window.alert() : 显示带有一段消息和一个确认按钮的警告框。
  • window.blur() : 把键盘焦点从顶层窗口移开。
  • window.clearInterval() : 取消由 setInterval() 设置的 timeout。
  • window.clearTimeout() : 取消由 setTimeout() 方法设置的 timeout。
  • window.close() : 关闭浏览器窗口。这里window也可以是window.open打开后的返回值窗口变量.
  • window.confirm() : 显示带有一段消息以及确认按钮和取消按钮的对话框。
  • window.createPopup() : 创建一个 pop-up 窗口。
  • window.focus() : 把键盘焦点给予一个窗口。
  • window.moveBy() : 可相对窗口的当前坐标把它移动指定的像素。
  • window.moveTo() : 把窗口的左上角移动到一个指定的坐标。
  • [window.open(, <窗口名称>, <参数字符串>)](http://www.w3school.com.cn/jsref/met_win_open.asp) : 打开一个新的浏览器窗口或查找一个已命名的窗口。
  • window.print() : 打印当前窗口的内容。
  • window.prompt() : 显示可提示用户输入的对话框。
  • window.resizeBy() : 按照指定的像素调整窗口的大小。
  • window.resizeTo() : 把窗口的大小调整到指定的宽度和高度。
  • window.scrollBy() : 按照指定的像素值来滚动内容。
  • window.scrollTo() : 把内容滚动到指定的坐标。
  • window.setInterval() : 按照指定的周期（以毫秒计）来调用函数或计算表达式。
  • window.setTimeout() : 在指定的毫秒数后调用函数或计算表达式。
  • navigator.plugins[] : 返回对文档中所有嵌入式对象的引用。该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。
  • navigator.appCodeName : 返回浏览器的代码名。
  • navigator.appMinorVersion : 返回浏览器的次级版本。
  • navigator.appName : 返回浏览器的名称。
  • navigator.appVersion : 返回浏览器的平台和版本信息。
  • navigator.browserLanguage : 返回当前浏览器的语言。
  • navigator.cookieEnabled : 返回指明浏览器中是否启用 cookie 的布尔值。
  • navigator.cpuClass : 返回浏览器系统的 CPU 等级。
  • navigator.onLine : 返回指明系统是否处于脱机模式的布尔值。
  • navigator.platform : 返回运行浏览器的操作系统平台。
  • navigator.systemLanguage : 返回 OS 使用的默认语言。
  • navigator.userAgent : 返回由客户机发送服务器的 user-agent 头部的值。
  • navigator.userLanguage : 返回 OS 的自然语言设置。
  • navigator.javaEnabled() : 规定浏览器是否启用 Java。
  • navigator.taintEnabled() : 规定浏览器是否启用数据污点 (data tainting)。

History对象

  • history.length 返回浏览器历史列表中的 URL 数量。
  • history.back() 加载 history 列表中的前一个 URL。后退.
  • history.forward() 加载 history 列表中的下一个 URL。前进.
  • history.go(number|URL) 加载 history 列表中的某个具体页面。-1等于back.

Reference

  1. w3school-cn-javascript教程
  2. Codecademy-JS教程练习
  3. JavaScript面向对象精要(一), JavaScript面向对象精要(二)

◆ 本文地址: http://platinhom.github.io/2015/06/23/Javascript-basic/, 转载请注明 ◆
前一篇:　HTML基础篇
后一篇:　Python字符串相关

Contact: Hom / 已阅读()
Source 类别: Coding  标签: JS  Key