目录
一.JavaScript基础语法
1.JS的引入方式
①内部引入
在 HTML 文档中，JavaScript 代码必须位于 <script> 与 </script> 标签之间：
<html>
<script>
JavaScript代码
</script>
</html>
<script>...</script>标签可以在HTML文档中出现多次，可以在<head>部分，也可以在<body>部分。
②外部引入
可以把JavaScript程序保存为一个单独的文件，JavaScript程序文件的扩展名是.js，然后在HTML文档中"包含"它：<script src="/js/myScript1.js"></script>或<scriptsrc="myScript1.js"></script>
script标签一般定义在head或body中，并且要么引入外部js，要么定义内部js，不要混搭使用
③行内引入
<开始标签 on+事件类型=“js代码”></结束标签>
行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件
2.变量
①命名规则
a、变量命名必须以字母、下划线”_”或者”$”为开头。其他字符可以是字母、_、美元符号或数字。
b、变量名中不允许使用空格和其他标点符号，首个字不能为数字。
c、变量名长度不能超过255个字符。
d、变量名区分大小写。(javascript是区分大小写的语言)
e、变量名必须放在同一行中
f、不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。
截止到目前为止JS描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束,或者用于执行特定的操作等。关键字也是语言保留的，不能用作标识符。
②变量的定义
a.const:
const定义的js变量是一个常量。不可以修改（相当于只读不可写入），而且必须初始化（给const一个初始值，不能为空）
b.var:
var 定义变量 如果没有初始化值会输出underfined，不会报错
c.定义变量：
在JavaScript中，定义变量时，不分类型，使用关键字 var ：
第一种：var x, y;
x=100; y="Hello world!";
第二种：var x=100, y="Hello world!";
3.基本数据类型
①数值(number)：JavaScript 只有一种数值类型，包括整数和小数。
②字符串(string)：例如 "911", 'Hello world'
③布尔值(boolean)：true 或 false。
④undefined：在 JavaScript 中，声明了但未赋值的变量，其值是 undefined
⑤NULL空对象指针类型：如果定了一个对象，初始化可以为null,因为null的基本类型是Null，在if语句中默认转化为false,在和数值计算默认为0
⑥Symbol
4.运算符
①算数：+ - * / % **（乘方） ++ --
②比较：> >= < <= == != ?
③逻辑：&& || !
④其他：typeof xx 返回 xx 的类型...
5.条件循环语句
①条件语句
a.三种if语句
if（隐式转换为布尔值）{}
if () {} else {}
if () {} else if() {}
b.switch开关语句
switch(){
case :
case :
case :
case :
case :
}
break作用是跳出switch语句块，break后面的语句块将不再执行;
但是如果没有break，仍然在不判断结果的情况下执行一个case的语句块，这叫穿越.
②循环语句
a.while语句
while(){ }
b.do while语句
是先执行语句块，再判断是否继续循环
c.for循环
for(){ }
初始定义变量，每次循环的开始先执行,执行一次；
条件语句先判断，条件语句计算完成后必须转换为布尔值，是true才进入语句块；
向条件外变化的表达式，是所有语句块运行完成后执行的。
6.数组（感觉与C语言的数组差不多）
数组是JS中的一个数据容器。它是引用类型之一。
它的作用非常简单，就是用来装多个数据,并且数组的长度可以动态的调整。
①数组创建方式
a.字面量：var 数组名 = [成员1, 成员2, 成员3, ...] ;
b.构造函数（类似于java）：var 数组名 = new Array(成员1, 成员2, 成员3, ...)；
②组成部分
a.索引(也叫下标) ,下标从0开始;
b.成员(数组元素): 成员没有任何限制,可以是任意类型的数据;可以是字符串 可以是数字 可以是布尔值 可以是 undefined 可以是null 还可以是数组;
③数组属性length
length表示数组的长度 它会跟着数组实时发生变化(动态监测数组元素的个数)
length属性可读可写 它也会影响数组的成员个数 但是我们一般不会主动修改该属性;
④数组函数
a.unshift 头增 数组名.unshift("value")
作用：头部增加 (可以增加多个)
参数:添加的成员,可以是多个;
返回值：数组的新长度
b.push 尾增 数组名.push("value")
作用：尾部增加 (可以增加多个)
参数:添加的成员,可以是多个;
返回值：数组的新长度
c.shift 头删 数组名.shift() 只删除第一个,()括号内为空;
作用：删除数组的头部第一项
参数:无;
返回值：被删除的那一项
d.pop 尾删 数组名.pop() 只删除最后一个,()括号内为空;
作用：删除数组最后一项;
参数:无;
返回值：被删除的那一项
e.concat 拼接,合并; 数组名.concat("value")
作用：合并
参数：任意个、任意类型
返回值：一个新的合并后的数组
特点：没有改变原来的数组
f.slice 截取 数组名.slice(start,end) 参数是下标; 包括开头,不包括结尾;
slice的本质是复制
作用：截取
参数：1.没有参数 截取全部
2.一个参数 从指定位置截取到最后(包括最后)
3.两个参数 从指定开始位置截取到指定的结束位置
a. 这两个参数都是下标
b. 开始位置(包含)
c. 结束位置(不包含)
d. 第二个参数要比第一个大;
4.参数可以是负数,负数是从后面开始,最后一个是-1;
特点：不改变原数组
g.splice 操作数组 数组名.splice(参数1,参数2,参数3)
作用：用于操作数组成员
参数：
参数1:操作开始位置; (从第几个索引号后开始, 可以看成直接从顺序的第几个后开始的)
参数2:删除的成员个数; (为0,是添加)
参数3:从第三个参数开始是添加的成员;
返回值：被删除的那些成员组成的数组特点：会改变原数组
h. indexOf 数组名.indexOf("数组元素")
作用： 查找
参数：被查找的成员;
返回值：下标(索引); 若有该成员返回该索引; 若没有就返回-1
i.join 数组名.join("连接符")
作用：转字符串
返回值：数组元素变成字符串类型,链接符相连;
参数： 拼接符号(可选)
数组名.join() 不写内容,默认是逗号, ;
数组名.join(''), '' 没有空格隔开, 数组直接相连;
数组名.join(' ') 空格隔开, 空格
数组名.join('*')
j.reverse 数组倒叙 数组名.reverse() 括号内不跟参数;
作用：将数组的成员倒序
返回值：倒叙的原数组
参数：无
特点：会改变原数组
k. sort 排序 数组名.sort(函数) 升序或降序
作用：将数组成员按照指定规则排序
返回值：排序后原数组
参数：规则函数; 不跟参数(//不跟参数,会先转为字符串,然后按照ascii码排序首字母排;)
特点：会改变原数组
7.函数
函数定义的形式：
function name(参数1, 参数2, ...) {
}
函数返回值：函数通常会计算出返回值，这个返回值在函数中用 return 语句返回给调用者。例如：
var x = myFunction(7, 8);
function myFunction(a, b) {
return a * b;
}
局部变量：在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量只能在函数内访问。
8.作用域
①作用域：就是代码名字（变量）在某个范围内起作用和效果；
目的：为了提高程序的可靠性，更重要的是减少命名冲突；
②js的作用域（es6之前）：全局作用域 局部作用域
a.全局作用域：整个script标签 或者是一个单独的js文件 var num=10；
b.局部作用域（函数作用域）：在函数内部就是作用域，这个代码的名字只在函数内部其效果和作用；
③变量：变量的作用域，根据作用域的不同我们变量分为全局变量和局部变量
a.全局变量：在全局作用域下的变量，全局有效，全局可以使用；
注意：如果在函数内部没有声明直接赋值的变量也叫全局变量；
b.局部变量：在局部作用域下的变量，局部变量只能在函数内使用；
注意：函数的形参也可以看作是全局变量；
c.从执行效率看全局变量和局部变量：
全局变量只有当浏览器关闭的时候才销毁，占内存资源较多
局部变量当程序执行完毕就会销毁，占内存较少；
9.预编译
①预编译的作用：
a、函数声明整体提升；
即写出一个函数声明，不管写在哪里，系统总会将其提升到逻辑最前面。
b、变量声明提升
②预编译准备
a、imply global 暗示全局变量
任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。
b、一切声明的全局变量，全是window的属性；
③预编译步骤
1、创建AO(Activation object)对象
2、找形参和变量声明，将变量声明的名（即变量和形参名）作为AO属性名，值为undefined；
3、将实参和形参统一；
4、在函数体里面找函数声明，值赋予函数体（注意此处的函数声明要区别于函数表达式）
二.本周学习内容
三.实践内容
1.两栏布局+等高
<!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>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.aside{
float: left;
background: #008c8c;
color: #fff;
width: 300px;
margin-right: 30px;
height: 10000px;
margin-bottom: -9990px;
}
.main{
overflow: hidden;
background: grey;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
</aside>
<div class="main">
</div>
</div>
</body>
</html>2.三栏布局+主区域代码靠前书写
<!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>
<style>
.container {
padding: 30px;
border: 3px solid;
position: relative;
}
.left {
width: 300px;
background: lightblue;
margin-right: 20px;
position: absolute;
left: 30px;
top: 30px;
}
.right {
width: 300px;
background: lightblue;
margin-left: 20px;
position: absolute;
top: 30px;
right: 30px;
}
.main{
margin: 0 300px;
border: 2px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
</div>
<aside class="left">
</aside>
<aside class="right">
</aside>
</div>
</body>
</html>3.后台页面布局
<!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>
<style>
body{
margin: 0;
}
h1{
margin: 0;
}
.app{
position: fixed;
width: 100%;
height: 100%;
}
.header{
height: 60px;
background: #000;
color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.container{
width: 100%;
height: 100%;
background: lightblue;
padding-top: 60px;
box-sizing: border-box;
}
.container .left{
float: left;
width: 300px;
background: rgb(119, 119, 119);
color: #fff;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
.container .main{
overflow: hidden;
height: 100%;
background: #fff;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>
<body>
<div class="app">
<header class="header">
<h1></h1>
</header>
<div class="container">
<aside class="left">
</aside>
<div class="main">
</div>
</div>
</div>
</body>
</html>4.svg太极图
<svg style="background:#ccc;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="#000" />
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" fill="#fff" />
<circle cx="250" cy="150" r="30" fill="#fff" />
<circle cx="250" cy="350" r="30" fill="#000" />
</svg>
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
