JS
JavaSccript入门
介绍
JavaSccript是运行在浏览器的脚本语言,JavaSccript主要解决的问题是前端与用户交互的问题,包括使用交互与数据交互,JavaSccript是浏览器解释执行的
前端三大块
- HTML:页面结构
- CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaSccript:页面行为:部分动画效果、页面与用户交互、页面功能
JavaSccript嵌入
-
行间事件
-
<input type="button" name="" onclick="alert('ok!');">
-
页面script标签插入
-
<script type="text/javascript"> alert('ok!'); </script>
-
外部引入
-
<script type="text/javascript" src="js/index.js"></script>
JavaSccript基础语法
JavaSccript是一种弱类型语言,JavaSccript的变量类型由他的值决定
格式:var 变量名=变量值==;==
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
变量类型
5大类:number数字类型、string字符串类型、bool类型、undefined 类型、null类型(表示空对象)
命名规范
- 区分大小写
- 第一个字符必须是字母、下划线(_)、或者美元符号($)
- 其他字符可以是字母、下划线、美元符号或者数字
JavaSccript函数
函数与变量预解析
JavaSccript解析过程分为两个阶段:编译阶段——>执行阶段
编译阶段会将function定义的函数提前,将var声明的变量提前并且赋值为undefined
<script type="text/javascript">
fnAlert(); // 弹出 hello!
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
函数传参
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函数返回值
函数通过关键字==‘return’==返回值,有两个作用
- 返回函数中的值或者对象
- 结束函数的运行
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
}
var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>
获取元素方法
通过使用内置document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后赋值给一个变量
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
但是这个方法没有预加载功能,即执行过程中顺序是由上至下,当通过getElementById拿取<div>
元素时,该<div>
还未被创建也就不存在获取元素的情况
提供两种解决方案:
方案一:将javascript写在页面最下面
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
方案二:将javascript语句放到window.onload触发的函数里,获取元素的语句会在页面加载完毕之后再执行
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,包括读和写
操作元素属性
var 变量=元素.属性名 读取属性
元素.属性名=新属性值 改写属性
属性名在js中的写法
- html的属性和js里面属性的写法一样
- “class ”属性写成“className”
- "style"属性里面的属性,由横杠的改成驼峰式,例如“font-size”—>“style.fontSize”
<script type="text/javascript">
window.onload=function(){
var oInput=document.getElementById('input01');
var oA=document.getElementById('link01');
//读取属性
var sValue=oInput.value;
var sType=oInput.type;
var sName=oInput.name;
var slinks=oA.href;
//修改属性
oA.style.color='red';
oA.style.fontSize=sValue;
alert(sType);
alert(sName);
alert(slinks);
}
</script>
</head>
<body>
<input type="text" name="setsize" id="input01" value="20px">
<a href="#" id="link01">HelloWorld</a>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div01');
var sTxt=oDiv.innerHTML;
alert(sTxt);
oDiv.innerHTML='HellWorld';
}
</script>
</head>
<body>
<div id="div01">NiceToMeetYou</div>
事件属性、匿名函数
事件属性
元素除了有样式,id等属性外,还有事件属性,常用的事件属性有鼠标点击事件(onclick),鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性,可以将时间和函数关联起来
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
匿名函数
定义函数不给名称,直接将函数赋值给元素的事件属性
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
实际应用:网页换肤