JavaScript是一种脚本语言，处理网页上的交互、数据验证、逻辑处理；JavaScript可插入HTML页面的编程代码
既可以在<body>中定义，也可以在<head>中定义，推荐在<head>中定义
语法：<script type="text/JavaScript"></script>
// 弹出一个框（提示、调试）
alert('1-Hello!');
alert('2-Hello!');
alert('3-Hello!');
confirm('确定吗？');
// 变量 var - 语法：var 变量名 = 变量值;
var userAge = 20;
alert (userAge); // 返回值为20
// 变量是可以被修改的；设置语法：变量名 = 新变量值;
var userAge = 20;
userAge = 30;
alert (userAge); // 返回值为30
JavaScript中的变量类型：字符串、数字、布尔类型、数组、对象
// 布尔类型
var isMan = true;
alert (isMan); // 返回值为true
var isWoman = false;
alert (isWoman); // 返回值为false
// 数组类型
var array = ['Tom', 'Rose', 'Jack'];
alert (array);
// 取第x个值，通过索引：数组名[索引值]，索引从0开始
alert (array[0]); // 返回值为Tom
alert (array[3]); // 返回值为undefined
// 获得数组的长度
alert (array.length); // 返回值为3
// json格式
var tom = {"name":"Tommy", "age":"20"};
alert (tom.name); // 返回值为Tommy
tom.name = "Jolly";
alert (tom.name); // 返回值为Jolly
// 空值类型
var p = null; // null表示不确定
alert (p); // 返回值为null
alert (happy); // 无返回，因为变量happy未定义
函数：具有固定格式的代码，是一段能完成某一特定功能的独立代码，可以被拿来重复调用。
方法命名惯例：动词(say)、动宾短语(sayAWord)
// 语法：函数名(各个参数)
function add(a,b) { // 两个数的加法运算需要准备什么数据
var sum = a + b; // 功能相关的逻辑，a,b为形式参数，不需要定义
return sum;
}
// 函数已经写好，以下为调用
var total = add(2,3);
alert(total); // 返回值为5
alert(add(20,30)); //返回值为50
HTML DOM (Document Object Model) 文档对象模型
通过HTML DOM,可以使用JavaScript访问HTML文档；通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML
两个重要的对象：window(浏览器中打开的窗口)和document(窗口中显示的当前文档)
// 文档就绪事件
<head>
<script type="text/JavaScript">
window.onload = function(){
// 通过Id来获取元素
var ele = document.getElementById('it-3');
alert(ele); // 返回值为object HTMLInputElement
alert(ele.value); // 返回值为输入框-3
// 通过Tag来获取元素
var eles = document.getElementsByTagName('input');
alert(eles); // 返回值为object HTMLCollection
alert(eles.length); // 返回值为7
var fifthEle = eles[4];
alert(fifthEle.value); // 返回值为输入框-5
// 通过class来获取元素
var eles2 = document.getElementsByClassName('ip_2')
alert(eles2[2].value); // 返回值为输入框-5
// 改变元素的属性
alert(ele.value); // 返回值为输入框-3
ele.value = "Java自动化测试课程";
alert(ele.value); // 返回值为Java自动化测试课程
// 得到ah的元素对象
var ah = document.getElementById('ah');
// 获得元素间的纯文本内容（不含标签）
alert(ah.innerText); // 返回值为百度一下
// 获得元素间的所有内容（包含标签）
alert(ah.innerHTML); // 返回值为<h1>百度一下</h1>
}
</script>
</head>
<body>
<input type="text" value="输入框-1" id="it-1" class="ip_1"><br>
<input type="text" value="输入框-2" id="it-2" class="ip_1"><br>
<input type="text" value="输入框-3" id="it-3" class="ip_2"><br>
<input type="text" value="输入框-4" id="it-4" class="ip_2"><br>
<input type="text" value="输入框-5" id="it-5" class="ip_2"><br>
<input type="text" value="输入框-6" id="it-6" class="ip_3"><br>
<input type="text" value="输入框-7" id="it-7" class="ip_4"><br>
<a href="http://www.baidu.com" id="ah"><h1>百度一下</h1></a>
</body>
// 就绪事件
<head>
<script type="text/JavaScript">
window.onload = function(){
var input1 = document.getElementById("it-1");
input1.onblur=function(){
// alert("输入框失去焦点");
}
input1.onfocus=function(){
// alert("聚焦");
}
input1.onchange=function(){
// alert("发生改变");
}
input1.onclick=function(){
// alert("输入框被点击");
}
input1.ondblclick=function(){
// alert("输入框被双击");
}
var button = document.getElementById("btn");
btn.onmouseover=function(){
alert("鼠标移动到此");
}
}
</script>
</head>
<body>
<input type="text" value="输入框-1" id="it-1" class="ip_1">
<input type="button" name="btn" value="我是按钮" id="btn">
</body>
网友评论