JavaScript基础语法：
(1)使用Js (2)变量运用/数据类型
(3)Js运算符
(4)Js的数组
(5)函数
(6)练习：表单校验
(7)对象
一、Js介绍
- JavaScript是一种基于对象和事件驱动的客户端脚本语言。
- JavaScript是一种轻量级的编程语言。
- JavaScript是可插入HTML页面的编程代码。
- JavaScript插入HTML页面之后，可在所有的现代浏览器中执行。
- Js的用途：使页面更加丰富，使页面动起来。
二、Js基础语法
(1)使用Js
①定义事件时直接写入Js脚本代码
②嵌入式:<script>标签
③文件调用方式:Js文件
function method2() {
alert("引入Js文件");
}<head>
<title>JavaScript</title>
<meta charset="UTF-8">
<script type="text/javascript" src="./myJs.js"> </script>
<script type="text/javascript">
function method1() {
alert("嵌入式标签");
}
</script>
</head>
<body>
<!-- 1.定义函数时,直接使用Js -->
<input type="button" value="普通按钮" onclick="alert('直接使用Js')" />
<!-- 2.嵌入式标签 -->
<input type="button" value="普通按钮1" onclick="method1()" />
<!-- 3.引入Js文件 -->
<input type="button" value="普通按钮2" onclick="method2()" />
</body>(2)变量运用/数据类型
①第一个字符必须是字母、下划线或者美元符号。
②区分大小写，分号可有可无
③弱类型语言
var i = 3;
var s = "abc";- String类型字符串由一对单引号或双引号括起来
- 所有数字都是由浮点型表示的，不区分整型数值和浮点型
- 布尔数据类型只有两个值，分别为true和false
- 特殊的数据类型：null和undefined
- 复合数据类型–对象，如Array、Function
(3)Js运算符
"==“比较值的大小，”==="类型和值都一致的情况下才为true。
(4)Js的数组
①数组内可以存放任意类型的数据
②数组元素不赋值，则为undefined
③打印数组时，如果某个元素没有赋值，则为""
④访问数组范围以外的元素时，不会出现越界异常，为undefined
⑤定义了数组大小，依然可以添加更多的元素
⑥数组的4种定义：
var arr = new Array();
var arr2 = new Array(2);
var arr3 = new Array(true,123,false);
var arr4 = [false,"aaa",123];⑦创建二维数组的2种方法:
//方法一:
var a = new Array(7);
for(var i=0;i<=6;i++){
a[i] = new Array(2);
}
a[0][0] = "星期日";
a[0][1] = "Sunday";
//方法二:
var a1 = [[0,1,2],[1,2,3]];
a1[0][1] = 5;//覆盖掉原有的值(5)函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<head>
</script>
<script type="text/javascript">
function method3(a, b) {
// alert(a+b);
return (a + b);
}
</script>
</head>
<body>
<!-- 带参数的函数 -->
<input type="button" value="普通按钮3" onclick="alert(method3(10,20))">
</body>常用事件：
- onclick 单击
- ondblclick 双击
- onmouseover 鼠标滑入
- onmouseout 鼠标划出
- onload 加载
其他事件：
(6)练习：表单校验
<!DOCTYPE html>
<html lang="en">
<!-- 要求:
1.用户名,密码,不能为空
2.密码 确认密码一致
3.邮箱要匹配正则表达式:str.match("正则表达式")
4.正则.test("字符串") -->
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function checkForm() {
var username = document.getElementById("username");
var password = document.getElementById("password");
var repassword = document.getElementById("repassword");
var email = document.getElementById("email");
if (username.value == "") {
alert("用户名不能为空!");
}
if (password.value == "") {
alert("密码不能为空");
}
if (repassword.value != password.value) {
alert("两次密码输入不一致");
}
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.a-zA-Z0-9_])+/.test(email)) {
alert("请输入合法的邮箱地址");
}
}
</script>
</head>
<body>
<div style="height: 600px;background-color: pink;">
<div
style="border: 5px solid gray; background-color: white;width: 600px;position:absolute;left: 300px;top: 100px;">
<form action="" method="post" name="form" onsubmit="return checkForm()">
<table width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username" value="" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" id="password" name="password" value="">
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" id="repassword" name="repassword" value="">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man" cheacked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" name="email" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="sing" checked="checked" />唱歌
<input type="checkbox" name="hobby" value="dancing" />跳舞
<input type="checkbox" name="hobby" value="skiing" />滑雪
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province" value="">
<option>-请选择-</option>
<option>-河南省-</option>
</select>
<select name="city">
<option>-请选择-</option>
<option>-郑州市-</option>
<option>-洛阳市-</option>
</select>
</td>
</tr>
<tr>
<td>头像</td>
<td></td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea name="info" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="注册" onclick="checkForm()" />
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>(7)对象
内置对象:
简单对象 | String 、Number、Boolean |
组合对象 | Array、Math、Date |
复杂对象 | Function、Regex、Object |
- String对象:
- Array对象
- Date对象
- Math对象
- Number对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js对象</title>
<script>
function load() {
//String对象
var str = "hello JavaScript";
alert(str.toUpperCase());//转换为大写
alert(str.indexOf(11, "S"));//获取从某位开始的某个字符的下标
alert(str.charAt(2));//获取指定位置的字符
alert(str.substring(7, 10));//获取子字符串
//Array对象
var arr1 = new Array(10, true, 'hello');
var arr2 = [30, false, "script"];
alert(arr1.join(":"));//通过指定分隔符将数组分隔在一个字符串中
alert(arr1.concat(arr2));//用于连接两个或多个数组,会返回被连接数组的一个副本
alert(arr1.reverse());//反转数组,生成新的数组
alert(arr1.sort());//对数组元素进行排序
//日期对象
var date = new Date();
alert(date);
alert(date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
//Math对象
var m = -10.329;
alert(Math.abs(m));//绝对值函数
alert(Math.round(m));//四舍五入
alert(Math.random());//随机数函数
//number对象
var n = 2.111;
alert(n.toFixed(2));//四舍五入为指定小数位的数字
}
</script>
</head>
<body onload="load()">
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
