版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
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(int 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">
<head>
<title>css练习</title>
<meta charset="UTF-8">
<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) {
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:350px;top:100px">
<form action="" methon="post" name="form" onsubmit="return checkForm()">
<table width="100%" cellspacing="15">
<!-- 文本框中readonly="readonly"只读 -->
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username" value="" />
</td>
</tr>
<!-- 密码框 -->
<tr>
<td>密码</td>
<td><input type="password" 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" checked="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" value="">
<option>-请选择-</option>
<option>-郑州市-</option>
<option>-新乡市-</option>
</select>
</td>
</tr>
<!-- 头像 -->
<tr>
<td>头像</td>
<td></td>
</tr>
<!-- 文本域简介 -->
<tr>
<td>简介</td>
<td>
<textarea name="info" id="" cols="5" rows="5"></textarea>
</td>
</tr>
<!-- 注册,重置,按钮 -->
<tr>
<td colspan="2">
<input type="button" value="注册" onclick="checkForm()" />
</td>
<!-- <input type="submit" value="提交">
<input type="reset" value="重置"> -->
</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());//HELLO JAVASCRIPT
alert(str.indexOf("5"));//-1
alert(str.charAt(2));//l
alert(str.substring(7, 10));//ava
//Array对象
var array = new Array(10, true, 'hello');
alert(array.join(":"));//10:true:hello
var array2 = [30, false, 'script'];
alert(array.concat(array2));//10,true,hello,30,false,script
alert(array.reverse());//hello,true,10
alert(array.sort());//10,hello,true
//日期对象
var date = new Date();
alert(date);//Wed Sep 25 2019 23:07:42 GMT+0800 (中国标准时间)
alert(date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());//2019-8-25 23:7:42
//Math对象
var m = -10.719;
alert(Math.abs(m));//10.719
alert(Math.round(m));//-11
alert(Math.random());//0.7935453386898104
//Number
alert(m.toFixed(2));//-10.72
}
</script>
</head>
<body onload="load()">
</body>
</html>