一、JavaScript的简单介绍

　　JavaScript是一种属于网络的脚本语言（简称JS）,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

　　JavaScript代码常存在于HTML文档中，被script标签所包裹。为了方便多个HTML使用同一份JavaScript代码，也可以将JavaScript代码写在js文件中，需要在HTML文档中使用，导入即可。

 <script>

     //JavaScript代码

     alert(123);

 </scpript>

 <script type="text/javascript">

     //JavaScript代码

     alert(123);

 </scpript>

代码存在于HTML文档中

使用HTML文档导入JavaScript代码

　　注：script标签可放在HTML文档的head标签内，但建议将其放置在body标签内部的最下方（这样写浏览器会先加载网页的内容，再加载其动态效果）。

二、JavaScript的基本数据类型

　　JavaScript的基本数据类型有数字(在JS中，数字不区分整型和浮点类型)、数组，字符串，布尔(只用两个值，true和false)。

　　在JavaScript中申明一个变量：

PI = 3.14      // 声明一个全局变量，赋值3.14， 数字类型

var a = 6;           // 声明一个局部变量a，为其赋值6，是数字类型

var b = [1,2,3,4]    // 数组

var c = "hell world"   //  字符串

var d = true   // 布尔类型

var e = {'k1':v1, 'k2':v2, 'k3':v3}    //字典

c = null   // 清空变量c

字符串类型的常用方法：

"string".length                           返回字符串长度

"  string ".trim()                           移除字符串的空白

"  string ".trimLeft()                     移除字符串左侧的空白

"  string ".trimRight)                    移除字符串右侧的空白

"string".charAt(n)                        返回字符串中的第n个字符

"string".concat(string2, string3, ...)               拼接

"string".indexOf(substring,start)         子序列起始位置

"string".lastIndexOf(substring,start)     子序列终止位置

"string".substring(from, to)              根据索引获取子序列

"string".slice(start, end)                切片

"string".toLowerCase()                    将字符串转为大写

"string".toUpperCase()                    将字符串抓为小写

"string".split(delimiter, limit)          以特定字符分割字符串

// 与正则表达式搭配使用

"string".search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)

"string".match(regexp)                    全局搜索，如果正则中有g表示找到"string".replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本；

                                     $'：位于匹配子串右侧的文本

                                     $$：直接量$符号

数组类型的常用方法：

obj.length          数组的大小

obj.push(ele)       尾部追加元素

obj.pop()           从尾部弹出元素

obj.unshift(ele)    头部插入元素

obj.shift()         头部移除元素

// 可用此句完成对数组的插入，删除，替换操作

obj.splice(start, deleteCount, value, ...)  从start位置开始，删除deleteCount个元素，插入value,...

obj.slice( )        切片

obj.reverse( )      反转

obj.join(sep)       将数组元素连接起来以构建一个字符串

obj.concat(val,..)  连接数组

obj.sort( )         对数组元素进行排序

四、JavaScript的选择和循环语句

　　与其他编程语言类型，JS也有三种程序执行流程，即顺序，选择，和循环。

 if (判断条件){

     // js代码

 }else if(判断条件){

     // js代码

 }else{

     // js代码

 }

 // 常用判断符号与逻辑符号

 &&    逻辑与

 ||    逻辑或

 >  <   大于  小于

 == !=   判断值

 === !==   判断值和类型

选择语句_1

 // x代指变量，case为x不动的取值情况，defult当上面的case都不满足执行defult，相当于else

 switch(x){

     case '1':

         var i = 1;

         break;

     case '2':

         var i = 2;

         break;

     case '3':

         var i = 3;

         break;

     defult:

         i = 0;

 }

选择语句_2

 1. 循环时循环的是索引

 a = [11,22,33];

 for (var item in a){

     console.log(a[item]);    //   在浏览器的console中打印a[item]的值，item是索引

 }

 a = {'k1':'v1', 'k2':'v2', 'k3':'v3'};

 for (var item in a){

     console.log(a[item]);

 }

 2. 常规for循环

 for (var i=0; i<10; i++){

     //js代码

 }

for循环

 var len = 10;

 var i = 0;

 while(i < len){

     console.log(i);  // 代指js代码

     i++;

 }

while循环

五、JavaScript的函数申明

　　与其他编程语言类型，JS也有函数，在JS中申明一个函数特别简单。

