JavaScript简单介绍

JS

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

js代码的存在形式

<!-- 方式一 导入外部文件-->
<script type"text/javascript" src="JS文件"></script>

<!-- 方式二 直接在所在文件中编写-->
<script type"text/javascript">
    Js代码内容
</script>

JS代码的位置

• HTML的head中
• HTML的body代码块底部（建议）
  由于我们知道HTML的代码是从上往下执行的，如果把js代码放在head中，如果代码出现了阻塞（比如加载某个插件的时候卡住了）那么后面的一大段的html代码无法执行了，这就造成了整个页面的无法加载。

变量

在Javascript中变量的声明有注意的地方，局部变量必须以var开头，如果没有使用var，则默认表示声明的是全局变量

var name="s"   //局部变量
age=18   //全局变量

基本类型

• 数字
• 字符串
• 数组（字典）
  浏览器的console界面
  

数字类型

var age=18;
var age=Number(18);  //声明一个数字类型的变量

//字符串转换成数字类型
Number('123')  
parseInt('123')   //一般用这个
console.log(age,typeof age);   //在console中输出括号中变量的值

//js中没有有float类型，需要进行转换
var age=18.9;
console.log(parseFloat(age));

//单行定义多个变量值
var a1=1,a2=1,a3=3;

字符串类型

var name="cmustard  "
//去除空格
name.trim() //"cmustard"

//索引取值
name.charAt(1) //"m"
name.charAt(2)  //"u"

//获取这个字符串的子序列    1<=x<3
name.substring(1,3)     
//获取索引
name.indexOf('m') //"mu"

//获取字符串长度
name.length   //10

boolean类型

>var s=true
>s
<true
>typeof s
<"boolean"

数组

var names=Array(11,12,14,15,16)
//或者
var names=[11,12,13,14,15,16]

obj.push(ele)
追加

names.push('push')
console.log(names)//[11, 12, 14, 15, 16, "push"]

obj.unshift(ele)
在数组的最前面插入

names.unshift('unshift')
//["unshift", 11, 12, 14, 15, 16, "push"]

obj.splice(index,0,’content’)
指定索引插入，0是固定的，插入就必须写这个0

names.splice(2,0,'content')
//["unshift", 11, "content", 12, 14, 15, 16, "push"]

obj.pop()
删除数组尾部的元素，并返回这个元素

ret=names.pop() //ret=push
//["unshift", 11, "content", 12, 14, 15, 16]

obj.shift()
删除数组头部的元素

names.shift()
//[11, "content", 12, 14, 15, 16]

obj.splice(index,count)
删除数组指定位置后的count个元素

names.splice(4,2)
//[11, "content", 12, 14]

obj.slice(start,end)
切片

ret=names.slice(0,3)
//[11, "content", 12]

newArray=obj1.concat(obj2)
将两个数组合并成一个新的数组

s=['a','b','c']
n=names.concat(s)
//[11, "content", 12, 14, "a", "b", "c"]

obj.reverse()
翻转这个数组

ret=names.reverse()
//[14, 12, "content", 11]

obj.join(‘-‘)
将数组转化成每个元素用-隔开的字符串

ret=names.join('-')
//"14-12-content-11"

obj.length
返回这个数组的长度

ret=names.length
//4

字典

var d={'k1':'v1','k2':'v2'}

序列化

f={"v1":"k1","v2":'k2'}
//序列化
m=JSON.stringify(f)//"{"v1":"k1","v2":"k2"}"


//反序列化
s=JSON.parse(m) //Object {v1: "k1", v2: "k2"}

循环语句

数组

names=["python", "java", "c", "javascript"]
//方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

//方式二
for(var index in names){
   console.log(index);
   console.log(names[index]);
}
/*
0
python
1
java
2
c
3
javascript
*/

字典

d={k1: "v1", k2: "v2"}
for(var key in d){
    console.log(key,d[key]);
}
/*
k1 v1
k2 v2
*/

注意，字典不能使用数组中的第一种 for循环格式

while

while(条件){
    // break;
    // continue;
}

条件语句

if(条件){
    expression;
}else if(条件){
     expression;
}else{
    expression;
}

var name = 'c';
var age = 1;

// switch,case语句
switch(name){
    case 'c':
        age = 123;
        break;
    case 'd':
        age = 456;
        break;
    default :
        age = 777;
}

异常处理

try{
     expression;
}catch(e) {
     expression;
}finally{
     expression;
}

函数

函数声明

function func(arg)
    return true;
}
//
f=func('a');   

匿名函数

var func = function(arg){
    return arg;
}

//调用
ret=func('a');

自执行函数

   (function(arg){
        console.log(arg);
    })('123')

面向对象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo('kk', 18);
var ret = obj.Func("sb");
console.log(ret);

DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

选择器

document.getElementById('id')
document.getElementsByName('name')  #对input，select，textarea标签
document.getElementsByClassName('class')
document.getElementsByTagName('tag')
document.getElementByTagName('tag')

内容

<div id="nid"> hello world!!!</div>

var obj = document.getElementById('nid')
obj.innerText                       # 只获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容



