JS
一、javaScript 是什么？有什么作用？
HTML：写网页的 人的身体
CSS： 美化页面的 人的衣服
havaScript：行为 大脑灵魂
havaScript 是WEB上强大的脚本语言
脚本语言：
无法独自执行，必须嵌入到其他语言中结合使用
直接被浏览器解析执行
作用：控制页面特效展示
js可以对HTML元素进行校验
js可以对表单项进行校验
js可以控制css样式
二、havaScript的语言特征和及编程注意事项
1、特征
js无需编译，直接被浏览器解释并执行
js无法单独运行，必须嵌入到HTML代码中运行
js的执行过程由上到下一次执行
2、注意
js没有访问系统文件的权限
由于js无需编译，是由上到下一次执行的，所以在保证可读性的情况下，允许使用链式编程
js和java没有任何直接关系
三、havaScript的组成
1、ECMAScript（核心）：规定了js的语法和基本对象
2、DOM文档对象模型，吃力网页内容的方法和借口
标记型文档即HTML
3、BOM浏览器对象模型：与浏览器交互的方法和接口
四、havaScript的引入方式
1、内部脚本
在当前页面内部写script标签，script内部即可书写js代码
格式：<script type="text/javascript">js代码</script>
注：<scirpt>标签理论上可以书写在HTML文件的任意位置
2、外部引入
在HTML文档中，通过<script src=""></script>标签引入.js文件
格式：<script type="text/javascript" src="js 文件路径"></script>
注：外部引用时script标签内不能有script代码，即使写了也不会执行
五、scriot标签规范化的放置位置
开发规范规定，script标签的放置位置为：body结束标签前
优点：保证HTML展示内容优先加载，最后加载脚本，增强用户体验性
六、javaScript语法和规则
注释;
单行注释 //
多行注释 /* */
七、变量
变量：标示内存中的一块空间，用于储存数据，且数据是可变的
变量的声明： var 变量名; //变量赋予默认值，默认值为undefined
变量的声明和赋值 var 变量名=值; //变量赋予对应的值
在声明havaScript变量时 需要遵循以下命名规范
1、必须以字母或下划线开头，中间可以数字、字符或下划线、美元符号
2、变量名不能包含空格等字符
3、不能使用havaScript关键字或保留字作为变量名
4、havaScript严格区分大小写
八、基本数据类型
1、类似于java中的基本数据类型
string ： 字符串类型 " "和' ' 都是字符串
boolean：布尔类型 固定值为true 、false
number：数值类型、任意数字
null：空、一个占位符
undefined：未定义类型、该类型只有一个固定值，即undefined 表示变量声明却未定义具体的值
2、注：因为undefined是从null中派生出来的，所以indefined==null
3、js区别于java 是弱类型语言，变量的使用不必严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值
4、通过typeof运算符可以分辨变量值属于那种基本数据类型，对变量或值调用typeof运算符将返回下列值之一
undefined 变量时 Undefined；类型的
boolean 变量是Boolean类型的
number 变量是Number类型的
string 变量是String类型的
object 变量是Null类型，或者是同一种引用类型
九、引用数据类型
引用类型通常叫做类（class），但在javaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象
标准创建方式
var str = new String(); //和java相同
var str = new String; //独有的方式
十、运算符
javaScript运算符与java运算符基本一致，主要学习不同点
比较运算符
运算符 描述
== 等于（逻辑等。仅仅对比值）
=== 全等（对比值，并且对比类型，都相同为true）
！= 不等于
！== 不全等
> 大于
< 小于
>= 大于或等于
<= 小于或等于
逻辑运算符
运算符
描述
&& and
|| or
| not
注 javaScript逻辑运算符没有&
乐友官网布局:
<!DOCTYPE html>
<html>
<head>
<title>乐友官网</title>
<meta charset="utf-8" />
<style type="text/css">
/*清除所有样式*/
*{
margin:0;
padding:0;
}
.white{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: white;
}
.red{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 550px;
/*设置背景颜色*/
background-color: red;
}
.yellow{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 550px;
/*设置背景颜色*/
background-color: yellow;
}
.pink{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 550px;
/*设置背景颜色*/
background-color: pink;
}
.orange{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 550px;
/*设置背景颜色*/
background-color: orange;
}
.purple{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 550px;
/*设置背景颜色*/
background-color: purple;
}
.green{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: green;
}
.black{
/*设置宽度*/
width: 100%;
/*设置高度*/
height: 350px;
/*设置背景颜色*/
background-color: black;
}
</style>
</head>
<body>
<div class="white"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="orange"></div>
<div class="purple"></div>
<div class="green"></div>
<div class="black"></div>
</body>
</html>
