JavaScript基础知识(学习笔记)

下面是我之前在W3School上学习JavaScript过程中做的的一些笔记,是关于JavaScript的基础知识。希望可以帮到你们。如果发现什么错误,请及时通知我。

  1. 在JavaScript中所有事物都是对象:字符串、数字、数组、日期等等
  2. 在JavaScript中,对象是拥有属性和方法的数据
  3. 属性是与对象相关的值,方法是能够在对象上执行的动作
  4. 函数是由事件驱动的或者当它被调用执行的可重复使用的代码块
  5. 在调用函数时,可以向其传递值,这些值被称为参数,这些参数可以在函数中使用
  6. 在使用return 语句时,函数会终止执行,并返回确定的值
  7. 在JavaScript函数内部声明的变量是局部变量,所以只能在函数内部访问它(该变量的作用域是局部的)
  8. 在函数外声明的变量是全局变量,网页上所以的脚本和函数都能访问它
  9. 全等(===),其值和类型都要相等
  10. For/in 语句循环遍历对象的属性,属性的概念,例如:person类中的name、age就是属性
  11. JavaScript可用来在数据被传送服务器前对HTML表单中的这些输入数据进行验证
  12. 通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML,JavaScript能够改变页面中的所有的HTML元素。JavaScript能够改变页面中所有的HTML属性。JavaScript能够改变页面中所有的CSS样式。JavaScript能够对页面中的所有事件作出反应
  13. 操作HTML元素,你必须首先先找到该元素,有三种方法:通过id找到HTML元素,通过标签名找到HTML元素,通过类名找到HTML元素
  14. HTML事件的例子:当用户点击鼠标时,当网页已加载时,当图像已加载时,当鼠标移动到元素上时,当输入字段被改变时,当提交HTML表单时,当用户触发按键时
  15. document.getElementById("one").onclick=function(){fun()};这个即使用HTML DOM来分配事件,向button元素分配onclick事件
  16. onload和onunload事件会在用户进入或离开页面时被触发。onload事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload和onunload事件可用于处理cookie
  17. onchange事件常结合对输入字段来使用。
  18. onmouseover和ommouseout事件可用于在用户的鼠标移至HTML元素时触发函数。
  19. onmousedown、onmouseup以及onclick构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发onmousedown事件,当释放鼠标按钮时,会触发onmouseup事件。最后,当完成鼠标点击时,会触发onclick事件
  20. onfocus事件:当指针移动到元素上方时,改变其背景色
  21. JavaScript中的所有事物都是对象:字符串、数值、数组、函数等等。此外,JavaScript允许自定义对象
  22. 创建对象的两种方法:1.定义并创建对象的实例 2.使用函数来定义对象,然后创建新的对象实例。
  23. JavaScript是面向对象的语言,但JavaScript不使用类。在JavaScript中,不会创建类,也不会通过类来创建对象
  24. IndexOf()方法来定位字符串中某一个指定的字符首次出现的位置。
  25. match()方法来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
  26. 如何替换字符串中的字符---replace()
    var str="Visit Microsoft!"
    document.write(str.replace(/Microsoft/,"W3School"))
  27. 返回当前的日期和时间,使用Date()方法。getTime()方法返回从1970年1月1日至今的毫秒数。SetFullYear()方法设置具体的日期。toUTCString()将当前的日期(根据UTC)转换为字符串。getDay()显示的是星期,可和数组来显示星期,而不仅仅是数字。
  28. 在网页上显示一个时钟(代码转自W3School)
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
  1. 可使用concat()方法来合并两个数组
  2. 用数组的元素组成字符串-----join() 即将数组的所有元素组成一个字符串。
  3. 可使用sort()方法从字面、数值上对数组进行排序
  4. round()方法:四舍五入Math.round()
  5. random()返回0到1之间的随机数
  6. Math.max(5,7) max()来返回两个给定的数中较大的数。min()类同
  7. RegExp对象用于规定在文本中检索的内容RegExp是正则表达式的缩写。当你检索某个文本时,可以使用一种模式来描述要检索的内容,RegExp就是这种模式。
  8. 定义RegExp:RegExp对象用于存储检索模式。通过new关键字来定义RegExp对象。RegExp对象有3个方法:test()、exec()以及compile()。test()方法检索字符串中的指定值,返回值是true或false。exec()方法检索字符串中的指定值,返回值是被找到的值,如果没有匹配,则返回null。compile()方法用于改变检索模式,也可以添加或删除第二个参数。(代码转自W3School)
