JavaScript是一种轻量级的脚本语言，主要用于Web页面交互，但也可用于非浏览器环境。它包括ECMAScript语法、DOM和BOM三个部分。ECMAScript定义了语言基础，DOM用于操作页面内容，BOM处理浏览器对象。JavaScript可进行事件处理、数据验证、动态效果等。引入方式有行间、内部和外部。变量声明使用var，数据类型包括基本类型和引用类型。JavaScript支持赋值、算术、关系、逻辑和三元运算。数组、循环、函数和事件处理是其重要概念，DOM操作涉及元素增删改查。BOM中的window对象提供了定时器、弹出框和页面跳转等功能。
JavaScript
JavaScript是什么
跟java一毛钱关系都没有！！！
JavaScript（简称“JS”） 是一种具有函数优先的轻量级(相对比较简单)，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言(代码写好之后,不需要编译, 可以直接在解释器上进行)而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
JavaScript就是一种轻量级的脚本语言！
总结 :
JS具有一定写作语法结构(与java基本语法很相似,比java结构要简单);
JS是一门脚本语言, 就是代码不需要编译, 可以直接在解释器上运行(JS代码可以直接在浏览器中运行)
JavaScript作用
可以进行事件处理、读写元素内容、改变元素样式、设置动态、动画效果、表单数据校验、校验浏览器的信息等。。。
JavaScript的组成部分
ECMAScript：js的基础语法，包含了，基本的语句结构、变量、运算符、数组、事件、对象等
才能知道js代码如何书写！
DOM(document object model)文档对象模型，它的存在，让我们可以灵活的操作页面中的内容！操作文档中的标签及内容，就是所谓的增删改查！
BOM(browser object model)浏览器对象模型，操作浏览器对象！
如何引入js
(1)、行间引入
弊端：js代码的复用性比较差！
<input type="button" value="点我，点我" onclick="alert('我被点击了')" >
(2)、内部引入
<script type="text/javascript">
//js代码
alert( "我在head头中的js代码");
</script>
(3)、外部引入
不要在引入外界js文件的script标签内部再书写任何的js代码了！因为不会生效！
<script type="text/javascript" src="js/myJs.js">
//请一定注意:引入外部js文件的- -对script标签中， 不能再写其他js代
//因为此中的js代码不生效
</script>
ECMAScript
浏览器页面 F12, 找到console窗口, 查看js中输出打印的内容
- 变量的声明
js是弱类型语言
所有变量的声明都使用var关键字！
语法格式：var 变量名 = 初值; var 变量名; - js的数据类型
基本数据类型（5种）
number 数值类型 : 整数, 浮点类型
string 字符串类型 : 可以使用’’ 或者 “”表示, 双引号中只能写单引号
boolean 布尔类型，表示真假情况，取值为true和false
undefined 未定义类型，一个变量没有给初值，那就是未定义类型
null 空类型
在js中undefined值实则就是从null演变过来的，所以undefined与null做判断时返回值为true
console.log(undefined==null);//true
console.log(undefined===null);//false
function 函数、方法类型
引用类型：object 对象类型
typeof(变量名) ——查看变量数据类型的函数
-
js中的基本语法
(1)、赋值、算数运算符 = + - * / % ++ - -
注意 : 在js中除法运算的结果该是多少就是多少！
(2)、关系运算符 > < >= <= == != === !==
== 值比较，忽略类型！
=== 全等， 值、类型都要一致才为true
(3)、逻辑运算符 && || ! 即：与或非
(4)、三元运算符
表达式1 ? 表达式2 : 表达式3;//同java中
(5)、语句
分支语句：if…else switch…case
闰年判断的案例：可以被400整除; 或者能被4整除但是不能被100整除 -
数组 :
（1) js中的数组, 可以当做集合进行使用, 长度可变, 数据类型没有限制
（2) 数组有索引 : 0开始, length-1结束
（3) 获取元素 : 数组名[索引] -
循环：for while forin
for while同java中
forin：
for(var index in array){
console.log(array[index]);
}
- 方法、函数
function 方法名(参数列表) {
方法体;
return 语句;
}
function method(a,b){
return a+b;
}
var c = method(10,20);
console.log(c)
事件
- 事件表示js在网页中的行为，比如登录、注册按钮的点击、表单的提交、表单的校验等都需要用到事件！
- 事件的分类主要分为三大类：鼠标、键盘、表单事件
- 常见事件
onblur 元素失去焦点
onfocus 获得焦点
onmouseover 鼠标覆盖
onmouseout 鼠标移开
onclick 鼠标点击
onkeydown 键盘键按下
onkeyup 键盘键松开
onload 页面加载
onchange 内容改变 - js中事件的绑定
js对象.事件名 = function(){
事件行为;
}
/*
1)获取到页面上的div标签对象
2)例如:当触发点击事件时，修改div标签背景颜色为红色
*/
var div = document.getElementById("div1");
div.onclick = function(){
div.style.backgroundColor="red";
}
DOM
涉及到页面内标签的操作，势必需要用到dom.
document object model，当网页被浏览器加载时，浏览器会创建一个用来表示当前页面文档的对象，document！我们在js中，操作document对象，就相当于在操作整个html页面！
作用：操作页面内容，对标签、样式等进行增删改查。
获取元素：
- getElementById(“id名称”) : 通过id名称获取标签，返回值 一个标签
- getElementsByClassName(“类名”) : 通过类名获取标签，返回值 标签数组
- getElementsByTagName(“标签名”) :通过标签名获取标签, 返回值 标签数组
- getElementsByName(“表单元素name属性的值”) 获取表单元素, 只有表单元素才有name属性，返回值 标签数组
使用：document.
修改元素：
- 改变标签文本内容,值
innerHTML 可以解析HTML结构
innerText 只能处理纯文本 - 改变标签行间属性
标签对象.属性名 = “属性值”; // 修改标签行间属性值
标签对象.setAttribute(“属性名”,”属性值”); - 改变标签css样式
标签对象.style.属性名 = “属性值”;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="div1" style="background-color: yellow;">block1</div>
<div id="div2" align="left" style="background-color: red;">block2</div>
<div id="div3" style="background-color: blue;">block3</div>
</body>
<script type="text/javascript">
var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")
var div3 = document.getElementById("div3")
var i =0;
div1.onclick = function(){
var value = div1.innerHTML;
console.log(value);
div1.innerHTML='<div>内置div</div>';
}
div2.onclick = function(){
i++;
if(i%2){
div2.setAttribute("align","right")
}else{
div2.setAttribute("align","left")
}
}
div3.onclick = function(){
div3.style.backgroundColor = "black"
}
</script>
</html>
二、BOM
browser object model，浏览器对象模型。浏览器页面被加载、初始化时，会在内存中创建一个全局的对象，来描述当前窗口的属性或者行为，这个对象称为浏览器对象模型！
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
BOM中有一个最核心的对象window，代表浏览器的窗口！而这个窗口分为了6大子模块：
document 文档对象
frames HTML页面的框架对象
screen 屏幕对象
history 浏览历史对象
location 窗口位置对象
navigator 导航对象，获取到浏览器的相关信息
所有的浏览器都支持window对象，而且我们在使用window的子模块时，可以省略window的书写！
document.getElementById() <==> window.document.getElementById()
定时器
window对象的定时器
js中的定时器分为了两大类：单次(超时)定时器、循环(周期)定时器
1.单次定时器: 可以实现方法的延迟执行，而且方法只执行一次
var timeid = setTimeout(function() {
}, 延迟时间毫秒)
参数解析：
参数1 : function，代表绑定执行的方法
参数2 : delay，代表延迟的时间，单位毫秒
清除单次定时器 : 清除定时器,可以阻止定时器的执行。
clearTimeout(timeid);
2.循环定时器 : 循环定时器的最大作用，可以让一个方法反复的执行！
var timeid = setInterval(function() {
}, 时间毫秒)
参数解析：
参数1 : function，代表绑定执行的方法
参数2 : delay，方法执行的间隔时间，单位毫秒！
返回值timeid为当前定时器对象
清除循环定时器 : 清除定时器使定时器停止执行
clearInterval(timeid);
window中的弹出框
window对象有三种类型的弹出框：警告框、确认框和提示框。
- 警告框：
window.alert("sometext"); - 确认框：
window.confirm("sometext");返回boolean类型结果, 选择确定返回true,点击取消返回false - 提示框：
window.prompt("请输入用户名","默认输入值");返回输入的内容
通常在书写时可以省略前面的window前缀。
window.location
location对象表示窗口的位置 : 可用于获取当前页面的一些信息，也可以使用此对象，在js中实现路径的跳转！
-
获取当前页面信息
location.protocol 返回web协议(HTTP,HTTPS)
location.hostname 返回web主机的名称
location.port 返回web主机的端口号
location.pathname 当前页面的路径文件名 /test/1.html
location.href 当前页面的url完整路径
举例 : 完整的浏览器页面访问的url路径http://localhost:8020/test/1.html -
实现js路径跳转
window.location = “新路径”;
window.history
浏览器历史对象，可以实现页面的前进及回退！
- history.back() 等同于在浏览器中点击后退按钮
- history.forward() 等同于在浏览器中点击前进按钮
window.screen
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
window.document
document 就是DOM中的document。
document.body.offsetWidth 网页可见区域的宽度
document.body.offsetHeight 网页可见区域的高度
扫一扫
2218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
