JavaScript
JavaScript概述
发展历史
- 作用
JavaScript是一种可以嵌入在HTML中的脚本语言，由浏览器一边解释一边执行，JavaScript可以跨平台，跨浏览器驱动网页与用户交互。
- 起源
JavaScript是由网景公司的布兰登.艾奇 发明，命名为LiveScript，后来SUN公司更名为JavaScript。
- 发展
1995年网景公司的布兰登.艾奇设计了JavaScript，使其可以实现静态HTML页面上的一些动态效果。1997年，ECMA制定了ECMA标准，而JavaScript是这个标准的一种实现。2016年ECMAscript6发布，现在每一年ECMA都会发布一个ECMAscript的新版本。
组成
JavaScript由三部分组成
1.ECMAScript
描述了JavaScript的基本语法规则，包括数据类型，变量，运算符等
2.BOM
浏览器对象模型,通过BOM可以操作浏览器窗口，例如控制浏览器跳转，获取分辨率等
3.DOM
文档对象模型,通过DOM可以操作HTML文档结构样式或者内容，例如可以单击按钮，修改文字颜色等
第一个JavaScript程序
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button onclick="show()">显示</button>
<script>
function show(){
alert("Hello World");
}
</script>
</body>
</html>
代码结果
三种引入方式
- 行内方式
通过在开标签中的事件属性引用js的函数
代码如下
<body>
<input type="botton" value="按钮" onclick="alert('Hello World')"/>
</body>
- 内嵌方式
在head或body中，定义script标签，然后在script标签里面写js代码
代码如下
<script>
alert("这是js的内部引入");
</script>
- 外部方式
可以通过script标签引入.js文件，这种方式分离了HTML和JavaScript的代码，使代码更容易阅读和维护，而且缓存的JavaScript文件可加速页面加载
代码如下
<script type="text/javascript" src="文件路径"></script>
基本语法
语法规范
- 显示方式
1.使用 window.alert() 写入警告框
2.使用 document.write() 写入 HTML 输出
3.使用 innerHTML 写入 HTML 元素
4.使用 console.log() 写入浏览器控制台
- 语句构成
值、运算符、表达式、关键词和注释。
- 关键词举例
| 关键词 | 作用 |
|---|---|
| break | 终止 switch 或循环 |
| continue | 跳出循环并在顶端开始 |
| do … while | 执行语句块，并在条件为真时重复代码块 |
| for | 标记需被执行的语句块，只要条件为真 |
| function | 声明函数 |
| if … else | 标记需被执行的语句块，根据某个条件 |
| return | 退出函数 |
| switch | 标记需被执行的语句块，根据不同的情况 |
| var | 声明变量 |
- 注释
单行注释以 // 开头
<script>
//单行注释
</script>
多行注释以 /* 开头，以 */ 结尾
<script>
/*多行
注释*/
</script>
数据类型
- 数值型Number：比如整数、浮点数。数值型中有个特殊的值NaN（Not a Number），表示不是一个数字的值，例如用语句将字符串转换为整数时返回结果NaN
- 字符串型String：例如hello world字符串类型的字面量使用单引号或双引号括起来
- 布尔型Boolean：true和fasle
- 未定义型undefined：变量声明后未赋值则默认为undefined
- 空值Null：本质是对象，可以用于将变量置空等操作
- 数组Array：本质是对象，用于定义一组数据集合，每个数据都被称为数组元素，第一个元素下标为零，依次类推，使用方括号引用元素下标
- 对象Object：任何事物都可以看做对象，对象是属性与方法的集合及数据与数据的操作的集合
代码如下：
<script>
var x=1; //数值型
var str="hello"; //字符串型
var a=true; //布尔型
var b=null; //空值
var c=["hello","world"]; //数组
var b={stuname:"xaioming",age:20}; //对象
</script>
常量和变量
1.常量
常量就是程序运行期间保持不变的量，可以用const关键字声明常量。
代码举例：
<script>
const a=100; //必须在声明时赋值
</script>
2.变量声明与赋值
JavaScript变量是弱类型的，即变量无特定的类型。声明变量时不需要说明类型，变量保存的数据的类型决定了变量的类型。声明变量可以使用let或var，let声明变量的作用域是当前块或全局，var声明变量的作用域是当前函数或全局。
- let声明变量
<script>
let stuname,totalnumber; //声明变量，此时两个变量值为undefined
stuname="xiaoming"; //为变量1赋值
totalnumber=1; //为变量2赋值
</script>
- var声明变量
<script>
var stuname,totalnumber; //声明变量，此时两个变量值为undefined
stuname="xiaoming"; //为变量1赋值
totalnumber=1; //为变量2赋值
</script>
3.标识符
- 标示符用于命名变量、函数等。
- js将一些标识符预留出来，其具有固定含义，称为保留字，用户自己定义的标识符不可以用保留字。
- 识识符首字母必须是字母，下划线或美元符号，可包含字母，数字或美元符号，但是由于美元符号被jQuery占用，所以通常情况下标识符不使用美元符号。
运算符
1.算术运算符
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| ** | 乘法 |
| / | 除法 |
| % | 取模（余数） |
| ++ | 递加 |
| – | 递减 |
2.关系运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| </> | 小于/大于 |
| <=/>= | 小于等于/大于等于 |
| ? | 三元运算符 |
3.赋值运算符
| 运算符 | 描述 | 相当于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
4.逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
5.条件运算符
条件运算符包含一个条件和两个结果，语法格式如下：
条件？结果表达式1：结果表达式2
当条件为true时，表达式取值为“结果1”，否则为“结果2”.
代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button onclick="show()">显示</button>
<script>
function show(){
var a=1;b=2;
var max=(a>b)?a:b;
alert(max);
}
</script>
</body>
</html>
代码结果：
语句
选择语句
选择语句用于判断某个条件是否成立，以决定执行程序哪个部分。JavaScript中的选择语句包括if语句和switch语句
选择语句的条件部分可以是变量或者表达式，其他类型按照如下规律转换为布尔类型
- String：空字符串为false，所有非空字符串为true
- Number：0为false，一切非0数字为true
- null/undefined/NaN：都为false
- Object：都为true
1.if语句
- if
<script>
if(条件){
语句1；
语句2；
}
</script>
若if后的条件为真，则执行大括号中的语句，否则不执行。
- if…else
<script>
if(条件){
语句1；
语句2；
}
else{
条件3;
}
</script>
若if后的条件为真，则执行if大括号中的语句，否则执行else大括号中的语句。
- if…else if
<script>
if(条件1){
语句1；
语句2；
}
else if(条件2){
语句3;
}
else if(条件n){
语句n;
}
else{
语句;
}
</script>
若if后的条件为真，则执行if大括号中的语句，若地n个else if后的条件为真，则执行其大括号中的语句，否则执行else大括号中的语句。
2.switch语句
把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码
<script>
switch(条件) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
</script>
- break 关键词
如果 JavaScript 遇到 break 关键词，它会跳出 switch ，break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
循环语句
1.while语句
while语句判断循环条件，如果条件为true，就执行循环代码
<script>
while(循环条件){
循环语句；
}
</script>
2.do…while语句
do while语句判断循环条件，如果条件为true就执行循环语句，其和while语句的区别在于语句首次进入循环时，不判断条件就直接执行循环体
代码如下：
<script>
do{
循环语句；
}while(循环条件)
</script>
3.for语句
放语句通常用一个循环变量控制循环体的执行次数
代码如下：
<script>
for(var a=1;a<=10;a++){
循环语句;
}
</script>
数组、对象和函数
数组
1.数组声明
数组声明有两种方式，效果相同。
- 用数据列表创建数组，格式如下：
<script>
let a=[]; //创建空数组
let b=[1,2,3]; //创建一维数组
let c=[[0,1],[2,3]]; //创建二维数组
</script>
- 用Array（）创建数组，格式如下：
<script>
let a=new Array(); //创建空数组
let b=new Array(3); //创建长度为3的一维数组
let c=new Array([],[])]; //创建长度为2的二维数组
</script>
2.遍历数组
通常使用for语句遍历数组，以求一维数组的和为例
代码如下：
<script>
let a=new Array(1,2,3,4,5,6);
let s=0;
for(let i=0,len=arr.length;i<len;i++){
s=s+a[i];
}
</script>
3.常见操作数组的方法列举
- toString（）方法
- join（）方法
- push（）和pop（）方法
- shift（）和unshift（）方法
- sort（）方法
- reverse（）方法
- concat（）方法
- slice（）方法
- indexOf（）方法
- map（）方法
- reduce（）方法
- filter（）方法
- every（）方法
- some（）方法
- foreach（）方法
对象
1.创建对象
- 通过字面量创建对象
- 通过new Object（）创建对象
- 通过构造函数创建对象
- 通过原创创建对象
2.访问成员
- 访问单个成员
访问单个对象的属性可以采用原点形式（.）和下标（[]）形式，访问方法时只能使用原点形式
- 遍历成员
可以通过for… in遍历对象的成员，这时循环体内采用访问所有成员
- 添加和删除成员
JavaScript支持直接通过赋值动态的添加对象成员用delete关键字删除成员
- this关键字
函数在定义的时候指向是不确定的，只有在调用时才能确定this关键字出现在函数内部，根据不同情况，其指代含义不同，this具有以下特征:
1.普通函数中的this在函数被调用时指向全局window对象
2.对象方法中的this，在方法被调用时指向该对象
3.构造函数中的this在通过new关键字调用构造函数创建对象时指向该对象
函数
1.函数声明及调用
- 函数声明格式：
<script>
function(函数名){
//函数体
return返回值;
}
</script>
- 函数的调用
无返回值的函数可直接用函数名调用，有返回值的函数，其返回值可以直接输出或者赋值给其他变量。执行单return语句时，函数将停止执行，将返回值返回给主调函数。
2.函数参数
- arguments
实参传递给函数形参时，会被保存在名为arguments数组中，可以在函数内部以用这个数组。
- rest
JavaScript函数允许接收任意多个实参，多余的实参以数组的形式传递给rest，用“，…”分隔，格式如下：
fuction函数名（参数列表，...rest）{...}
- 参数默认值
函数参数可以在形参列表里用复制的方式设置默认值，格式如下：
<script>
function 函数名(a,b){
return a*b;
}
</script>
3.函数返回值
- 返回数组
代码举例：
<script>
function 函数名(){
let a='100',b='200';
return [a,b]; //返回数组
}
</script>
- 返回对象
代码举例：
<script>
function 函数名(){
let a='100',b='200';
return {a,b}; //返回对象
}
</script>
- 返回函数
代码举例：
<script>
function 函数名(){
let a='100',b='200';
function 函数名1(){
函数体
}
return 函数名1； //返回函数
}
</script>
作用域和预编译
作用域
变量作用域就是变量可以被引用的有效范围，JavaScript作用域分为全局作用域，局部作用域，块作用域
- 全局作用域：由整个JavaScript执行环境构成
- 局部作用域：也称为函数作用域，由函数声明{ }构成
- 块作用域：由{ }构成如if语句和for语句里面的{ }也属于块作用域
预编译
1.预编译的作用
- 函数声明整体提升
- 变量声明提升
2.预编译四步
- 创建OA对象
- 找形参和变量声明，将形参和变量名作为OA属性名，值为undefined
- 将实参和形参统一
- 在函数体里面找函数声明，值赋予函数体
圣杯布局和双飞翼布局
定义和作用
都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
1.圣杯布局定义
- header和footer各自占领屏幕所有宽度，高度固定
- 中间dontainer部分为左中右三栏式布局
- 三栏布局中左右两侧宽度固定，中间部分自动填充
- 通常通过左浮动来实现
2.双飞翼布局定义
-
在中间栏的div中嵌套一个div，内容写在嵌套的div里
-
对嵌套的div设置margin-left和margin-right
-
中间栏还是100%宽度，中间栏的内容通过margin的值显示在中间
相同点和不同点
- 相同点：
1.所实现的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
2.所运用技术相同，三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
- 不同点：
在解决中间部分被挡住的问题时，采取的解决办法不一样
1.圣杯布局:在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现
2.双飞翼布局：在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。
代码
圣杯布局代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
.container {
border: 1px solid yellow;
padding: 0 300px;
}
.container div {
float: left;
position: relative;
}
.main {
width: 100%;
height: 300px;
background: #FFFF00;
}
.left {
height: 300px;
width: 300px;
background: darkcyan;
margin-left: -100%;
left: -300px;
}
.right {
height: 300px;
width: 300px;
background: #0000FF;
margin-left: -300px;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
代码结果：
双飞翼布局代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
.col {
float: left;
}
#main {
width: 100%;
height: 400px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 400px;
margin-left: -100%;
background-color: #0000FF;
}
#right {
width: 190px;
height: 400px;
margin-left: -190px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap">
#main
</div>
</div>
<div id="left" class="col">
#left
</div>
<div id="right" class="col">
#right
</div>
</div>
</body>
</html>
代码结果：
总结
在本周的预习中，我逐步学习了js的作用以及基本语法，可以将js用于网页中，实现更多的网页功能。同时我也对于圣杯布局和双飞翼布局有了一些了解，可以通过这两种布局使网页页面更规范。
扫一扫
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
