JS学习笔记day1

最新推荐文章于 2024-05-18 20:57:08 发布

alicelmx

最新推荐文章于 2024-05-18 20:57:08 发布

阅读量219

点赞数

分类专栏：前端学习文章标签： html 前端

本文链接：https://blog.csdn.net/alicelmx/article/details/78791102

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端基本的技能学习到JS了，感觉还比较简单，我看的视频是极客学院的前段教程第一阶段，基本概念的讲解，还没有实战过项目，准备学习完第二阶段后用Django写一个小明酱的博客，到时候也会发布出来的。

JS用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

JS标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript

使用限制

在HTML中，不限制脚本数量
通常把脚本放置在head标签中，以不干扰页面内容

JS输出

JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据：
1. 使用 window.alert() 弹出警告框。
2. 使用 document.write() 方法将内容写到 HTML 文档中。
3. 使用 innerHTML 写入到 HTML 元素。
4. 使用 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循环
1. 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文件中进行调用

返回值的函数

返回值：
1. 我们通过return将函数的值返回给调用它的地方
2. 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句柄
1. addEventListener() 方法用于向指定元素添加事件句柄

element.addEventListener(event, function, useCapture);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

事件详解

事件流
1. 事件流：描述的是在页面中接收事件的顺序
2. 事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的结点（文档）
3. 事件捕获：最不具体的结点先接收事件，而最具体的结点应该是最后接收事件
事件处理
事件对象