【JavaScript】JS的基础知识

JavaScript

一、什么是JavaScript？
二、JavaScript的用途
三、JS是如何运行的？
四、JS前置知识
- 4.1 JS书写格式
- - 4.1.1 行内格式
  - 4.1.2 内嵌格式
  - 4.1.3 外部格式
- 4.2 消息打印
- - 4.2.1 弹出输入框
  - 4.2.2 弹出选择框
  - 4.2.3 输出信息到控制台
- 4.3 JS单点调试的方法
五、JS基础语法
- 5.1 定义变量
- - 5.1.1 创建变量
  - 5.1.2 使用变量
- 5.2 JS的数据类型
- 5.3 定义方法
- 5.4 条件判断
- - 5.4.1 if
  - 5.4.2 三目运算符
  - 5.4.3 switch
- 5.5 循环语句
- - 5.5.1 while循环
  - 5.5.2 for循环
六、JS操作DOM
- 6.1 得到控件
- 6.2 操作控件
- - 6.2.1 获取元素值
  - 6.2.2 设置元素的值
七、jQuery框架学习
- 7.1 jQuery实现文章查询
- 7.2 jQuery实现聚合搜索

一、什么是JavaScript？

JavaScript（下文简称JS）是一种运行在客户端的脚本语言，不需要编译，运行过程中由JS解释器逐个进行解释并执行，JS解释器被称为JavaScript引擎，是浏览器的一部分。

二、JavaScript的用途

表单动态校验（验证数据合法性）
网页开发
网页游戏开发
服务器开发
桌面程序
APP
控制硬件-物联网

三、JS是如何运行的？

JS通过浏览器可以直接运行，JS通常是包含在HTML页面中的，双击HTML页面就可以直接运行。上面提到JS解释器可以将JS语句逐个解释并执行，所以JS能在浏览器中直接运行是因为浏览器中包含了渲染引擎（HTML渲染引擎和CSS渲染引擎）+JS执行引擎。

四、JS前置知识

js的代码既可以写在<head></head>中，也可以写在<body></body>中。通常外部的引用我们写在<head></head>中，具体的业务写在<body></body>中。

4.1 JS书写格式

4.1.1 行内格式

直接嵌在html元素内部

<input value="点击我" type="button" onclick="alert('你好')">

注意：JS中的引号的使用，双引号中再使用字符串常量需要使用单引号。

4.1.2 内嵌格式

写在script标签中

 <script>alert('haha')</script>

4.1.3 外部格式

写在单独的.js文件中。
先在文件目录下创建一个js的文件夹，再创建一个.js的文件。

使用外部格式分为两步：

1.先引入.js文件

<script src="js/base.js"></script>

2.再使用.js文件

<input value="点击我" type="button" onclick=myck2(3456)>;

4.2 消息打印

4.2.1 弹出输入框

<script>alert('haha')</script>

4.2.2 弹出选择框

<script>confirm("确认删除？")</script>

4.2.3 输出信息到控制台

<script>console.log("这是一条输出")</script>

在浏览器中选择F12进入到开发者工具，就可以在控制台看到我们输出的信息。

4.3 JS单点调试的方法

打开开发者工具（F12）；
点击源代码面板；
找到需要调试的JS文件，设置断点；
触发并执行JS。

当程序有错误时，我们可以用这个单点调试的方法来调试程序。

五、JS基础语法

5.1 定义变量

JS是弱类型语言，在定义变量时不用明确变量类型，只需要用var来表示这是一个变量即可。
每个语句最后带有一个英文的；结尾.js中可以省略，建议加上。
初始化的值如果是字符串，就要用单引号或双引号引起来。
初始化的值如果是数字，那么直接赋值即可。

5.1.1 创建变量

 var name='张三';var age=20;

5.1.2 使用变量

 var name='张三';var age=20;console.log(name);age=21;console.log(age);

5.2 JS的数据类型