// 常规函数

function funcname(a, b, c) {

    var a = 0;  // JS代码块

}
// 匿名函数，匿名函数只有某一块代码使用，在声明时已经确定由谁来执行它

setIntervar(function(){

    console.log(123);   // js代码块

}, 5000)
// 自执行函数，函数声明完后立即执行并且不会被其他代码调用

(function(arg){

    console.log(arg);   //js代码块

})(1)

六、JS面向对象

　　在JavaScript中，面向对象其实是函数的一种变种，与函数的定义非常类似。

方式一：

// 定义一个类

function Foo(n){

    this.name = n;  // 属性

    // 方法

    this.sayHello = function(){

        console.log("hello,", name);

    }

}

//  实例化一个对象

var obj = new Foo('abc');

obj.name;   // 调用属性

obj.sayHello();  // 调用方法

方式二：

function Foo(n){

    this.name = n;

}

Foo.prototype = {

    'sayHello': function(){

        console.log("hello,", this.name);

    }

}

var obj = new Foo('abc');

obj.name;

obj.sayHello();

　　注：通常使用方式二来定义和使用一个对象。

七、JavaScript中常用的系统方法

1. 定时器，每隔特定的时间执行一次特定的任务，用途十分广泛。

var a = setInterval(function(){console.log('hello');}, 间隔时间);
clearInterval(a);     // 清除定时器

2. 超时器，设置一段时间，比如5秒钟，当时间超过5秒钟后执行某一任务。

var b = setTimeout(funciton(){console.log('hello')}, 5000);    //  设置超时器

clearTimeout(b);    // 清除超时器，比如当用户执行某一操作后，取消超时器使用它

3. 弹出提示框

alert('message')    // message代指要提示的信息

4. 弹出确认框

//  向用户弹出一个确认框，如果用户选择确认，v=true；否则，v=false。

var v = confirm('message')   // message为确认提示信息，比如真的要删除吗？

5. 刷新页面

location.reload();   // 执行此方法浏览器自动刷新当前页面，可以和定时器配合使用用以定时刷新页面

6. 页面跳转

location.href   // 获取当前页面的url

location.href = url;   // 从当前页面跳转到指定url，可与超时器配合使用，做网站的页面跳转

location.href = location.href;  //  与location.reload()效果相同，刷新当前页面

7. eval（使用eval，可将字符串转换成代码执行）

var s = '1+2';

var a = eval(s);

console.log(a);

8. 序列化

　　序列化试将一个对象转化成字符串，方便存储，打印等。在任何一门编程语言中都存在序列化。

　　而反序列化是将读取到的字符串转化为对象，方便程序使用。

　　在js中，序列化与反序列画的操作如下：

ls = [1,2,3,4];

s = JSON.stringify(ls);       //object  --->  string

console.log(s);

new_ls = JSON.parse(s)           //string  --->  object

console.log(new_ls);

9. 字符串的编码与解码

　　为了能够在所有计算机上识别出字符串，在传输过程中要对字符串编码，传输完成后要对字符串解码。

escape(str)      // 对字符串编码

unescape(str)  // 对字符串解码

encodeURI()   // 对URI编码

decodeURI()  // 对URI解码与encodeURI() 对应

encodeURIComponent()  // 对URI编码

decodeURIComponent()  // 对URI解码与encodeURIComponent() 对应

八、触发JavaScript的事件

　　当我们用鼠标点击浏览器界面中的一个按钮时就触发了一个事件(即点击事件)，类似的还有很多其他事件，比如当鼠标移动到某个标签上，光标选中某个输入框等，这些都是事件，那么就，接下来就介绍一下一些常用的事件。

标签绑定事件的方式：

对div标签绑定点击事件

方式一：

<div id="i1" onclick="funcname">点我</div>

方式二：
<div id="i1">点我</div>

tag = document.getElementById("i1");

tag.onclick = funciton () {console.log("div i1");};

方式三：
<div id="i2">点我</div>

tag = document.getElementById("i2");

tag.addEventListener("click", function () {

    console.log("div i2");

}, false);

　　注：使用方式二和方式三可做到事件与标签相分离，在测试代码时，可以使用方式一绑定标签与事件，在日常编程中建议使用方式二和方式三。

常用的事件有：

onclick             --- 鼠标点击执行js函数

onfocus             --- 光标选中执行js函数

