JavaScript初识
1.web的组成
- HTML(Hyper Text MarkUp language) 超文本标记语言 结构层
- CSS(CaseCade Style Sheets) 级联样式表 样式层
- JavaScript 行为层
2.JavaScript简介
js诞生之初是为了做表单验证(减少服务器的压力),随着互联网的发展,js也不仅仅只是做表单的验证,更多的是与网页的交互
- 时间 : 1995
- 开发者:布兰登·艾奇
- 仅仅只用了一周的时间 (借鉴了C语言的基本语法,Java的数据结构等等)
- JavaScript原名LiveScript,但是当时Java比较火,相当于蹭Java的热度,改名为JavaScript
3.JavaScript的概念
JavaScript是一们具有面向对象能力的解释型程序设计语言,具体一点javaScript是基于对象和事件驱动的并且具备客户端安全性的浏览器脚本语言。
4.JavaScript的组成
-
ECMAScript(核心JS):规范js的基本语法,变量,命名规范,数据类型,操作语句等内容
- ECMA:欧洲计算机制造厂商协会(各大浏览器厂商组成的),是一个非盈利性的组织。
-
DOM(Document Object Model) 文档对象模型 (操作标签结构)
-
BOM (Browser Object Model) 浏览器对象模型
5.JavaScript的引入方式(书写位置)
- 行内
<div style="width: 100px;height: 100px;background-color: red;" οnclick="alert('我开始学习JS了~~~')"></div>
- 内嵌(内部)
<script>
js代码段
</script>
- 外联 (外部)
注意:外部 script 双标签中不建议放内容,因为放了也不生效
<script src="路径地址"></script>
6.javaScript的三部曲
- 获取元素
document.getElementById('id值');
- 绑定事件
//元素.事件
- 做什么事情
//元素.事件 = function(){特定的功能}
// 点击当前id是box这个div弹出弹窗
document.getElementById("box").onclick = function(){
alert('你点我啊~~~');
}
7.注释
解释说明,浏览器不会解析。
- 单行注释 // CTRL + /
- 多行注释 /**/
8.window.onload
作用:保证页面当中所有的资源加载完毕再去执行当前的js (所有资源:结构,样式,图片,音频,视频等)
window.onload = function(){
js代码
}
9.js中其它的鼠标事件 *
- onclick 单击事件
- ondblclick 双击事件
- onmousedown 鼠标按下
- onmouseup 鼠标抬起
- onmousemove 鼠标移动
- oncontextmenu 鼠标右击
- onmouseover 鼠标移入
- onmouseout 鼠标移出
- onmouseenter 鼠标进入
- onmouseleave 鼠标离开
10.js中的调试方式 *
- alert(弹出内容) 弹窗
- console.log(输出内容); 控制台输出
11.移入-进入和移出-离开区别 *
// onmouseover
// 不仅将子元素的onmouseover事件触发,还会将父元素onmouseover再次触发
不仅将子元素的onmouseout事件触发,还会将父元素onmouseout再次触发
// document.getElementById("father").onmouseover = function(){
// console.log("father");
// }
// document.getElementById("son").onmouseover = function(){
// console.log("son");
// }
// onmouseenter
// 只会触发当前这个元素的onmouseenter事件不会将父元素onmouseenter触发
// 只会触发当前这个元素的onmouseleave事件不会将父元素onmouseleave触发
document.getElementById("father").onmouseenter = function(){
console.log("father");
}
document.getElementById("son").onmouseenter = function(){
console.log("son");
}
12.变量 *
1.变量的基础
变量在js中是用来存储值和代表值的
基本语法
var 变量名 = 值;
- 声明 var 变量名;
- 定义 变量名 = 值;
2.变量的定义方式
// 1.声明 + 定义
var a = 10;
console.log(a); //10
// 2.只声明不定义
var b;
console.log(b); //undefined 声明一个变量没有进行赋值,默认值是undefined ->未初始化,未赋值
// 3.连续声明 + 定义 ,->并列
var c = 100, //存储值
d = 200,
e = 300,
f = 400;
console.log(c,d,e,f); //代表值
// 4.连续声明不定义
var x,y,z,w;
console.log(x,y,z,w);
3.变量的命名规范
- 可以由数字,字母,下划线,$组成,但是不能以数字开头
- 不能使用关键字及保留字
- 关键字:js中内置的名字
- 保留字:未来可能成为关键字的
- 简明知义,符合驼峰命名法(约定俗成) ->第一个有意义的单词首字母小写,其余有意义单词的首字母都大写
- 不要重复命名,后边的会覆盖前边的
13.操作元素内容
原则:
1.给值就是设置,不给值就是获取
2.没有内容获取到的就是空字符串
3.从元素中获取到的都是字符串
表单元素
基本语法:
- 设置
- 元素.value = 值;
- 获取
- 元素.value;
普通闭合标签
innerText
- 设置
- 元素.innerText= 值;
- 获取
- 元素.innerText;
innerHTML
- 设置
- 元素.innerHTML= 值;
- 获取
- 元素.innerHTML;
14.操作元素属性
操作元素天生自带结构上的属性
原则:
给值就是设置,不给值就是获取
获取不到就是空字符串
基本语法
-
设置
- 元素.id = 值;
- 元素.className = 值;
- 元素.title = 值;
-
获取
- 元素.id;
- 元素.className;
- 元素.title;
- 原则:给值就是设置,不给值就是获取
1.点操作符和中括号操作符
点操作符
-
设置: 元素.属性 = 值;
-
获取: 元素.属性;
// 点操作符
box.innerHTML = "<h2>我是DIV</h2>";
box.className = "myBox";
console.log(box.className);
中括号操作符
-
设置: 元素[属性] = 值;
-
获取: 元素[属性];
box["innerHTML"] = "我是DIV~~~~~"; //ReferenceError: innerHTML is not defined
box["className"] = "youBox";
box["id"] = "box1";
2.操作元素样式
原则:用过style属性操作的都是元素的行内样式(设置和获取)
- 设置: 元素.style.样式属性 = 值;
- 获取: 元素.style.样式属性
var box =document.getElementById("box");
// 设置
box.style.width = "400px";
box.style.height = "400px";
// js中全部遵循驼峰命名法
box.style.fontSize = "22px";
box.style.backgroundColor = "blue";
// 多次设置当前这个属性 后边的覆盖前边的
box.style.width = "600px";
// 获取
// 行内有才能获取到,没有获取到的是空字符串
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.fontSize);
console.log(box.style.backgroundColor);
cssText
- 设置: 元素.style.cssText = “行内样式值”;
- cssText ->符合CSS写法
- 获取: 元素.style.cssTex;
- 将行内style属性对应的值整体获取到 (符合CSS写法)
var box = document.getElementById("box");
// 设置
// 会把style对应的值整体覆盖了
box.style.cssText = "width:200px;height:200px;background-color:red";
// box.style.cssText = "font-size:60px";
// box.style.cssText = "width:200px";
// 获取
console.log(box.style.cssText);