首页 > 代码库 > JS 基础
JS 基础
JS 全名叫 JavaScript，其实是两个单词组成的。但是它和 JAVA 没有什么直接关系？只是语法相似罢了。
JS 也是一种脚本语言，也需要解释器才能执行。它的解释器，是系统自带的，集成在浏览器上。也就是说，想看 JS 的运行效果，就得用浏览器来运行它。或者直接调 JS 解释器，这个有点难度，呵呵。大多数时候，是用 HTML 的 <script> 标签把 JS 代码插入到 HTML 中，放到浏览器中一起执行。JS 代码在浏览器中，一但出现就会立即执行。
也就是两个概念：
JS也是脚本语言，需要解释器，浏览器自带有。
JS 代码只要被加载，就会立即执行。
也就是说，JS 是由浏览器执行的，在看到这个代码的人的电脑上运行的。和 PHP 不一样，PHP 的解释器在服务器上，而JS 解释器却在用户那里。
JS 的用途，主要是制作一些在用户那边就可以完成的逻辑处理。比如常见的，我们希望用户提交表单之前，就知道哪里填错了。或者，我们希望用户进行某个操作以后，才显示指定的内容。这类程序，明显和 PHP 等等语言无关，在用户进行下一步操作前就该得到结果了。这种时候，就该用到 JS 了。
基于 JS 的这些特性，像 JS 这类语言，被称为：客户端脚本语言。除了 JS ，还有 VBS，也就是 Visual Basic Script。但是明显 JS 流行度更高，VBS 随着 ASP 的消失，也跟着消失得差不多了。
按语言学习惯例，我们先来写第一个 JS 程序。
<html> <head> <title></title> </head> <body> <script> alert("Hello World!"); </script> </body> </html>
下面是重点
Js是一门标准的oop语言，其自带的函数少的可怜，其语法和php没有什么太大的区别，作为oop意味着自带了很多类库，我们用好这些类库就行，面向对象是一种思维模式，各种类只是把各种针对性的功能都封装好了，以便于代码和思维的完全同步，所谓的对象是一个名词，可以理解为谁 某个事情 ，在代码中表达的时候就用一个准确的量来表达，这个东西做什么。
在js中 我们得知道有多少个对象，通常情况下网页是通过浏览器访问的，网页是一个html文件，所以js至少为我们提供两个对象，一个是网页本身、一个是浏览器。Js用常量把这两个东西给我们准备好了 windows浏览器窗口 document网页文件 我们试着打印它们看看
<script type="text/javascript">
alert(document);
</script>
这个量我们事先没有定义 是js准备好的 是一个常量我们不能重新赋值也不能用来做变量名
这是显示的结果 即对象html文件，由于这个类不是我们写的我们不知道它包含哪些方法和属性 但遗憾的是js没有一个完整的手册 查询起来很麻烦，下面把常用的属性和方法分享一下
在php自定义类的时候 我们知道属性是特殊的量它的里面装着值 而且一定和这个对象相关的东西 既然是一个量那我们就可以读出它的值 有必要还可以赋值，js里面 访问对象的属性使用的符号是点号 这点和php不同 我们下面试一试 看看document的属性 方法
<html>
<head><title>js</title></head>
<body>
<script type="text/javascript">
alert(document.title);
</script>
</body>
</html>
因为title为js所以显示为js
document.location 显示的是文档的url地址我的显示为http://localhost/js/01.html
属性也是一个量如果我们给这个量赋值对象会发生什么样的变化呢
<html>
<head><title>js</title></head>
<body>
<script type="text/javascript">
alert(document.title);
</script>
</body>
</html>
可以发现网址上的标题发生了变化 那如果给地址属性赋值呢 会发生页面的跳转 改变对象的属性对象也会产生相应的变化 不过这个类不是我们写的 所以实现的过程不得而知了，下面试试自带的方法，
write("string") 将字符串突出给当前文档.(字符串可以含有HTML标记)
writeln("string") 与write()类似,在结尾追加回车符,只在预定格式文本中生效.
clear() 清当前文档.
close() 关闭当前文档.
<script type="text/javascript"> document.write("测试"); </script>
往当前的文档写东西 理所当然就会显示在当前文档即该html文件中 如果我想把标题显示到文档中该怎么写
document.write(document.title);怎么描述呢 往文档里面写入文档的标题
document.title=”新标题” 给文档的标题设置为新标题
这就是面向对象 讲的不是怎么做而是做什么 若是描述为 取得标题 写入文档 这就是面向过程了。上面都是关于document的属性和方法
<script type="text/javascript">
alert(document.body);
</script>
返回的是 对象html body元素
为什么显示对象呢 我们在此回顾下htm，l html文档由各种标签组成 每个显示内容的标签都可以定义一些样式 如高度宽度颜色 意味着这个标签有“属性”，内容也是其属性之一 所以它也是一种对象还有其对应的方法，但遗憾的是某些浏览器不支持document.body 关于这些有自己属性的html对象 js中称之为DOM。
然后是事件，所谓的事件是指某个事情发生时做什么，或者某种情况发生的时候 例如鼠标点击时 表单提交时 关闭网页时 js已知的事件 有63个 事件 一定是 针对某个对象产生的 鼠标悬停哪里 没有对象就没有事件这些事情都有其指定的名字 即js事件列表 最常见的是鼠标点击时 比如一个连接点击时
<a href="http://www.mamicode.com/#" onclick="alert(‘ok‘)">test</a>把点击事件写在html标签里面然后在中间写js代码，当这个对象被点击时 执行js代码 如果写在<body>里面的话 你在网页随便的一个地方点击一下 就会弹出窗口 body里面写点内容 触发事件同时也是html标签的属性之一 用以在这个事情发生时执行这个js代码，如果不用html的属性呢，该怎么触发事件呢？那就意味着需要另外的一个对象 我们在此还是用document对象，触发事件的编写很特殊，对象.属性 = 方法 理解为把一个对象的方法赋值给对象的一个事件 方法 即：自定义函数
<script type="text/javascript"> function click(){ alert(‘ok‘); } document.onclick=click; </script>
当文件被点击时执行click方法，这里用的是click() 因为要赋值的是方法本身而不是方法的返回值
<body> <script type="text/javascript"> function click(){ alert(‘ok‘); } document.onclick=click; </script> 试试看 </body>
整个文档随便找个地方点击吧 都会弹出窗口当然其中自定义的函数中的代码可以自由发挥的比如点击时候跳转到哪里 但要注意这个对象是否有这个事件比如说<div>没有加载完成事件的 但<img>是存在的 加载图片的<input>有“焦点”类事件 比如我们按Tab键切换光标停在哪个<input>。。先到此为止吧 后续内容待更新。。