onblur              --- 光标移走执行js函数

onmouseover         --- 鼠标移到某个标签执行js函数

onmouseout          --- 鼠标从某个标签移走执行js函数　　

八、使用JavaScript完成一些常用功能

1. HTML中的模态对话框

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c2{

             background-color: black;

             opacity: 0.4;

             z-index: 8;

             position: fixed;

             top: 0;

             right: 0;

             bottom: 0;

             left: 0;

         }

         .c3{

             background-color: white;

             z-index: 9;

             height: 200px;

             width: 500px;

             position: fixed;

             top: 25%;

             left: 50%;

             margin-left: -250px;

         }

         .hid{

             display: none;

         }

     </style>

 </head>

 <body style="margin: 0 auto;">

     <div>

         <table style="border: 1px solid red" border="1">

             <thead>

                 <tr>

                     <th>host</th>

                     <th>port</th>

                 </tr>

             </thead>

             <tbody>

                 <tr>

                     <td>1.1.1.1</td>

                     <td>1111</td>

                 </tr>

                 <tr>

                     <td>1.1.1.2</td>

                     <td>1112</td>

                 </tr>

                 <tr>

                     <td>1.1.1.3</td>

                     <td>1113</td>

                 </tr>

             </tbody>

         </table>

     </div>

     <div>

         <input type="button" value="添加" onclick="ShowModel();"/>

     </div>

     <!--遮罩层-->

     <div  id="i2"; class="c2 hid"></div>

     <!--对话框-->

     <div id="i3" class="c3 hid">

         <fieldset style="border: 1px solid red;">

             <legend>添加</legend>

             <div>

                 <label>host:</label>

                 <input type="text"/>

             </div>

             <div>

                 <label>port:</label>

                 <input type="text"/>

             </div>

             <p>

                 <input type="button" value="取消" onclick="HiddenModel();"/>

                 <input type="button" value="确定"/>

             </p>

         </fieldset>

     </div>

     <script>

         function ShowModel() {

             tag = document.getElementById('i2').classList.remove('hid');

             tag = document.getElementById('i3').classList.remove('hid');

         }

         function HiddenModel() {

             tag = document.getElementById('i2').classList.add('hid');

             tag = document.getElementById('i3').classList.add('hid');

         }

     </script>

 </body>

 </html>

2. HTML中的全选，反选，取消按钮

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div>

     <div>

         <input type="button" value="全选" onclick="checkedAll();"/>

         <input type="button" value="反选" onclick="reverseAll();"/>

         <input type="button" value="取消" onclick="cancelAll();"/>

     </div>

     <table style="border: 1px solid red;" border="1">

         <thead>

         <tr>

             <th>opotion</th>

             <th>host</th>

             <th>port</th>

         </tr>

         </thead>

         <tbody id="i3">

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.1</td>

             <td>1111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.2</td>

             <td>1112</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.3</td>

             <td>1113</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.4</td>

             <td>1114</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.4</td>

             <td>1114</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>1.1.1.5</td>

             <td>1115</td>

         </tr>

         </tbody>

     </table>

 </div>

 <script>

     function checkedAll() {

         var tags = document.getElementById("i3").children;

         for (var i in tags) {

             var checkbox = tags[i].firstElementChild.firstElementChild;

             checkbox.checked = true;

         }

     }

     function cancelAll() {

         var tags = document.getElementById("i3").children;

         for (var i in tags) {

             var checkbox = tags[i].firstElementChild.firstElementChild;

             checkbox.checked = false;

         }

     }

     function reverseAll() {

         var tags = document.getElementById("i3").children;

         for (var i in tags) {

             var checkbox = tags[i].firstElementChild.firstElementChild;

             if (checkbox.checked) {

                 checkbox.checked = false;

             }

             else {

                 checkbox.checked = true;

             }

         }

     }

 </script>

 </body>

 </html>

