- 前端脚本语言
- 网页行为动作
1.编程工具
- HBuilder或者notepad++
<html>
<head></head>
<body>
<script type="text/javascript">
// 注释:打印hello world
/*
多行注释
测试
*/
document.write("Hello World,i am Javascript!");
</script>
</body>
</html>
2.注释与语句
- 注释单行//或者多行/ /
- 语句也可叫句柄,Javascript语句以分号结束
3.变量的声明与使用
- var声明变量
- 变量命名符合规范(字符开头,名称大小写敏感)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 变量声明与使用
var a = 10; // 整型
var b = 5;
var name = "小张"; // 字符类型
var W; // 声明变量
W = "小王"; // 变量赋值
var x = 1,y = 2;
document.write(a+b);
document.write(name);
document.write(W+name);
document.write(x-y);
</script>
</body>
</html>
4.变量类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 1; // 整型
var b = 1.2; // 小数
var c = "测试"; // 字符型
var d = -1.2; // 负数
var e = false; // 布尔型
var f = null; // 空
// 转义字符\使用
document.write("小明说:\"思密达\"")
</script>
</body>
</html>
5.变量和字符串组合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var name = "小王";
var str_name = "lance";
document.write(name+"说:\""+str_name+"你好!\"");
</script>
</body>
</html>
6.函数定义带参与调用
- function关键字定义函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 定义函数带参数
function openweb(a){
alert("弹窗别动"+a);
}
// 调用函数
openweb("窗口");
</script>
<form>
<!-- 按钮调用函数 -->
<input type="button" value="点我" onclick="openweb(value)"/>
</form>
</body>
</html>
7.多参函数与输出html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 定义函数
function openweb(a,b){
alert(a+"弹窗别动"+b);
// html标签插入
document.write("试试<br/>换行")
}
// 调用函数
openweb("小明","窗口");
</script>
<form>
<!-- 按钮调用函数 -->
<input type="button" value="点我" onclick="openweb(value,value)"/>
</form>
</body>
</html>
8.基础语法汇总
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
</head>
<body>
<script type="text/javascript">
// 函数
function test(){
// if判断,&&,||,!
if (1 == 1 && 2 == 2 || 1 != 2){
return "测试";
}
else{
return "测试不通过";
}}
// while循环
function test_while(a){
var sum = 0
while(a){
sum += a;
a--;
}
return sum;
}
// do while循环
function test_do_while(a){
var sum = 0;
// 退出条件
do{
sum += a;
a++;
}while(a<101);
return sum;
}
// switch
function test_switch(a){
switch(a){
case 1:return 1;
case 2:return 2;
case 3:return 3;
}
}
// for循环
function add_test(){
var sum = 0;
for(i = 1;i<=100;i++){
sum += i;
}
return sum;
}
// 调用函数
document.write(test_do_while(1)+"<br/>");
document.write(test_switch(3)+"<br/>");
document.write(test()+"<br/>");
document.write(test_while(5)+"<br/>");
document.write(add_test());
</script>
<form>
<input type="button" value="点我咯" onclick="alert('别点我好吧')">
</form>
</body>
</html>
9.事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
</head>
<body onload="alert('加载完成!')">
<a href="https:www.baidu.com" onmouseover="alert('别到我头上来!')">百度</a>
<a href="https:www.baidu.com" onmouseout="alert('别离开我头上!')">百度</a>
</body>
</html>
10.对象
- 对象初始化类似python的字典
- function可用于声明类也可声明函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
<script type="text/javascript">
// 定义对象
pepole = {name:"小明",age:25};
pepole1 ={name:"小狗",age:23};
</script>
</head>
<body>
<script type="text/javascript">
// 调用对象的属性
document.write(pepole.name+pepole1.name+pepole1.age)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
<script type="text/javascript">
// 定义对象
function person(name,age){
this.name = name;
this.age = age;
// 通过方法名调用方法,省略()
this.leftYears = leftYear;
}
// 定义方法
function leftYear(){
var s_age = 100 - this.age;
return s_age
}
// 实例化对象
var a = new person("小明",18);
</script>
</head>
<body>
<script type="text/javascript">
// 调用对象的属性,又需要加()表示类内部函数获得的值?
document.write(a.name+"的剩余生命"+a.leftYears())
</script>
</body>
</html>
与下列Python类似用法:
class Person:
# 初始化对象
def __init__(self, name, age):
self.name = name
self.age = age
self.leftYears = self.leftYear()
# 通过初始对象传入age,计算剩余生命
def leftYear(self):
s_age = 100 - self.age
return s_age
a = Person("小明", 18)
print(a.leftYears)
11.数组
- 需知道常用的方法和属性
- 数组创建和映射
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
</head>
<body>
<script type="text/javascript">
// 第一种创建数组
var arr = new Array(1,"test1",2,3,"login","autotest");
for(i = 0;i<arr.length;i++){
document.write(arr[i]+"<br/>");
}
// 第二种创建数组
var arr2 = new Array();
arr2[0] = "test";
arr2[1] = "autotest";
document.write(arr2[0]+arr2[1]+"<br/>");
// 数组的属性和方法
document.write(arr.length+"<br/>");
// 数组拼接
document.write(arr2.concat("mytest")+"<br/>");
// join方法,返回新数组对象,arr元素相隔穿插return(1returntest1return2return3returnloginreturnautotest)
var new_arr = arr.join("return");
document.write(new_arr+"<br/>");
// 关联数组(字典映射)
var t_arr = new Array();
t_arr["name"] = "小明";
t_arr["age"] = "18";
document.write(t_arr["name"]+t_arr["age"]);
</script>
</body>
</html>
12.常用操作对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
</head>
<body>
<div class="show_time">
<div id="showTime">显示时间的位置</div>
</div>
<script type="text/javascript">
// Math对象,开算术平方根
// var a = 4;
// var b = Math.sqrt(a);
// // 圆周率平方根
// document.write(Math.sqrt(Math.PI)+"<br/>");
// document.write(b+"<br/>");
// Date对象
// function printTime(arg){
// var date = new Date();
// var h = date.getHours();
// var m = date.getMinutes();
// var s = date.getSeconds();
// document.write("现在是"+h+"时"+m+"分"+s+"秒");
// switch(arg){
// case "h":return h;
// case "m":return m;
// case "s":return s;
// }
// }
// 按时打印时间
// setInterval("printTime()",1000);
function printDate(){
var date = new Date();
var Y = date.getFullYear();
var M = date.getMonth()+1; //js 获取月份从0开始
var D = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
document.getElementById("showTime").innerHTML=""+Y+"年"+M+"月"+D+"日"+h+"时"+m+"分"+s+"秒";
}
// 按秒打印
setInterval("printDate()",1000);
</script>
</body>
</html>
13.操作表单元素
- 获取表单控件数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
</head>
<body>
<!--表单居中显示-->
<center>
<form>
Username:<input type = "text" name = "username"/><br/><br/>
Password:<input type = "password" name = "password"/><br/><br/>
<input type = "submit" value="submit"/>
</form>
</center>
<script type="text/javascript">
// 获取form表单里的控件数量3个(姓名输入框,密码输入框和提交按钮)
var a = document.forms[0].length;
document.write(a);
// 获取第1个form的第1个元素的name值
var b = document.forms[0].elements[0].name;
document.write(b);
</script>
</body>
</html>
- 简单表单验证正确
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function check() {
if(document.getElementById("username").value=="") {
alert("没有输入用户名!");
return false;
} else if(document.getElementById("password").value=="") {
alert("没有输入密码!");
return false;
} else {
alert("提交成功!")
return true;
}
}
</script>
<form name="form1">
<input type="text" id="username">
<input type="password" id="password" >
<input type="submit" onclick="check()">
</form>
</body>
</html>
- 错误的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复习</title>
<script type="text/javascript">
function test(){
if(document.getElementsById("username").value == "")
{alert("未输入用户名或密码");return false;}
else if(document.getElementsById("password").value == "")
{alert("未输入用户名或密码");return false;}
else{
alert("提交成功");return true;
}
}
</script>
</head>
<body>
<!--表单居中显示-->
<center>
<form name = "f">
Username:<input type = "text" id = "username" /><br/><br/>
Password:<input type = "password" id = "password"/><br/><br/>
<input type = "submit" onclick="test()"/>
</form>
</center>
</body>
</html>
14.JavaScript+Selenium自动化(不推荐,推荐python+selenium)
- nodejs环境
- npm安装selenium-webdriver
var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until;
var driver = new webdriver.Builder().forBrowser('chrome').build();
driver.get('https://www.baidu.com');
driver.findElement(By.id('kw')).sendKeys('selenium');
driver.findElement(By.id('su')).click();
driver.wait(until.titleIs('selenium_百度搜索'));
driver.quit();