全栈之路--JS基础

一. 什么是JS

JS是JavaScript缩写，有以下特点：
    （1）基于对象
    JS本身就有一些现成的对象可供程序员使用，例如：Array，Math，String。。。
    JS并不排除你可以自已按一定的规则创建对象

   （2）事件驱动

   （3）解释性
    每次运行JS代码时，得需要将原代码一行一行的解释执行
    相对编译型语言（例如：Java、C++）执行速度相对较慢

   （4）基于浏览器的动态交互网页技术
    如果JS嵌入到HTML中，可以不需要服务器支持，直接由浏览器解释执行

   （5）嵌入在HTML标签中
    JS必须嵌入到一个名叫的标签中，方可运行
脚本语言

二. JS中的三种类型

（1）基本类型：number，string，boolean
    number 包含正数，负数，小数
    string 由''或""定界
    boolean 由true或false，但js中的boolean也包含更多情况，例如：存在表示true，不存在表示false

        var num = 100;
        var str = "哈哈";
        var flag = false;
        window.alert(num);
        window.alert(str);
        window.alert(flag);

页面会依次弹出三个对话框显示这三个值。

（2）特殊类型：null，undefined
    null表示一个变量指向null
    undefined表示一个变量指向的值不确定

<script type="text/javascript"> //多个script快中的内容，可以互相访问 //alert(flag); //window.alert(str); var person = null; var card; if(card == undefined){ alert("card变量暂时没有值"); }else { alert(card); } script>

（3）复合类型：函数，对象，数组
    对象包含内置对象和自定义的对象

三. JS中有三种定义函数的方式

（1）正常方式：function mysum(num1,num2){return num1+num2;} 

function add(num1,num2){
            return num1 + num2;
        }
        window.alert("10+20=" + add(10,20));

（2）构造器方式：new Function("num1","num2","return num1+num2;")

var add = new Function("num1","num2","return num1+num2");
        window.alert("100+200=" + add(100,200));

（3）直接量或匿名或无名方式：var mysum = function(num1,num2){return num1+num2;}

var add = function(num1,num2){ return num1 + num2; } alert(add("100+200=" + 100,200));

四. JS中的四种对象

（1）内置对象 ：Date，Math，String，Array，...

（2）自定义对象：Person，Card，...

function Student(id,name,sal){
            //this指向s引用
            this.id = id;
            this.name = name;
            this.sal = sal;
        }
        var s = new Student(1,"波波",7000);
        document.write("编号:" + s.id + "
");
        document.write("姓名:" + s.name + "
");
        document.write("薪水:" + s.sal + "
");

（3）浏览器对象： window，document，status，location，history...

<script type="text/javascript"> /* var url = "test.html"; window.open(url);*/ //status /*var nowStr = new Date().toLocaleString(); window.status = nowStr;*/ //location /*var url = "test.html"; window.location.href = url;*/ //history,演示刷新 window.history.go(0); //0 -- 刷新 //1 -- 前进 //-1 -- 后退 script>

（4）ActiveX对象：ActiveXObject("Microsoft.XMLHTTP"),...
[传送门](http://blog.csdn.net/jingshuaizh/article/details/2461995)

五. 演示JS对象的属性，方法和事件的使用

（1）window.location.href

//跳转到test.html页面
var url = "test.html";
            window.location.href = url;

（2）form.submit()

<form action="/test.html" method="POST">
        <input type="button" value="提交到服务端" onclick="doSubmit()"/>
    form>
    <script type="text/javascript"> function doSubmit(){ //表单提交 document.forms[0].submit(); } script>

(3) inputElement.constructor = 函数

(4）document.createElement(“img”)

(5) imgElement.style.width/height