系列文章目录
Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.
文章目录
前言
通过HTML和CSS的学习，可以制作一个基本的网页，以及相应的动态效果。但是相比较于CSS来制作动画的效果有限，更多的动态效果则是通过接下来学习的JavaScript来完成和解决的，JavaScript可以说是前端人员目前必须要学会的语言之一。
一、JavaScript是什么？
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
JavaScript的作用：
1.动态的效果，与用户交互
2.表单验证：必填项，提示语，pattern
Java和JavaScript的区别
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。
JavaScript
1.是一种客户端的脚本语言（当指令经过解释器的解释，呈现一定的结果的编程语言），是一种
解释性的语言（不用完全编译，部分正确就可以执行。）
与之相对的就是编辑性的语言
编译性语言（整个代码或者全部指令完全正确，且通过编译器的编译，才可以执行）
2.执行在客户端的
3.可以显示出一定的执行过程
遵循ECMAScript标准（核心语法，变量，数组，程序流程结构等）
JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 JavaScript 版本。
引入两个重要的对象模型
BOM浏览器对象模型，浏览器的交互
DOM文档对象模型，快速找到标签和标记
二、JavaScript 外部使用
关于JS的位置相对比较灵活，可以出现在HTML中的任何位置，但是会影响执行顺序。
一个页面中可以有多个script。
标签之间。
外部脚本
JS脚本可放置与外部文件中：
如外部文件：Script.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
JavaScript 文件的文件扩展名是 .js。
实例,用以下的语句来引入需要的script。
<script src="myScript.js"></script>
三、JavaScript 的基础用法
3.1 JS输出
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框；
- 使用 document.write() 写入 HTML 输出；
- 使用 innerHTML 写入 HTML 元素；
- 使用 console.log() 写入浏览器控制台。
3.2 JS注释
JavaScript 注释用于解释 JavaScript 代码，单行注释和多行注释与java 和 c++ 的注释方法类似，注释的作用在于：增加代码的可读性。
// 改变标题：
/*
下面的代码会改变
网页中
id = "my" 的标题
*/
document.getElementById("my").innerHTML = "页面";
3.3 JS变量
变量：是内存中的一块空间，存储的数据可以发生改变。
JS中的数据类型:
JS是弱类型的语言，一般是根据输入的值来判断数据的类型。
一条语句，多个变量，可以在一条语句中声明许多变量。
以 var 作为语句的开头，并以逗号分隔变量：
var Name = "SYT", LoveWatch = "NBA", data = 15000;
可以使用typeof()来查看数据的类型。
Number:数字 NAN
Var（变量）
String:字符串
Boolean:布尔 true false
Null:空
Undefined:未定义
3.4 JS运算符
3. 4 .1 赋值运算符
赋值运算符，就是进行赋值的操作，将数据赋给需要处理的变量的过程。
3. 4 .2 算数运算符
算数运算符，是用于计算的符号，将数据或者变量进行相应规则的操作。
3. 4 .3 比较运算符(关系运算符）
用于判断式子两边的变量或者等式，是否相等。
有"=",">","<"等进行判断的式子。
<!--
==
值相等 会进行数据类型的转化后，进行比较(和另一个进行比较)
true：1
number： 1 true 非1就是false
string: "1" true
===
完全相等 三个等于号 不会进行类型的转换，完全等于（会先去判断数据类型）
-->
3. 4 .4 逻辑运算符
逻辑运算符
-
&&（与）尽量不成立的放前面
-
||（或）尽量成立的放前面
-
!! (非) 用于自我判断
boolean： number:0是 false 非0 是true string:""是false 其他都是true undefined:false null:false
3.5 程序的流程结构
无论是哪一种语言，设计程序的流程结构总是相同的。
- 1、顺序结构
顺序结构表示程序中的各操作是按照它们出现的先后顺序执行的。
- 2、选择结构
选择结构表示程序的处理步骤出现了分支，它需要根据某一特定的条件选择其中的一个分支执行。选择结构有单选择、双选择和多选择三种形式。
对于一般的双分支。
If (满足条件){
满足则会进入该处进行判断
}else{不满足会进入该处进行判断}
多分支的情况，一般用switch语句进行判断。
switch(满足条件){
case 1: break;
…
default:
}
- 3、循环结构
循环结构表示程序反复执行某个或某些操作，直到某条件为假（或为真）时才可终止循环。循环结构的基本形式有两种：当型循环和直到型循环。
While {} //先判断，后执行，循环体有可能一次都不执行
Do{} while（条件） //先执行，后判断 至少执行一次
For （循环变量初始化，判断条件，循环变量的更新）{ } // 循环次数固定
Break 跳出本次
Continue 跳出本轮
3.6 案例 打印九九乘法表
九九乘法表是循环部分的经典案例之一，关键在于对于行和列的控制。外层的i对行进行控制，内层的j对列进行控制，根据观察得的，j的值总是等于i位于的行的位置。
而且将script语句嵌入基础语句中，若要打印一个表格的形式，则一定有三个部分：
- table(放在整个循环的外部）
- tr（因为要控制行数，则放在i循环的上部）
- td（是列的个数，要嵌套入j的循环体内）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
border: 1px solid red;
}
</style>
</head>
<body>
<script>
// <table>
document.write("<table >")
for(var i=1; i<=9;i++){
document.write("<tr>")
// <tr>
for(var j=1;j<=i;j++){
document.write("<td >"+i+"*"+j+"="+(i*j)+"</td>");
}
document.write("</tr>")
// document.write("<br />");
// </tr>
}
document.write("</table>")
// </table>
</script>
</body>
</html>
3.7 数组
数组是一种特殊的变量，它能够一次存放一个以上的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--数组
创建
属性
lenth 数据的个数
方法
1 toString() 把数组转换为数组值（逗号分隔）的字符串。
2 join()指定分隔符来指定字符串
3 sort()升序
添加数据 arr.push();
删除数据arr.pop()
特点：
数组长度是可变的
元素的类型也是可变的
-->
<script>
var arr=new Array();
var arr1=new Array(1,2,3);
var arr2=[];
var arr3=["apple","pear","banana"]
document.write(arr+"<br/>")
document.write(arr1+"<br/>")
document.write(arr2+"<br/>")
document.write(arr3+"<br/>")
// 遍历
for (var i=0;i<arr.length;i++){
document.write(arr[i])
}
// 方法二
// for(var i in arr)
</script>
</body>
</html>
3.8 JS几个常用的对象
3.8.1 Math（数学）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--Math
无需创建
方法 Math.random()随机数[0,1)
Math.round()四舍五入 取整数
Math.floor()向下取整
Math.ceil()向上取整
Math.pow(x, y) 的返回值是 x 的 y 次幂：
Math.sqrt(x) 返回 x 的平方根：
Math.PI; // 返回 3.141592653589793
-->
<script type="text/javascript">
document.write(Math.random()+"<br />")
document.write(Math.round(3.5)+"<br />")
document.write(Math.floor(3.2)+"<br />")
document.write(Math.ceil(3.1)+"<br />")
//随机产生一个1~10的数字
document.write(Math.random()*10+"<br />")
document.write(Math.ceil(Math.random()*10)+"<br />")
</script>
</body>
</html>
3.8.2 Date（日期）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var d= new Date;
document.write(d+"<br />")
document.write(d.toLocaleString()+"<br />")
// 年
document.write(d.getFullYear()+"<br />")
// 月
document.write(d.getMonth()+"<br />")
// 日
document.write(d.getDate()+"<br />")
// 星期
document.write(d.getDay()+"<br />")
document.write(d.getTime()+"<br />")
</script>
</body>
</html>
3.9 函数
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--函数
定义
1.不用写返回值的类型，形式参数列表也不用写类型,而且传入形参的个数可以和实际设定的
函数中的形参可以不相同。
2.函数中有一个内置参数，叫arguments（类似于一个数组u，接受到的参数）
可变长度的参数
在js中没有函数重载，当函数名一样就覆盖了
-->
<script>
// 方式一
var f=function(a ,b){
alert(a+b);
return 1;
}
// 方式二
function f2(){
var sum=0;
for(var v in arguments){
sum+=arguments[v];
}
return sum;
}
// 方法一定要调用
var r=f2(235,3,4)
// f2()
alert(r)
</script>
</body>
</html>
四、系统函数
一：parseInt()
本函数用来将一个字符串按照制定进制转换为整数。
parseInt(numString,[radix])
第二个参数表示使用的进制，使用10进制，也可能会有到8或者16进制。为了避免对“0”和“0x”开头的字符串解析错误，各种javascript编程规范都规定必须要明确给出第二个参数的值。
二：parseFloat()
本函数用来将一个字符串按照制定进制转换为小数。
parseFloat(num).toFixed(2)
toFixed(2) 保留两位小数
三：isNaN()
本函数可检查其参数是否是一个非数字值。
isNaN(x)
x为要检测的值，x为非数字值返回true，否则返回false。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<!--parseInt 对于小数来说，截取了小数部分
第一个字符开始，解析到不是数字就停止
如果第一个字符就不是数字，就返回NaN（Not a Number)
parseFloat
isNaN
-->
<script>
var num="123.123";
document.write(num+1);
document.write("<hr/>");
// 输出整数
document.write(parseInt(num)+"<br />");
// 保留两位小数
document.write(parseFloat(num).toFixed(2))
document.write("<hr/>");
// 保留两位小数（只能用数字字符型的）
var num2=123.12345;
document.write(num2.toFixed(2))
</script>
</body>
</html>
8263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
