一、JS简介
1、javascript的作用
JS就是用来控制结构和样式的。
2、js的三个常用输出语句（js的内置对象）
（1）Alert 弹出警示框
完整的写法： window.alert("执行语句");
window 对象 窗口 一般情况可以省略
Alert("123")
（2）console 控制台输出
一般用于测试
cosole.log("执行语句") 控制台输出 普通的输出
console.warm("执行语句") 控制台警示
console.error("执行语句") 控制台错误提示
（3）document.write() 文档打印输出
document 文档对象，不可以省略
直接在文档中显示
3、变量
一、变量的命名规则：
1、变量命名必须以字符或下划线"_“”或者$符号开头
2、变量名长度不能超过255个字符
3、变量名中不允许使用空格
4、不使用脚本语言中保留的关键字以及保留符号作为变量名
5、变量名区分大小写
二、变量的作用域
可以分为全局变量和局部变量。
1）全局变量：
1、在最外层声明的变量
注：2、在函数体内部，但是没有声明var的变量也是全局变量
2）局部变量
1、在函数体内部声明的变量
4、事件的三要素
事件的三要素：事件源、事件、事件处理程序
举例：
开灯：我们用手 按 开关 灯亮了
1、事件源：开关
要触发的对象 手 用手去触发的。
一般情况 是个名词
发起者
被触发者 开关按钮。
在js中，一般是指元素
2、事件：
怎么触发的 按
一般情况下是个动词
在js中，一般指 点击、 鼠标经过、 按键盘...等动作。
注：
下列是常见的事件
onclick 鼠标单击
onblick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfucus 获得焦点，表示文本框等获得鼠标光标
onblur 失去焦点，表示文本框等失去鼠标光标
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmourseout 鼠标移出，即离开图片等所在的区域
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
3、事件处理程序
发生什么事：灯亮了。
指事件源发送了什么事件后，做出的改变。
语法：事件源.事件 = function(){ 事件处理程序 }
4、入口函数（之一）
window.onload = function(){
js;
}
当页面加载完毕后，执行函数体里面的js。也就是等页面的结构 样式等都加载完毕后执行。
5、模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.demo{
width: 100px;
height: 100px;
position:relative;
margin:0 auto;
}
p{
color:red;
cursor:pointer;
}
#mt{
width: 400px;
height: 300px;
background-color: #ccc;
position:absolute;
display:none;
}
#mt span{
width: 10px;
height: 10px;
position:absolute;
right:10px;
top:0px;
cursor:pointer;
}
</style>
<script>
window.onload = function(){
var mt = document.getElementById("mt");
var click = document.getElementById("click");
var close = document.getElementById("close");
click.onclick = function(){
mt.style.display = "block";
}
close.onclick = function(){
mt.style.display = "none";
}
}
</script>
<body>
<div class="demo">
<p id="click">模态框</p>
<div id="mt">
<span id="close">x</span>
</div>
</div>
</body>
</html>
6、padding
内边距 会影响盒子大小
行内元素 尽量不用上下的padding和margin
继承的宽度padding不会被挤开
7、JS的书写位置
Js的书写位置十分的自由
1、行内式
如：<button onclick = "alert('你好吗')"> 点击我</button>
一般情况，单双引号是一样的，但是会有包裹的情况，单双引号总是与最近的那个单双引号进行配对（单对单，双对双）。
注：我们一般采用外双内单的格式。
2、内嵌式
<script type="text/javascript"></script> 任何一个地方
3、外链式
<script type="text/javascript src="xx.js"></javascript>
注：这对标记之间不能写任何的东西
8、数据类型
JS的数据类型分为：
字符型、数值型、布尔型、null、undefined
JS是一个弱数据类型。
var Aa = 10;
var aa:int = 10;
JS的变量你给什么值，他就是什么数据类型
1、字符型
String 转换为字符型：
1）利用""（双引号）
加了引号的都是字符型
2）利用String(); 转换为字符型
2、布尔型
只有两个值，正确和错误（true和false）
数据类型转换为布尔型：
1）利用!!
console.log(typeof !!num);
2)利用boolean
false、undefined、null、0、" "为false
true、1、"something"、[Object]为true
3、数值型
var num = 10
1）数值的前面带0 表示八进制
var num = 020;
0*8º+2*8¹ = 16
2）数值的前面带0x 表示十六进制
var result = 0xb; 11
转换为数值型：
1.利用- * /都可以转换
2.利用Number()
1、parseInt() parseFloat()
parseInt(值,进制);
NOT a number
MMD
BBD
parseInt(110,2)
表示2进制，把110这个2进制转换为10进制。
0*2º+1*2¹ + 1*2² = 6
1.var a="15.15abc" , b='10.15' , c='10.0abc';
alert(parseInt(a)+Number(b)+parseFloat(c));
null undefined
null 空的，没有值。
undefined 未定义的，没有给值。
null ""
扫一扫
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
