初识JavaScript
- 浏览器历史:网景公司,相对于市面上比较成熟的浏览器,仅仅是用于浏览,并没有任何交互,急需一种脚本语言,用来解决form表单提交
- 布兰登·艾奇。 用了10天的时间开发出来了JavaScript,借鉴了c语言的函数和java的管理机制。
MOche——>LiveScript——>JavaScript - 什么叫做JavaScript
- 基于对象:js是一种基于对象的语言,这意味着他能运用自己已经创建好的对象,因此,许多功能可以来自脚本环境中的对象方法与脚本的相互作用。意思就是说:js提供了很多很多的方法供我们直接使用
- 事件驱动:JavaScript可以直接对用户或客户输入做出响应,无需经过web服务器,他对用户的响应以事件驱动的方式进行。意思就是说:浏览器与用户的交互
- 解释性:浏览器可以直接识别和解析js代码
java:搭建环境——>编译(一劳永逸)
JavaScript:代码一行一行的解释,解释一行展示一行
- JavaScript的组成
ECMAScript:ECMA国际指定的一种语言规范。 是Js的代码规范
DOM:文档对象模型(documrnt object model)
BOM:浏览器对象模型(brower object model)
js的引入方式
- 行内引入 :onclick点击 alert弹窗
< div ==onclick="alert('南沙基地欢迎你')"==></ div>
- 内部引入
< script>
js注释方式
单行注释:ctrl+?
多行注释:alt+shift+a / ctrl+shift+?
alert('哈哈哈HAHAHAH')
< /script>
- 外部引入:外部引入src为js的文件路径
- 如果采用外部引入方式,script标签内部不要写任何代码,不会执行
< script src="./demo.js"> </ script>
简单的js三部曲
①找到谁(需要操作的那个元素)
②添加事件(点击事件)
③干什么(点击之后要执行的代码)
- 如何找到这个id名为box的元素
document.getElementById(‘ID名’)
document文档 get获取 element元素 by通过 id - onclick单击
- function函数
- script标签可以放在任何位置
我们一般放在body结尾之前或者head结尾之前 - window.onload当文档和资源加载完毕之后调用
- 页面的代码顺序是从上往下进行加载,很多时候我们常常使用javascript代码对页面中的某一个模块进行操作。为了能够保证操作的模块或对象在js代码之前就加载了,我们不得不把js代码放在页面的底端。但是我们在设计页面的时候,为了把js代码放在一起,或者一个让页面更加简洁的位置,那就有可能出现代码中操作的对象未被加载的情况,那么我们该如何去解决呢?这时候window.onload就被有了存在的意义了。
window.onload = function () {
document.getElementById('box').onclick = function () {
alert('班长好帅')
}
}
变量
变量:可以改变的量,用来存储数据的容器
声明方式:在js中使用var来创建
- 先创建后赋值
var a;
a = 10;
- 创建的同时赋值
var a =10
- 同时创建多个变量
var a = 10, b = 20, c = 30;
- 变量连等
var a = b = c = 10
console.log(a,b,c);
// console.log() 打印
- 变量命名规则
1、见名知意,驼峰命名
2、变量名只能以字母_$开头
3、不能使用关键字和保留字
4、变量不能重复,后面会覆盖掉前面的
鼠标事件
- 点击事件:onclick
- 双击事件:ondblclick
- 鼠标移入:onmouseover(会产生冒泡) | onmouseenter
- 鼠标移出:onmouseout(会产生冒泡) | onmouseleave
- 鼠标移动:onmousemove
- 鼠标按下:onmousedown
- 鼠标抬起:onmouseup
- 鼠标右击:oncontextmenu
var box = document.getElementById('box')
//onclick
box.onclick = function () {
console.log('我被单击了')
}
//ondblclick
box.ondblclick = function () {
console.log('我被双击了')
}
//onmouseover
box.onmouseover = function(){
console.log('鼠标移入');
}
//onmouseenter
box.onmouseenter = function(){
console.log('鼠标移入');
}
//onmouseout
box.onmouseout = function(){
console.log('鼠标移出');
}
//onmouseleave
box.onmouseleave = function(){
console.log('鼠标移出');
}
//onmousemove
box.onmousemove = function(){
console.log('鼠标移动');
}
//onmousedown
box.onmousedown = function(){
console.log('鼠标按下');
}
//onmouseup
box.onmouseup = function(){
console.log('鼠标抬起');
}
//oncontextmenu
box.oncontextmenu = function(){
console.log('鼠标右击');
}
操作表单
- 操作表单
- 获取表单的内容 变量 = 元素.value
- 设置表单的内容 元素.value = 变量
//获取表单内容
var oInp = document.getElementById('inp')
var inpVal = oInp.value
console.log(inpVal);
//设置表单内容
oInp.value = '哈哈哈哈哈哈'
console.log(oInp.value);
/*
需求:获取文本域的内容
分析:找到文本域——>获取
*/
var oTex = document.getElementById('tex')
console.log(oTex.value);
/*
需求:获取下拉框的内容
分析:找到下拉框——>获取
*/
var oSele = document.getElementById('sele')
console.log(oSele.value);
<input type="text" id="inp" value="我是用户名admin">
<textarea id="tex" cols="30" rows="10">
哈哈哈哈哈哈哈哈哈哈哈哈哈
</textarea>
<select id="sele">
<option name="lB">李白</option>
<option name='cWJ' selected>蔡文姬</option>
<option name="cJSH">成吉思汗</option>
</select>
操作元素内容
需求:获取元素内容
分析:找到box1这个元素——>获取内容
- 操作元素内容
- 获取元素内容 变量 = 元素.innerHTML 变量 = 元素.innerText
- 设置元素内容 元素.innerHTML = 变量 元素.innerText = 变量
- innerHTML可以解析标签,innerText不可以解析标签
var oDiv1 = document.getElementById('box1')
var oDiv2 = document.getElementById('box2')
oDiv1.innerHTML = "< h1>哈哈哈哈哈哈< /h1>"
oDiv2.innerText = "< h1>呵呵呵呵呵呵< /h1>"
案例:模拟短信
< div id="box">< /div>
教师:< input type="text" id="inp">
< button id="btn">发送< /button>
< script>
/*
分析:和div、input、button有关
==1、点击button按钮
2、获取input框内容
3、把input框内容插入到div当中==
*/
//获取div
var oDiv = document.getElementById('box')
//获取input
var inp = document.getElementById('inp')
//获取button
var btn = document.getElementById('btn')
//1、给button添加点击事件
btn.onclick = function () {
//2、用一个变量去接收input框内容
var inpVal = inp.value
//3、先获取oDiv以前的内容
var oldDiv = oDiv.innerHTML
//4、把input框内容插入到div中 字符串拼接
oDiv.innerHTML = oldDiv + '教师:' + inpVal + '<br/>'
//5、清空input框内容
inp.value = ''
}
< /script>
操作HTML属性
- 获取HTML属性 变量 = 元素.属性名
- 设置HTML属性 元素.属性名 = 变量
- class比较特殊,获取和设置的时候要是用className
//获取图片HTML属性
var oImg = document.getElementById('img')
var oImgSrc = oImg.className
console.log(oImgSrc);
//设置图片HTML属性
oImg.src = './img/3.jpg'
oImg.className = 'shaha'
操作CSS属性
- 获取CSS属性 变量 = 元素.sytle.样式
- 设置CSS属性 元素.style.样式 = 变量
- 只能获取行内样式和在js中设置的属性,如果获取内部和外部样式会为空
//获取div元素
var oDiv = document.getElementById('box')
console.log(oDiv.style.height)
//设置
oDiv.style.width = '400px'
console.log(oDiv.style.width);
- cssText 设置css样式:元素.style.cssText = ‘样式’
//获取id名为box的这个元素
var oDiv = document.getElementById('box')
oDiv.style.cssText = 'width: 100px; height: 200px; background: pink;
数据类型
- 基本数据类型
- number(数字)
- string(字符串)
- boolean(布尔类型)
- null
- undefined
- 复杂(引用)数据类型
- object(对象)
- array(数组)
- function(函数)
- number类型:
- Number类型包含整型和浮点型(浮点数值必须包含一个小数点,且小数点后至少有一位)这两种
//整型
var num = 123
//浮点型
var num = 123.45
- typeof 检测数据类型 返回的就是数据类型
1、typeof(变量)
2、typeof 变量
console.log(typeof(num)); //number
console.log(typeof num); //number
- NaN not a Number 不是一个数字 任何两个NaN都是不相等的
var num1 = NaN
var num2 = NaN
if(num1 == num2){
console.log('我们两个是相等的');
}
- string类型:
- String类型:被单引号或双引号包围的字符都是String类型
var str1 = '广东'
var str2 = "广州"
console.log(typeof str1); //string
console.log(typeof str2); //string
var str3 = '123456'
console.log(typeof str3); //string
- .length属性 获取字符串的长度
var str4 = 'abcdefg'
console.log(str4.length); //7
- .charAt() 通过索引值来获取对应位置的字符 注意:索引是从0开始
console.log(str4.charAt(1)); //b
console.log(str4.charAt(4