number：数字，不区分整数和小数。
boolean：true真，false假的。
string：字符串类型。
undefined：只有唯一的值undefined，表示未定义的值。
null：只有唯一的值null，表示空值。
所有的数据类型都可以使用var来定义，js是弱类型的语言，虽然定义时不区分，但是综上JS还是由数据类型的概念的。
我们来看一个例子：

<div><input value="点击我" type="button" onclick=myalt()></div>function myalt(){var num1='2';var num2=3;alert(num1+num2)}

那么如果我们想实现整数的相加，有两种实现的方式：

1.直接将值写成整数

 <div><input value="点击我" type="button" onclick=myalt()></div>function myalt(){var num1=2;var num2=3;alert(num1+num2)}

但这种方式在用户自己输入值时，就不适用了，我们来自己实现一个计算器：

<h2>计算器</h2>数值1：<input type="text" id="ipt_num1"><br>数值2：<input type="text" id="ipt_num2"><br><input type="button" value="相加" onclick="mycalc()"><script>function mycalc(){//1.得到第一个输入框的值var num1=document.getElementById("ipt_num1").value;//2.得到第二个输入框的值var num2=document.getElementById("ipt_num2").value;//3.让输入框1的值 + 输入框2的值，并弹出结果alert("相加结果："+(num1+num2));</script>}

这时我们就需要用到另一种方式，使用parse+数据类型实现数据类型转换。

2.实现类型转换

<h2>计算器</h2>数值1：<input type="text" id="ipt_num1"><br>数值2：<input type="text" id="ipt_num2"><br><input type="button" value="相加" onclick="mycalc()"><script>function mycalc(){//1.得到第一个输入框的值var num1=document.getElementById("ipt_num1").value;//2.得到第二个输入框的值var num2=document.getElementById("ipt_num2").value;//3.让输入框1的值 + 输入框2的值，并弹出结果alert("相加结果："+(parseInt(num1)+parseInt(num2)));</script>}

5.3 定义方法

用function直接定义一个方法，定义完之后调用。

  function myMethod(){alert("执行了myMehod方法");}myMethod();

 function myMethod(name){alert(name+"执行了myMehod方法");}myMethod("张三");

注意：也可以在定义方法之前调用方法，因为调用方法这个行为是在dom树之后执行，不会出现调用方法时方法还没有生成的现象。

DOM树：

5.4 条件判断

5.4.1 if

 var flag=true;//1.if写法1if(flag){alert("真的");}//2.if写法2if(flag){alert("真的");}else{alert("假的");}//3.if写法3var day=4;if(day==1){alert("今天星期一");}else if(day==2){alert("今天星期二");}else if(day==4){alert("今天星期四");}else{alert("其他");}

JS中的==与Java中==的不太相同，JS中的==比较的是对象的值是否相等，而不是地址，JS中的===比较的是地址。

5.4.2 三目运算符

  // 三目表达式flag?alert("为真"):alert("为假");

5.4.3 switch

var day=3;switch(day){case 1:alert("今天是周一");break;case 2:alert("今天是周二");break;case 3:alert("今天是周三");break;}

5.5 循环语句

5.5.1 while循环

var num=1;while(num<10){console.log(num++);}

当num大于等于10时，跳出循环。

5.5.2 for循环

 for(var num=1;num<10;num++){console.log(num);}

六、JS操作DOM

6.1 得到控件

根据id得到HTML控件：

document.getElementById("元素id")

6.2 操作控件

6.2.1 获取元素值

document.getElementById("元素id").value;

6.2.2 设置元素的值

document.getElementById("元素id").value="需要设置的值";

具体实现实例：

 <h2>计算器</h2>数值1：<input type="text" id="ipt_num1"><br>数值2：<input type="text" id="ipt_num2"><br><input type="button" value="相加" onclick="myTest()"><script>function myTest(){//给num1 和 num2 赋一个默认的值//1.得到控件var iptNum1=document.getElementById("ipt_num1");var iptNum2=document.getElementById("ipt_num2");//2.操作控件iptNum1.value=0;iptNum2.value=0;}</script>

6.2.3 innerText/innerHTML
用来识别<div>的id：
innerHTML:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>计算器</h2>数值1：<input type="text" id="ipt_num1"><br>数值2：<input type="text" id="ipt_num2"><br><input type="button" value="相加" onclick="mycalc()"><p></p><div id="resultDiv"></div><script>function mycalc(){//1.得到第一个输入框的值var num1=document.getElementById("ipt_num1").value;//2.得到第二个输入框的值var num2=document.getElementById("ipt_num2").value;//3.让输入框1的值 + 输入框2的值，并弹出结果document.getElementById("resultDiv").innerHTML="相加的结果：<span style='color=red;font-size:30px;'>"+(parseInt(num1)+parseInt(num2))+"<span>";}  </script>
</body>
</html>

innerText:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>计算器</h2>数值1：<input type="text" id="ipt_num1"><br>数值2：<input type="text" id="ipt_num2"><br><input type="button" value="相加" onclick="mycalc()"><p></p><div id="resultDiv"></div><script>function mycalc(){//1.得到第一个输入框的值var num1=document.getElementById("ipt_num1").value;//2.得到第二个输入框的值var num2=document.getElementById("ipt_num2").value;//3.让输入框1的值 + 输入框2的值，并弹出结果document.getElementById("resultDiv").innerText="相加的结果："+(parseInt(num1)+parseInt(num2));   }  </script>
</body>
</html>

七、jQuery框架学习

jQuery是一个JavaScript库，极大简化了JavaScript编程，jQuery很容易学习。
它具有一定的兼容性。

7.1 jQuery实现文章查询

具体实现：使用jQuery实现一个文章的查询工作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的文章列表</title><script src="js/jquery-1.9.1.min.js"></script>
</head>
<body><input type="button" value="查询我的文章" onclick="setlist()"><hr><table id="mytable"><tr><td>文章编号</td><td>文章标题</td><td>阅读量</td></tr></table><script>function setlist(){jQuery("#ipt_num1").val("请输入一个数字");//1.根据当前登录用的id，去后端请求数据（当前登录用户的文章表）var ids=[1,2,3,4,5];var titles=["CSS","JS","HTML","JAVA","MYSQL"]var count=[100,200,300,400,500];//2.得到当前的控件并赋值var table=jQuery("#mytable");var appendHtml="";for(var index=0;index<ids.length;index++){//拼接一个 <tr>var trHtml="<tr>";trHtml+="<td>"+ids[index]+"</td>";trHtml+="<td><a href='#'>"+titles[index]+"</td>";trHtml+="<td>"+count[index]+"</td>";appendHtml+=(trHtml+"</tr>");}table.append(appendHtml);}</script>
</body>
</html>

客户点击查询我的文章列表，就可以根据用户的登录id，去后端查找用户的文章列表（后面实现）,可以动态的显示客户的文章列表：

7.2 jQuery实现聚合搜索

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聚合搜索</title><script src="js/jquery-1.9.1.min.js"></script>
</head>
<body><div><div style="height: 50px;margin-left: 40%;"><input value="必  应" type="button" onclick="switchSearch('https://cn.bing.com/?scope=web&FORM=ANNTH1')">  &nbsp;&nbsp;&nbsp;&nbsp;<input value="搜  狗" type="button" onclick="switchSearch('https://www.sogou.com/')">  &nbsp;&nbsp;&nbsp;&nbsp;<input value="360" type="button" onclick="switchSearch('https://www.so.com/')">  &nbsp;&nbsp;&nbsp;&nbsp;</div><div><iframe id="ifr" style="width: 100%;height: 600px;" src="https://cn.bing.com/?scope=web&FORM=ANNTH1"></iframe></div></div><script>function switchSearch(site){jQuery("#ifr").attr("src" ,site);}</script></body>
</html>