JavaScript学习

JavaScript初学者指南

最新推荐文章于 2024-07-17 06:59:56 发布

原创最新推荐文章于 2024-07-17 06:59:56 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript入门篇学习
- 能做什么
JavaScript进阶篇学习

1.JavaScript入门篇学习

能做什么

增强页面动态效果
实现页面与用户之间的实时，动态交互
使用之间
之间的是文本类型，javascript告诉浏览器里面的文本属于JavaScript语言
将HTML文件和JS代码分开，单独创建一个JavaScript文件，后缀为.js，将JS代码直接写在JS文件中
将JS文件嵌入到HTML文件中，使用 <script src="script.js"></script>
JS代码可以放在HTML文件中的任意位置，一般放在head或者body部分。常把

document.write("I love benben");  //直接向HTML输出流写内容，可以为字符串，变量名，输出多想内容，内容间使用+号连接，输出HTML标签，标签使用""括起来
var mystr = "hello";
document.write(mystr+"<br>"); //<br>为换行符
<intput type="button" value="点击" onclick="add2()"> //html代码

var 变量名，必须使用字母，写划线，美元符开始
if, else语句
函数格式： function 函数名（） { 函数代码 }，调用函数时直接写函数名
alert(字符串或变量）; 在弹出的小窗口中显示数据
消息对话框confirm,允许用户选则，confirm(str)//str为在对话框中要显示的文本，返回Boolean值
prompt弹出消息对话框; prompt(str1, str2); //str1为要显示在消息对话框中的文本不可修改，str2文本框中的内容，可以修改，点击确认按钮，文本框中的内容将作为函数返回值，点击取消按钮将返回NULL
open()方法可以查找一个已存在或者新建的窗口：window.open[URL], [窗口名称][参数字符串]，相同name的窗口只能创建一个
1. _top 框架网页中在上部窗口中显示目标网页
2. _blank 在新窗口中显示目标网页
3. _self 在当前窗口中显示目标网页

参数	值	说明
top	Number	窗口顶部离开屏幕顶部的像素值
left	Number	窗口左端离开屏幕左端的像素值
width	Number	宽度
height	Number	高度
menubar	yes，no	是否有菜单
toolbar	yes，no	窗口有没有工具条
scrollbars	yes，no	有没有滚动条
status	yes，no	窗口有没有状态栏

* window.close() //关闭本窗口
* <窗口对象>.close() //关闭指定窗口

<script type="text/javascript">
    var mywin = window.open('http://www.immoc.com');
    mywin.close();
</script>

元素节点
属性节点
文本节点
标签的id属性值是唯一的，通过id先找到标签页，然后进行操作
document.getElementById(“id”);
获取的元素是一个对象，如果想对元素进行操作，我们要通过它的属性和方法
Object.innerHTML; Object是获取的元素对象，通过document.getElementById(“ID”)获取的元素，
HTML DOM允许javaScript改变HTML元素的样式,Object.style.property = new style; //Object是获取的元素对象

backgroundColor 设置元素的背景颜色
height
width
color
font
fontFamily
fontSize

网页的显式和隐藏通过display设置。Object.style.display= vale； //none 隐藏， block显式
className属性设置或返回元素的class属性。object.className = className;

JavaScript进阶篇学习

+可以连接两个字符串
var myarr = new Array(); //定义数组
var myarr = new Array(8); //8为长度
数组长度 : myarr.length.

//二维数组
 var myarr = new Array();
 for (var i=0; i<2; i++) {
     myarr[i] = new Array();
}
//或者
var myarr = [[1, 1, 2,], [23, 54, 6]];
var myarray = [];

支持switch语句， if，else， &&， ||， ==， for， while， Do，while.
函数 funtion add(a, b);
事件是可以被js侦听到的行为

//事件
onclick // 单击
 onmouseover //鼠标经过
 onmouseout //鼠标移开
 onchange //文本框内容改变事件
 onselect //文本框内容被选中事件
 onfocus //光标聚集
 onblur //光标离开
 onload //网页导入
 onunload //关闭网页
 ```

* 事件会在页面加载完后立即发生，同时执行被调用的函数，
* 加载页面时触发onload事件，事件写在<body>标签内
* window.onunload
* JS中的所有事物都是对象 ，每个对象都有属性和方法
* 使用string对象的toUpperCase()方法来将文本转为大写
* Date可以存任意一个日期，var Udate = new Date();

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
//方法
get/setDate()
get/setYear()
get/setMonth()
get/setHours()
get/setMinutes()
get/setSecond()
get/setTime()   //一毫秒为单位
getFullYear()
getDay()

返回指定位置的字符串,stringObject.charAt(index)
返回字符串中首次首次出现的位置stringObject.indexOf(substring, startpos)
字符串分割 stringObject.split(separator, limit) //从separator指定地方分割， limit分割次数
stringObject.substring(starPos, stopPos), //如果stopPos比starPOS小，开始时会交换两个参数
stringObject.substr(startPos, length)
Math是一个固有的对象，Math.PI
向上取整Math.ceil(x);
向下取整Math.floor(x);
Math.round(x) ,四舍五入
随机数 Math.random(), 0~1

//数组方法
concat(array1, array2, ...) 连接多个数组，并返回结果
join（分隔符）把数组的所有元素放入一个字符串，元素通过指定字符串进行分隔
pop（）删除并返回数组的最后一个元素
push（）向数组末尾添加一个或多个元素，并返回新的长度
reverse（） 颠倒数组中元素的顺序
shift（） 删除并返回数组的第一个元素
slice（start, end）从某个已有的数组返回选定的元素
sort（）对数组的元素进行排序
splice（）删除元素冰箱数组添加新元素
toSource 返回该对象的源代码
toString（）把数组转化为字符串，并返回结果
toLocaleString（） 把数组转化为本地数组，并返回结果
unshift（） 向数组开头添加一个或多个元素，并返回新的长度
valueOf（） 返回数组对象的原始值

arrayObject.sort(方法函数）
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
window.history.[属性|方法]

属性	说明
length	返回浏览器历时列表中的URL数量
back（）	加载history列表中的前一个URL(相当于go(-1))
forward()	加载history列表中的下一个URL
go（）	加载history列表中的某个具体页面

* location用于获取或设置窗体的URL，并且可以用于解析URL。
* location.[属性|方法]
这里写图片描述

属性	说明
hash	设置或返回从#开始的URL
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
pathname	设置或返回当前URL的部分路径
port	设置或返回URL的端口号
protocol	设置或返回当前URL的协议
serach	设置或返回从？开始的URL
assign()	加载写的文档
replace()	用新的文档代替当前文档