比较特殊的标签：input系列，textarea标签，select标签
需要使用 value属性操作用户输入和选择的值
obj.value='123'  #设置
obj.value       #获取

操作文本内容

<!DOCTYPE html>
<html>
<head>
    <title>操作文本内容</title>
</head>
<body>
    <div id="d1">
        <h1>SB</h1>
    </div>

    <h1>特殊的value</h1>
    <h3><input type="button" value="获取值" onclick="getValue()" /></h3>
    <input id="n2" type="text" />
    <select id="n3">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>
    <textarea id="n4"></textarea>



    <script type="text/javascript">
        var Text=document.getElementById('d1');
        console.log(Text.innerText);  //SB 不管嵌套多少标签只获取文本内容
        console.log(Text.innerHTML);   //<h1>SB</h1>h1> 

        function getValue(){
            // var obj=document.getElementById("n2");
            // var obj=document.getElementById("n3");
            var obj=document.getElementById("n4");
            alert(obj.value);

            //改变其值
            //obj.value='guangzhou';
        }
        /*
        内容修改获取
            innnerText   标签中间文本内容
            innerHTML   标签中间内容
            value       用户输入和选择的值，input，select，textarea

        */
    </script>
</body>
</html>

创建标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建标签和标签属性</title>
</head>
<body>
    <div id="container" class="c1" style="font-size:48px" sb="sb">abc</div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>

    <script type="text/javascript">
        //设置属性
        n=document.getElementById('container');
        console.log(n.getAttribute('sb'))
        n.setAttribute('mumu',123);
        console.log(n.innerHTML);
        n.style.fontSize="100px";
        n.style.color="red";

        function AddElement(){
            //创建标签并添加到containner
            //方式一：
            var tag="<input type='text'>";
            var nid=document.getElementById("container");
            //nid.innerHTML=tag;  //只能创建一个tag
            //升级版、
            container.insertAdjacentHTML("beforeBegin",tag);

            //创建标签方式二(常用的方式)
            var create_tag=document.createElement('a');
            create_tag.href="http://www.baidu.com";
            create_tag.innerText="百度";
            console.log(create_tag);
            //nid.innerHTML=create_tag;  //没有达到要求,只能创建一个超链接
            nid.appendChild(create_tag);  //可以创建多个，追加模式
            return false;  //事件优先级高先执行事件函数，如果return false 后面的就不会执行了
        }
    </script>
</body>
</html>

标签属性

var obj = document.getElementById('container');
如果是标签中包含的固定属性，可以直接用.访问
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";

如果不是标签中的固定属性，自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

提交表单

document.geElementById('form').submit()

小例子

<!DOCTYPE html>
<html>
<head>
    <title>表单提交</title>
</head>
<body>
    <form id="n1" action="http://www.sogou.com/web" method="get">
        <input type="text" name="query"/>
        <!-- <input type="submit" name="提交"> -->
        <input type="button" onclick="Submit()" value="提交">
    </form>

    <script type="text/javascript">
        function Submit(){
            var q=document.getElementsByName('query')[0];
            if(q.value.trim()){ //如果有内容，就提交
                document.getElementById('n1').submit();
                return True;
            }
            else{
                alert('请输入内容')
                return false
            }

        }
    </script>


</body>
</html>

事件

其他常用的函数

console.log()
alert()
confirm()

// URL和刷新
location.href
location.href = "url"  window.location.reload()

// 定时器
setInterval("alert()",2000);   #每隔多少时间执行,循环执行
clearInterval(obj)  #清除定时器
setTimeout("alert()",1);    #执行一次操作，以后不再执行
clearTimeout(obj)   #清除

实例

搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>搜索框</title>
</head>
<body>
    <!-- 当获取焦点的时候清空这个value -->
    <input type="text" id="search" value="请输入关键字" onfocus="Focus()"  onblur="Blur()" /> 

    <script type="text/javascript">
        /*
        事件：onclick=“函数”  鼠标点击事件
            onblur="'"  失去焦点的时候
            onfocus=""  获取焦点的时候
        */
        function Focus(){
            var nid=document.getElementById('search');
            var val=nid.value;
            if (val == '请输入关键字'){
                nid.value=null;
            }
        }

        function Blur(){
            var nid=document.getElementById('search');
            var val=nid.value;
            if(!val.trim()){  //空就是false
                nid.value="请输入关键字";
            }
        }

    </script>
</body>
</html>

跑马灯

<!DOCTYPE html>
<html>
<head>
    <title>跑马灯跑马灯  跑马灯  跑马灯跑马灯</title>
</head>
<body>
    <input type="button" value="停下来" onclick="Stop()" />

    <script type="text/javascript">
        function Stop(){
            //清除定时器
            clearInterval(obj)
        }

        function Func(){
            var text=document.title;
            var first=text.charAt(0);
            var subString=text.substring(1,text.length);
            var newTitle=subString+first;
            document.title=newTitle;
        }

        obj=setInterval("Func()",800);
        //setTimeout("Func()",1)  //几秒钟后执行一次操作，以后不再执行
    </script>
</body>
</html>