web前端(三)——JavaScript入门 JavaScript嵌入页面的方式 语法规范 函数 获取元素方法
1、行间事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok!');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
语法规范
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
变量类型
5种基本数据类型:
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型,变量声明未初始化,它的值就是undefined
5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
1种复合类型:
object
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格:
对象o Object 比如:oDiv
数组a Array 比如:aItems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
正则表达式re RegExp 比如:reEmailCheck
函数
函数定义与执行
<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } // 函数执行 fnAlert(); </script>
变量与函数预解析
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<script type="text/javascript"> fnAlert(); // 弹出 hello! alert(iNum); // 弹出 undefined function fnAlert(){ alert('hello!'); } var iNum = 123; </script>
条件运算符
==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
获取元素方法
使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div >这是一个div元素</div>
如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的
解决方案:
1,javascrip放在元素后面
2,window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行
属性名在js中的写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
<script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1'); // 读取属性值 var sValue = oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = sValue; } </script> ...... <input type="text" name="setsize" > <a href="http://www.itcast.cn" >呵呵哒</a>
innerHTML可以读取或者写入标签包裹的内容