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代码
格式:
注:
2、外部引入
在HTML文档中,通过标签引入.js文件
格式:
注:外部引用时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逻辑运算符没有&
乐友官网布局:
/*清除所有样式*/
*{
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;
}