前端基本的技能学习到JS了,感觉还比较简单,我看的视频是极客学院的前段教程第一阶段,基本概念的讲解,还没有实战过项目,准备学习完第二阶段后用Django写一个小明酱的博客,到时候也会发布出来的。
JS用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
JS标签
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
使用限制
- 在HTML中,不限制脚本数量
- 通常把脚本放置在head标签中,以不干扰页面内容
JS输出
- JavaScript 没有任何打印或者输出的函数。
- JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JS语句
向浏览器发出命令,语句的作用是告诉浏览器该做什么;语句之间用分号分割,分号是可选项;代码按照编写顺序依次执行
标识符
必须以字母、下划线、美元符开始
注意:JS对大小写非常敏感,同时会忽略多余的空格
JS注释
- 单行://
- 多行:/* */
JavaScript使用关键字 var 来定义变量, 使用等号来为变量赋值
数据类型
- 字符串(String)
- 数字(Number)
- 布尔(Boolean)
- 数组(Array)
- 对象(Object)
- 空(null)
- 未定义
- 可以通过赋值为null的方式清除变量
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>i=10,j=10;i+j=?</p>
<p id="sumid"></p>
<button onclick="mysum()">结果</button>
<script>
function mysum() {
var i = 10;
var j = 10;
var m = i+j;
document.getElementById("sumid").innerHTML=m;
}
</script>
</body>
</html>
- === 绝对等于(值和类型均相等)
- !== 不绝对等于(值和类型有一个不相等,或两个都不相等)
条件语句
- if-else
语法
if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}
- switch
语法
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
循环语句
- for循环
- for-循环代码块一定的次数
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
- for/in - 循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
输出为JohnDoe25
- while循环
while (条件){
需要执行的代码
}
do{
需要执行的代码
}
while (条件);
跳转语句
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
函数
函数的定义
<script>
function demo(a,b) {
var sum = a+b;
return sum;
}
var sum = demo(10,10);
alert(sum);//弹出一个对话框
</script>
语法
function functionName(parameters) {
执行的代码
}
函数调用
- 在script标签中调用
- 在HTML文件中进行调用
返回值的函数
- 返回值:
- 我们通过return将函数的值返回给调用它的地方
- return使用时,函数会停止执行,同时返回值
异常捕获
- 异常捕获
try {
//在这里运行代码
} catch(err) {
//在这里处理错误
}
实例:没有对str进行定义而抛出异常
<script>
function demo() {
try{
alert(str);
}catch(err){//只有发生错误时才会执行catch语句的内容
alert(err);
}
}
demo();
</script>
- throw语句:通过throw语句创建一个自定义的错误
<form>
<input id="txt" type="text">
<input id="btn" type="button" onclick="demo()" value="按钮">
</form>
<script>
function demo() {
try{
var e = document.getElementById("txt").value;
if(e==""){
throw "请输入";
}
}catch(err){
alert(err);
}
}
</script>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="MyCss.css">
</head>
<body>
<!--鼠标移出事件和鼠标经过事件-->
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOver(ooj) {//函数命名遵循驼峰规则
ooj.innerHTML = "hello"
}
function onOut(ooj) {
ooj.innerHTML = "world"
}
</script>
<form>
<!--文本内容改变事件-->
<input type="text" onchange="alert(hello,内容改变了)">
<!--文本框选中事件-->
<input type="text" onselect="changeDemo(this)">
</form>
<script>
function changeDemo(bg) {
bg.style.background = "red"
}
</script>
</body>
</html>
DOM对象
- 简介
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
- 操作HTML
1. 改变HTML输出流
注意:绝不要在文档加载完成之后使用document.write()。这会覆盖该文档
2. 寻找元素
1. 通过id找到HTML元素 getElementById
2. 通过标签名找到HTML元素 getElementByTagName
3. 改变HTML内容
使用属性:innerHTML
4. 改变HTML属性
使用属性attribute
- 操作CSS
document.getElementById(id).style.property=新样式
实例:修改背景颜色
<body>
<div id="div" class="div">
Hello
</div>
<button onclick="demo(this)">按钮</button>
<script>
function demo() {
document.getElementById("div").style.background = "blue";
}
</script>
</body>
DOMEventListener句柄
- addEventListener() 方法用于向指定元素添加事件句柄
element.addEventListener(event, function, useCapture);
- removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
事件详解
- 事件流
- 事件流:描述的是在页面中接收事件的顺序
- 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的结点(文档)
- 事件捕获:最不具体的结点先接收事件,而最具体的结点应该是最后接收事件
- 事件处理
- 事件对象