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<3name.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]);}/*0python1java2c3javascript*/

字典

d={k1: "v1", k2: "v2"}for(var key in d){    console.log(key,d[key]);}/*k1 v1k2 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.hreflocation.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>