<html>
<body>
<script type="text/javascript">
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
</script>
</body>
</html>
  1. 浏览器对象模型(BOM),由于现代浏览器已经(几乎)实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。
  2. 所有浏览器都支持window对象,它表示浏览器窗口。所有JavaScript全局对象,函数以及变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。其他 Window 方法
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺
  3. Window.screen对象包含有关用户屏幕的信息。window.screen对象在编写时可以不适用window这个前缀 screen.availWidth—可用的屏幕宽度 screen.availHeight—可用的屏幕高度。screen.availWidth属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。screen.availHeight属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏,即返回你的屏幕的可用高度。
  4. Window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。Window.location对象在编写的时候可不使用window这个前缀。Location.hostname返回web主机的域名。Location.pathname返回当前页面的路径和文件名,即返回URL的路径名。Location.port返回web主机的端口(80或443)。Location.protocol返回所使用的web协议。location.href属性返回当前页面的URL。Location.assign方法加载新的文档。
<!DOCTYPE html>
<html>
<head>
<script>
function fun(){
location.assign("这里写一个网址");
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="fun()">
</body>
</html>
  1. Window.history对象 包含浏览器的历史。history.back()—与在浏览器点击后退按钮相同。history.forward()---与在浏览器中点击按钮向前相同。history.back()方法加载历史列表中前一个URL,这与在浏览器中点击后退按钮时相同的。History.forward方法加载历史列表的下一个URL,这与浏览器中点击前进按钮时相同的。
  2. window.navigator对象包含有关访问者浏览器的信息。警告:来自navigator对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:navigator数据可被浏览器使用者更改。 浏览器无法报告晚于浏览器发布的新操作系统。
  3. 可以在JavaScript中创建三种消息框:警告框、确认框、提示框。
  4. 警告框语法:alert()
  5. 确认框 confirm() 确认框用于使用户可以验证或者接受某些信息,当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作 如果用户点击确认,那么返回值为true,如果用户点击取消,那么返回值为false。
  6. 提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,让后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值,如果用户点击取消,那么返回值为null。其语法是:prompt();
  7. 通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件。在JavaScript中使用计时事件,两个关键方法是:setTimeoue() 未来的某时执行代码 clearTimeout() 取消setTimeout()
  8. setTimeout()方法会返回某个值,语法:var t =setTimeout(“JavaScript语句”,毫秒);
    而取消setTimeout(),语法:clearTimeout(t)
  9. 无限循环计时器(代码转自W3School)
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
  1. 带有停止按钮的无穷循环中的计时事件(代码转自W3School)
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
</form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时,从 0 开始。点击“停止计时”按钮可以终止计时,并将计数重置为 0。</p>
</body>
</html>
  1. Cookie用来识别用户(代码转自W3School)
    创建一个欢迎cookie
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{ 
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{ 
c_start=c_start + c_name.length+1 
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+ //escape() 函数可对字符串进行编//码,这样就可以在所有的计算机上读取该字符串。
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
  1. 什么是cookie?cookie是储存于访问者的计算机中的变量,每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie,你可以是哟和JavaScript来创建和取回cookie的值。
    有关cookie的例子:1、名字cookie 当访问者首次访问页面时,访问者也许会填写他们或她们的名字,名字会储存于cookie中,当访问者再次访问该网站时,访问者会收到雷士“Welcome”的欢迎词。而名字则是从cookie中取回的。2.密码cookie 3.日期cookie
  2. JavaScript框架(库) JavaScript高级程序设计(特别是对浏览器的复杂处理),通常很困难也很耗时。为了应对这些调整,许多的JavaScript库应运而生。这些JavaScript库常称为JavaScript框架。比较受欢迎的是jQuery、prototype、MooTools。所有这些框架都提供针对对常见JavaScript任务的函数、包括动画、DOM操作以及ajax处理。
  3. jQuery是目前最受欢迎的JavaScript框架,它使用css选择器来访问和操作网页上的HTML(DOM对象)。jQuery同时提供companion UI(用户界面)和插件。
  4. Prototype是一种库,提供用于执行常见web任务的简单API。API是应用程序编程接口的缩写,它是包含属性和方法的库,用于操作HTML DOM。Prototype通过类和继承,实现了对JavaScript的增强。
  5. MooTools也是一个框架,提供了可使常见的JavaScript编程更为简单的API。MooTools也包含有一些轻量级的效果和动画函数。
  6. jQuery描述:主要的jQuery函数是$()函数。如果向该函数传递DOM对象,带有向其添加的jQuery功能。jQuery允许通过css选择器来选取元素。jQuery允许链接。链接是一种在同一对象上执行多个任务的便捷方法。
  7. prototype提供的函数可使HTML DOM编程更容易。与jQuery类似,Prototype也有自己的$()函数。$()函数接收HTML DOM元素的id值(或DOM元素),并会向DOM对象添加新的功能。与jQuery不同,Prototype没有用以取代window.onload()的ready()方法。相反,Prototype会向浏览器及HTML DOM添加扩展。Event.observe()接收三个参数:1.希望处理的html DOM或BOM(浏览器对象模型)对象 2.处理的事件 3.调用的函数
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容