前端第二次培训学习笔记

一、JavaScript

1. 引入方式：

方法一：在 中写JS属性

方法二：新创一个.js文件(e.g. abcd.js)，后在所需html页面用 引入。

2. 变量

变量定义：let 或 var
（尽量用let：let声明的变量拥有块级作用域。let声明的全局变量不是全局对象的属性。形如for (let x...)的循环在每次迭代时都为x创建新的绑定。用let重定义变量会抛出一个语法错误（SyntaxError）。）

变量类型：

布尔值(Boolean)：ture、false

数字(Number)：整数(5)、浮点数(2.5)

字符串(String)：文本("你好"、"Hello")

未定义值(undefined)：变量已经声明但是还未赋值

空值(null)

3.常量

常量定义：const

定义之后不会在改变

4.函数

函数定义：function

格式： function func(){ }

函数调用：onclick

格式：<button> </button>

5.Document

a.寻找对象

getElementById(...):以...为对象进行操作

getElementsByClassName(...)：以...为类名的对象的列表为对象进行操作

（ById前面是Element .t后面没有s. 而 ByClassName前面是Elements .t后面有s.）

b.获取特定内容

innerHTML：获取标签中内容

value：获取标签中的值

style：获取标签的style

c.使用方式

模板：x = document.a.b （让x等于a框里面的东西）或 document.a.b = x （让a框里面的东西变为x）

例如：

let number1 = document.getElementById(abc).value

let number2 = document.getElementsByClassName(cde).value

document.gerElementById(fgh).value = max

（不过这里获得的数字的值并不是一个数值类型，无法进行加减运算，只能拼接。比如假定number1 =10，number2 = 20，则x = number1 + number2 得x = 1020

要想将此值转为数值类型需要parseInt：

let number1 = parseInt(document.getElementById(abc).value)

let number2 = parseInt(document.getElementsByClassName(cde).value)

此时，如果假定number1 =10，number2 = 20，则x = number1 + number2 得x = 30）

6.警告框 alert

使用方法：

alert("想输入的文字")

alert(number)

如果又想有文字又想有变量可以这样：

var info = "想输入的文字" + number; alert(info)

警告框在head里面则是一打开网页则弹出，若在body里面则是运行到该处才弹出

7.console.log()

作用：进行分析调试
e.g.console.log(max)则会当运行到此处，在浏览器开发者控制台处看到此时max等于何值。

8.if / while …………

二、制作宝石游戏过程中习得

1.页面设置背景图片：

......

• style中
  1.设置图片不重复显示：background-repeat:no-repeat;
  2.设置图片位置固定：background-attachment:fixed;
  3.设置图片达到窗口100%比例：background-size:100% 100%;

2.bgm：

点击某个按钮，bgm响起：

<audio src="./Bgm.m4a" controls loop id="bgm"></audio>   
<script>
        function func1(){
            var bgm = document.getElementById("bgm")
            bgm.play()
        }
<script>

点击某个按钮，bgm暂停：

<audio src="./Bgm.m4a" controls loop id="bgm"></audio>   
<script>
        function func1(){
            var bgm = document.getElementById("bgm")
            bgm.pause()
        }
<script>

点击某个按钮，bgm重置：

<audio src="./Bgm.m4a" controls loop id="bgm"></audio>   
<script>
        function func1(){
            var bgm = document.getElementById("bgm")
            bgm.load()
        }
<script>

3.让文本框 / 按钮 居中：

<div style="text-align:center;vertical-align:middel"> 文本框/按钮 </div>

4.文本框中有提示字：

``

5.按钮鼠标悬停有提示字：

<button class="button" title="提示字">按钮上的字</button>

按钮上的字

6.电脑产生随机数

7.一个函数的变量在另一个函数里面使用？

先在第一个函数里面return 再在另外一个函数里面let ... = ...() （如果return x，y; 则只会return y 不会return x）

    function func1(){
        let max = parseInt(document.getElementById('inpu1').value);
        return max
        }

    function func2(){
        let max = func1()
        .......
        }

三、CSS进阶

1.元素显示模式

分类：元素显示模式分类

改变显示模式：display + block/inline/inline-block

2.CSS盒子模型

四个方向值的设置规则：只写一个值, 四个方向都是。 两个值: 上下, 左右。三个值: 上 左右 下。四个值: 上 右 下 左。

上(top)，下(bottom)，左(left)，右(right)

使用：margin-top，padding-bottom，border-right…………

3.伪元素、伪类

伪类：前缀[ : ]，特定状态时呈现不同样式

伪元素：前缀[ :: ]，特定部分呈现不同样式

当伪元素和伪类叠加使用时，伪元素必须在末尾。

4.定位、布局

a.定位：
1.静态定位：元素默认的定位方式
2.相对定位：相对于自己正常位置移动(原位置留空)
3.绝对定位：相对于最近的已定位元素移动(原位置被其他占据)
4.固定定位：相对于浏览器视口边缘移动
上(top)，下(bottom)，左(left)，右(right)

b.浮动:

• 用途：文字环绕照片
• 使用:
  left:图片浮动到左侧
  right：图片浮动到右侧
  none：图片不浮动
  inherit：图片继承父元素浮动

c.flex：
1.使用：display:flex (对父元素应用，子元素自动布局)
2.主轴：沿flex元素放置方向延伸的轴；交叉轴：垂直于主轴的轴。

个人理解不对之处，求大佬指教 (｡￫‿￩｡)

WwwwwwS