文章目录
1、js
1.1、JavaScript引入方式
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
- 内部脚本：将 JS代码定义在HTML页面中
- 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js1");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
注意：
外部脚本不能包含
<script>标签在js文件中直接写 js 代码即可，不要在 js文件 中写
script标签
<script>标签不能自闭合在页面中引入外部js文件时，不能写成
<script src="../js/demo.js" />。
1.2 JavaScript基础语法
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
-
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
-
大括号表示代码块
1.2.1、输出语句
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 console.log() 写入浏览器控制台
<script>
window.alert("hello js");//写入警告框
document.write("hello js 2~");//写入html页面
console.log("hello js 3");//写入浏览器的控制台
</script>
1.2.2、变量
- var 是全局变量
let关键字所在的代码块内有效- const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数
var test = 20;
test = "张三";
js 中的变量名命名也有如下规则，和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样
-
作用域：全局变量
{ var age = 20; } alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用 -
变量可以重复定义
{ var age = 20; var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉 } alert(age); //打印的结果是 30
针对如上的问题，==ECMAScript 6 新增了 let 关键字来定义变量。==它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
例如：
{
let age = 20;
}
alert(age);
运行上面代码，浏览器并没有弹框输出结果，说明这段代码是有问题的。通过 F12 打开开发者模式可以看到如下错误信息
1.2.3、数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
alert(typeof age);以弹框的形式将 age 变量的数据类型输出
var price = 99.8;
alert(typeof age); // 结果是 ： number
var addr = "北京";
alert(typeof ch); //结果是 string
var flag2 = false;
alert(typeof flag); //结果是 boolean
var obj = null;
alert(typeof obj);//结果是 object
var a ;
alert(typeof a); //结果是 undefined
1.2.4、运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示
-
一元运算符：++，–
-
算术运算符：+，-，*，/，%
-
赋值运算符：=，+=，-=…
-
关系运算符：>，<，>=，<=，!=，==，===…
-
逻辑运算符：&&，||，!
-
三元运算符：条件表达式 ? true_value : false_value
概述:
-
==：
-
判断类型是否一样，如果不一样，则进行类型转换
-
再去比较其值
-
-
===：js 中的全等于
- 判断类型是否一样，如果不一样，直接返回false
- 再去比较其值
代码：
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false
1.3、函数
函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
函数定义格式有两种：
-
方式1
function 函数名(参数1,参数2..){ 要执行的代码 } -
方式2
var 函数名 = function (参数列表){ 要执行的代码 }
注意：
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){ return a + b; }上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
函数调用函数：
函数名称(实际参数列表);
eg：
let result = add(10,20);
注意：
JS中，函数调用可以传递任意个数参数
例如
let result = add(1,2,3);它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。
1.4、JavaScript常用对象
1.4.1、Array对象
代码演示：
// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
//alert(arr2);
// 访问
arr2[0] = 10;
alert(arr2)
1.4.1、String对象
String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。
代码演示：
var str4 = ' abc ';
alert(1 + str4 + 1);
上面代码会输出内容 1 abc 1，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim() 函数
var str4 = ' abc ';
alert(1 + str4.trim() + 1);
输出的内容是 1abc1 。这就是 trim() 函数的作用。
1.4.3、String对象
调用属性的格式：
对象名.属性名
调用函数的格式：
对象名.函数名()
接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~
1.5、BOM
BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
BOM 中包含了如下对象：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
1.5.1、Window对象
- 案例：
需求：每隔1秒，灯泡切换一次状态
1.5.2 History对象
1.5.3 Location对象
1.6、DOM
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//1. getElementById：根据id属性值获取，返回一个Element对象
var img = document.getElementById("light");
// alert(img);
img.src = "../imgs/on.gif";
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
for (let i = 0; i < divs.length; i++) {
//divs[i].style.color = 'red';
divs[i].innerHTML = "呵呵";
}
//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
//alert(hobbys[i]);
hobbys[i].checked = true;
}
//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
/*for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}*/
</script>
</body>
1.7、事件监听
常见事件
| 事件属性名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
1.8 案例：表单验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
//1.3 获取用户输入的用户名 //trim()排除空格
var username = usernameInput.value.trim();
//1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
//var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();
//1.4 判断密码是否符合规则：长度 6~12
var reg = /^\w{6,12}$/;
var flag = reg.test(password);
//var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("password_err").style.display = '';
}
return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();
//1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
//var flag = tel.length == 11;
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("tel_err").style.display = '';
}
return flag;
}
//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
var flag = checkUsername() && checkPassword() && checkTel();
return flag;
}
</script>
</body>
</html>
1.9 正则表达式
代码演示：
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
2、html
1.基础标签
2.布局标签 （div 和 span）
这两个标签，一般都是和css结合到一块使用来实现页面的布局。
- div 标签 在浏览器上会有换行的效果，
- 而 span 标签在浏览器上没有换行效果。
3.表单标签
3.1 input
表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：
-
<input>：表单项，通过type属性控制输入形式
input标签有个type属性。type属性的取值不同，展示的效果也不一样
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市:
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option>广州</option>
</select>
<br>
个人描述：
<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
3.CSS
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
1026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
