目录
回顾内容
1.弹性布局
a.开启弹性布局,display:flex
b.设置主轴和侧轴,flex-direction:row/column
c.设置主轴对齐方式,jusify-content:flex-start/flex-end/space-around/space-between
d.设置侧轴对齐方式,align-item:center/start/end
e.设置是否换行,flex-wrap:nowrap/wrap
2.网格布局
a.开启网络布局,display:grid
b.设置列数,grid-template-columns
c.设置行数,grid-tempate-rows
d.设置单元格间距,grid-gap
e.设置跨行,跨列,grid-row-start/grid-row-end/grid-column-start/grid-column-end
JavaScript
概述
它的出现的目的是为了解决用户的体验。
1995年,上网 >>拨号上网 >>表单提交 >>为了提交用户体验,就出现javascript这个语言,它在客户端提交数据之前先验证,然后验证通过后再提交。
好处:
1.提高了用户体验
2.减少服务器端的压力
发展
1.在1992年,Nombas公司发明一个叫 C-- 嵌入式的脚本语言。后来更名为ScriptEase。
2.在1995年,网景公司发明了一个liveScript脚本语言,由于1995年java这门语言非常火,而livescript这个脚本才出来,所以用的人不多。为了让这个语言有更多的人知道并使用,所以它和java语言进行合作,所以就叫做Javascript。
3.微软看到别的公司发明了脚本,它自己也开发一个脚本JScript
4.这样就导致三足鼎立的局面,这样就让开发者很痛苦。为了减少开发者的开发难度,出现了一个叫 ECMscript 的组织。这个组织进行了脚本规范。
浏览器
由于JavaScript这么脚本语言的运行环境就是浏览器,所以这里需要介绍一下它。
1.第一次浏览器大战在1994年,这个时候微软已经在它的操作系统中集成了IE浏览器,大家都做IE浏览器。
2.第二次浏览器大战是在2002年,发明了一个叫火狐的浏览器,它在开始支持这个规范。
3.后来又出现opera、google。
什么是Javascript
首先它是一门语言
而且它是一门脚本语言
而且它是一门弱类型的语言
它还是一门面向对象的语言
它的作用是为了提高用户的体验,对于安全性来说就不重要。
JavaScript 能干什么
1.可以进行数据校验
2.网页特效
3.数据交互
JavaScript需要的环境
1.有开发环境:操作系统、开发工具
2.有运行环境:浏览器
JavaScript初体验
我们来缩写一个非常简单的JavaScript代码,来感受一下。
说明:
1.JS程序需要有浏览器的支持
2.它需要放到网页中
3.JavaScript代码需要编写在script标签中
4.每一行后面用分号结束,从ES6(ECMScript 6规范)开始,分号可以省略
基本数据
JS书写方式
在JS中也有三种书写方式:
--- 行内JS、页面JS、外部JS
行内JS
我们在HTML标签上使用JS代码的方式叫做行内JS,它一般用于触发某种操作,例如点击事件。
页面JS
页面JS就是我们前面的第一个简单入门代码,它需要在页面中通过Script标签中书写代码。
对于页面JS,我们可以书写在head标签内,也可以写在body标签内,那么,我们以后在工作中,到底是哪里好?
推荐书写在</body>标签之前。
外部JS
外部的JS书写方式是:先创建一个目录来存放JS代码,然后创建一个文件,这个文件的后缀必须是 .js 然后在这个文件中书写JS相关代码。
注意:在这个文件中不要加script标签!!!!!!
1)创建外部JS文件
2)编写页面
在这个页面中,通过script标签中的src属性来指定外部的JS所在的路径。
对话框
在Javascript(后面我就统一叫JS这个简称)主要提供了三种对话框:警告框、确认框、输入框。
警告框
警告框是在JS中一般用于调试程序时所使用的,主要目的是为了输出调试结果,也可以用于警告信息。
使用alert来弹出警告框,它里面需要给警告的内容。
确认框
确认框一般用于我们在做删除操作时,为了避免用户误操作,我们通过在用户删除数据时,给他一个确认提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>确认框</title>
<style>
table {
width: 500px;
border-left: 1px solid #999999;
border-top: 1px solid #999999;
border-collapse: collapse;
}
th, td {
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td><a href="javascript:confirm('你确定要删除么?删除后不能恢复!')">删除</a></td>
</tr>
</table>
</body>
</html>
说明:在上面的JS代码中,我们对齐进行说明:
1. <a href="javascript:confirm('')"></a>在HTML中,a标签的作用有两个:一个作瞄点;另一个就是做链接跳转的。在这里 JavaScript:这个前缀,目的是让浏览器在解析时,不要使用默认的解析方式来解析a标签,而是采用JS的语法来解析这个a标签。
2.对于确认框,JS中提供的是confirm,这个确认框需要提供的确认信息。在弹出的确认框中有两个按键:一个是确定,一个是取消。当点击取消后不会做任何操作;当点击确定后才会执行相关的操作。其实这两个按钮返回的值就是一个布尔值:true和false
输入框
在与用户交互时,我们可以来接受用户的输入信息,此时就可以使用输入框。
我们可以使用JS提供的prompt这个方法来实现接受用户输入的值。
这个方法它有两个方法:第一个参数表示输入提示信息,第二个参数是默认值。
关键字
由于JS是一种面向对象的脚本语言,他是一种编程语言,因此它就在一些具有特殊意义的单词,这个单词就是关键字。而关键字的特点是:
1)是单词 2)所有大小写字母。
在JS中提供了以下关键字。
注意:我们后续定义变量时不能直接使用这些关键字来进行定义。
注释
在HTML中,它的注释是: <!-- 这是HTML的注释 -->
在CSS中,它的注释是:/* 这是CSS的注释 */
在Javascript中,它的注释有以下几种是:
变量
什么是变量
所谓变量,就是它的值会发生变化。即它的值不是固定不变的。
从内存结构上来看,它会在内存中开辟一片空间来存储这个值。而这个空间中的内容会根据程序的运行过程中来发生变化的。
变量的作用
之所以要使用变量,是为了更换的空中我们程序,也更好来维护我们的程序。
如何使用变量
要使用变量,我们就需要知道使用变量的语法。在JS中定义变量的语法如下:
var | let | const 变量名称 = 值
语法说明:
1.var : 它是一个关键字,这个关键字是在JS出来时就已经存在了。它有弊端:它的作用域会自动提升。在ES6中已经不推荐使用了。
2.let : 它是在ES6中规范定义新的关键字,用于声明一个变量
3.const : 它是在ES6规范中定义新的关键字,用于声明一个常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明变量</title>
</head>
<body>
<script>
// 声明一个名为 name 的变量
var name = '张三'
console.log(name)
name = '李四'
console.log(name)
// 使用 let 来声明一个变量名为 age
let age = 18
console.log(age)
age = 20
console.log(age)
age = '哈哈,我改了'
console.log(age)
// 使用 const 来声明一个常量 country
const country = '中国'
console.log(country);
// country = '美国' // 当声明了常量,它的值不能再改变
let gender
gender = '男'
console.log(gender)
</script>
</body>
</html>
说明:
在JS中,定义变量的语法为:let | const | var 变量名称 = 值,也可以先声明变量,然后再给这个变量赋值
let | const | var 变量名称
变量名称 = 值
变量的命名规范
在JS中定义变量是需要有规范:
1.变量名只能由字母、数字、下划线和$符合组成(规则)
2.数字不能开头(规则)
3.变量名不能使用关键字和保留字(规则)
4.变量名称如果是多个单词组成,第一个单词的首字母小写,后面单词的首字母大写。如果是常量,则所有字母大写,多个单词之间使用下划线连接(规范)
5.方法名称如果是一个单词都小写,如果是多个单词则第一个单词的首字母小写,后面单词的首字母大写(规范)
6.类名如果是一个单词则首字母大写,多个单词则每个单词首字母大写(规范)