javascript快速入门基础简述

js要学的有很多 这里只讲一些最为基础的

首先  它能干嘛?

1. 修饰网页
   • 生成HTML和CSS
   • 生成动态HTML内容
   • 生成一些特效
2. 提供用户交互接口
   • 生成用户交互组件
   • 验证用户输入
   • 自动填充表单
3. 能够读取本地或者远程数据的前端应用程序，
4. 通过Nodejs实现像JAVA,C#,C++一样的服务端程序
5. 实现分布式WEB程序，包括前端和服务端

JavaScript代码可以直接嵌入到网页的任何地方，不过我们通常把它们放到head中

或者放到一个单独的.js文件里，然后在HTML中通过<script src="..."></script>来引入这个文件

这样更利于维护代码，并且多个页面可以各自引用同一份.js文件 .  js的函数(调用到了同名函数)引用采用就近原则 

JavaScript严格区分大小写

js中的变量

首先js作为动态语言  它的变量无需预定类型 , var足矣

变量分为局部变量和全局变量

局部变量 :  在函数内声明的变量(var)  生命周期 在函数运行以后被删除。

全局变量:  在函数外声明的变量 , 或者没有用var声明(不管是否在函数内外)    生命周期 :在页面关闭后被删除。

变量的声明只能有一次，但赋值可以有多次。如果只声明变量，但是变量没有被赋值，此时变量的值为undefined。

函数

函数的定义

定义函数有两种方式：声明和表达式。

函数声明

function function_name(parameters) {
    ......
}

函数声明后不会马上执行，只有被调用的时候才会执行。

函数表达式

var f = function (parameters) {
    ......    
};
f(parameters);

将函数存储在变量中，之后可以通过变量名来调用，而不需要函数名称。

触发函数的事件

        onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发
onchange 当对象或选中区的内容改变时触发。  复选框
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onkeydown 当用户按下键盘任何按键时触发。
onkeypress 当用户按下字母数字键时触发。
onkeyup    当用户按下并释放键盘按键时触发
onmousedown 当用户用任何鼠标
按钮单击对象时触发。
function test(event){
//event.button=1 左键
//event.button=m键 4
//event.button=2 右键
}
<input type="button" value="点击" οnmοusedοwn="test(event)" />
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发
onreset  当用户重置表单时触发
onsubmit 当表单将要被提交时触发。
onload   在浏览器完成对象的装载后立即触发。
onunload  在浏览器完成对象的卸载后立即触发。  

查找 HTML 元素

通过 id 找到 HTML 元素 
document.getElementById("...");
返回某一个元素对象,默认id是唯一的
通过name找到 HTML 元素
document.getElementsByName("...");
返回一个集合
通过标签名找到 HTML 元素
document.getElementsByTagName("...");
返回一个集合
通过class找到 HTML 元素
document.getElementsByClassName("...");
返回一个集合

找到元素之后干什么     
1.改变元素中的内容
利用innerHTML 或者 value来改变元素中显示的内容
2.改变元素的属性
document.getElementById("image").src="2.jpg";
<img id="image" src="1.jpg"></img>
3.改变元素的css样式
document.getElementById("p1").style.color="blue";
<p id="p1">今天天气很好.</p>
4.给元素添加事件处理(覆盖之前的事件)
document.getElementById("myBtn").οnclick=function(){
//...
};

异步处理

JavaScript语言是单线程的，一次只能完成一个任务。好处是实现简单，坏处是如果有任务耗时很长，其他的任务就必须得排队等待，直到该任务完成。导致的结果就是造成浏览器无响应，其他任务无法执行，体验极差。

因此，JavaScript语言分成两种任务执行模式：同步和异步。所谓同步，就是指程序的执行顺序与任务的排列顺序是一致的、同步的。所谓异步，是指每个任务有一个或多个回调函数，后一个任务无需等待前一个任务完成就可执行，当前一个任务完成后，执行回调函数。这样，程序的执行顺序与任务的排列顺序是不一致的、异步的。

1、回调函数

这是异步处理最常用的的方法。

两个同步执行的函数：

f1();
f2();

两个异步执行的函数：

function f1(callback){
    setTimeout(function () {
        // f1的任务代码
        callback();
    }, 1000);
}

f1(f2);

回调函数的优点是简单、容易理解。缺点是不利于阅读和维护、高耦合、流程混乱，每个任务只能指定一个回调函数。

2、事件监听

采用事件驱动模式，由事件来决定要进行的处理，而不是代码的顺序。

为f1绑定一个事件，当f1发生done事件，就执行f2：

f1.on('done', f2);

执行完成后，立即触发done事件，从而开始执行f2：

function f1(){
    setTimeout(function () {
        // f1的任务代码
        f1.trigger('done');
    }, 1000);
}

事件监听的优点是容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，低耦合。缺点是流程不够清晰。

表单验证

onreset  当用户重置表单时触发
onsubmit 当表单将要被提交时触发。
第一种方式:提交的时候验证
<form action="" οnsubmit="return jsCheck()">
<input type="text" name="name" /><br>
...
..
..
..
<input type="submit" value="提交" />
</form>


注意:οnsubmit="return jsCheck()"表示表单提交之前先调用jsCheck()这个函数进行验证,然后jsCheck()返回true表示通过验证,则表单可以继续提交,返回false表示验证失败,表单不能提交.


第二种方式:在填写输入框的时候或者输入框失去焦点的时候进行验证,至少和第一种方式验证的时间点不同,但是验证使用的函数都是一样的.
或者是onkeyup,用户边输入的时候边验证


注意:javascript代码也可以提交表单:
document.forms.myForm.submit();

 Window 对象

//打开新的页面 
window.open(url);


window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no");


高为100,宽为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏


简单的:window.open("http://www.baidu.com")即可



关闭当前窗口
window.colse(); 


window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）


window.location.href 属性返回当前页面的 URL

window.location.href = "url" 可以控制当前页面跳转


window.history 对象包含浏览器的历史

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(-3);


window的定时调用函数
setInterval() 
clearInterval()

延迟调用:
setTimeout() 方法
如果函数还未被执行，可以使用 clearTimeout() 方法来停止执行函数代码

 可查看 Javascript之BOM(window对象)详解

另外  贴一些实用的  :   Javascript实用技巧集锦   同时  也建议更好的利用搜索引擎来学习