3. 类似于购物商城的左侧菜单栏

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .item {

             margin-bottom: 15px;

         }

         .menu {

             background-color: blueviolet;

             height: 30px;

             line-height: 30px;

             font-weight: bolder;

         }

         .hide {

             display: none;

         }

         .content{

             background-color: lightseagreen;

         }

     </style>

 </head>

 <body>

 <div style="height: 150px;"></div>

 <div style="width: 350px; border: 1px solid red;">

     <div class="item">

         <div id="i1" class="menu" onclick="ChangeMenu('i1');">菜单1</div>

         <div class="content">

             <div>内容1</div>

             <div>内容1</div>

             <div>内容1</div>

             <div>内容1</div>

         </div>

     </div>

     <div class='item'>

         <div id="i2" class="menu" onclick="ChangeMenu('i2');">菜单2</div>

         <div class="content hide">

             <div>内容2</div>

             <div>内容2</div>

             <div>内容2</div>

             <div>内容2</div>

         </div>

     </div>

     <div class='item'>

         <div id="i3" class="menu" onclick="ChangeMenu('i3');">菜单3</div>

         <div class="content hide">

             <div>内容3</div>

             <div>内容3</div>

             <div>内容3</div>

             <div>内容3</div>

         </div>

     </div>

     <div class='item'>

         <div id="i4" class="menu" onclick="ChangeMenu('i4');">菜单4</div>

         <div class="content hide">

             <div>内容4</div>

             <div>内容4</div>

             <div>内容4</div>

             <div>内容4</div>

         </div>

     </div>

 </div>

 <script>

     function ChangeMenu(id) {

         menu = document.getElementById(id);

         items = menu.parentElement.parentElement.children;

         for (var i=0; i<items.length; i++) {

             var current_item = items[i].children;

             current_item[1].classList.add('hide');

         }

         menu.nextElementSibling.classList.remove('hide');

     }

 </script>

 </body>

 </html>

4. 鼠标移到标签某行改变其样式，移走恢复

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <table border="1" width="300px">

     <tr><td>1</td><td>2</td><td>3</td></tr>

     <tr><td>1</td><td>2</td><td>3</td></tr>

     <tr><td>1</td><td>2</td><td>3</td></tr>

 </table>

 <script>

     var myTag = document.getElementsByTagName('tr');  // 找到标签

     for (var i=0, len=myTag.length; i<len; i++) {

         myTag[i].onmouseover = function () {

             this.style.backgroundColor = "red";   // 改变样式

         }

         myTag[i].onmouseout = function () {

             this.style.backgroundColor = "";     //恢复样式

     }

 </script>

 </body>

 </html>

5. 搜索框提示信息

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .search{

             margin: 0 auto;

             border: 1px solid red;

         }

     </style>

 </head>

 <body>

     <div style="width: 100%;">

         <input id="i1" class="search" type="text" name="keywords" onfocus="Focus();" onblur="Blur();" value="请输入关键字"/>

         <input type="button" value="搜索"/>

     </div>

     <script>

         function Focus() {

             tag = document.getElementById('i1');

             val = tag.value;

             console.log(val);

             if (val == "请输入关键字") {

                 tag.value = "";

             }

         }

         function Blur() {

             console.log(2);

             tag = document.getElementById('i1');

             val = tag.value;

             if (val == "") {

                 tag.value = "请输入关键字";

             }

         }

     </script>

 </body>

 </html>

最新文章

  1. Zabbix协议分析
  2. 可爱的Python_课后习题_CDay−2 完成核心功能
  3. java 使用 集合 制作学生管理系统
  4. oracle rman恢复数据库 方式恢复到异地数据库
  5. 初步认识ajax（个人整理）
  6. 我的wordpress插件总结
  7. backbone collection add 事件回调参数
  8. String.equals（）
  9. POJ3213(矩阵乘法)
  10. Windows平台配置Appium+Java环境
  11. [CQOI 2010]扑克牌
  12. letter combinations of a phone number(回溯)
  13. 给centos装图形界面 widowsx
  14. 指定so动态链接库连接器
  15. String字面量
  16. [luogu4201][bzoj1063]设计路线【树形DP】
  17. python多线程下载网页图片并保存至特定目录
  18. java如何调用另一个包里面的类
  19. 如何找出长时间未提交的事务session ID
  20. pyimage search研究

热门文章

  1. 【收藏】8段JQuery处理表单的代码片段，很实用
  2. springboot入门_模板
  3. 【记录】.net 通用log4net日志配置
  4. js中的回调函数
  5. Eventlog控件的使用
  6. yum源配置的三种方法
  7. Luogu P1877 [HAOI2012]音量调节
  8. java程序中执行HiveQL
  9. __proto__ 与 prototype
  10. 云摘录︱Word2Vec 作者Tomas Mikolov 的三篇代表作解析