Javascript学习笔记week1

最新推荐文章于 2024-09-16 08:47:17 发布

Lemonade4726

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量119

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/m0_73720790/article/details/130450440

版权

Week1

JS介绍：JS是一种运行在客户端（浏览器）的编程语言，以此实现人机交互的效果。（而HTML、CSS是一种标记语言）

JS作用：网页特效，监听用户的一些行为让网页做出对应的反馈

表单验证，针对表单数据的合法性进行判断

数据交互，获取后台的数据，渲染到前端

服务器编程，如node.js

JS的组成：ECMAScript（JS的语言基础） Web API(由DOM BOM组成)

ECMAScript：规定了js基础语法核心知识，如变量、分支语句、循环语句、对象等

Web APIs：DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等

权威网站：MDN MDN Web Docs (mozilla.org)

体验JS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .pink{

            background-color: pink;

        }

    </style>

</head>

<body>

    <button class="pink">按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>



    <script>

        let bts = document.querySelectorAll('button')

        for(let i =0;i<bts;i++)

        {

            bts[i].addEventListener('click', function() {

              document.querySelector('.pink').className = ''

              this.className = 'pink'

        })

        }

    </script>

</body>

</html>

JS书写位置

类比CSS

行内样式表行内JS

内部样式表内部JS

外部样式表外部JS

内部JS：直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

拓展：alert(‘你好，js’)页面弹出警告对话框

Tips：将script标签放在HTML文件的底部附近原因是浏览器会按照代码在文件的顺序加载HTML，如果先加载的js期望修改其下方的HTML，那么它可还能由于HTML尚未被加载而失效，因此，将js代码放在HTML页面的底部附近通常是最好的策略。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <SCript>

        alert('你好，js')//页面弹出警示框

    </SCript>

</body>

</html>

外部JS：代码写在以.js结尾的文件里

语法：通过script标签，引入到HTML页面中

Tips：script标签中间无需写代码，否则会被忽略；外部js会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script src="my.js">

        //中间写的内容会被忽略，最好不要写

    </script>

</body>

</html>

内联js：代码写在标签内部（此处作为了解，vue中会用这种形式）

JS注释

单行注释

符号：//

作用：//右边这一行的代码会被忽略

快捷键：ctrl+/

块注释

符号：/* */

作用：在/*和*/之间的所有内容都会被忽略

快捷键：shift+alt+a

结束符

作用：使用英文的;代表语句结束

实际情况：开发中可写可不写，浏览器可以自动推断语句的结束位置

现状：实际开发中越来越多人主张省略结束符

约定：为了风格统一，要么每句都写，要么每句都不写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        //单行注释

        /*块

        注

        释*/

        alert('第一句话');

        alert('第二句话')

    </script>

</body>

</html>

输入和输出语法

输出

1：document.write(‘要出的内容’)

向body内输出内容，如果输出的内容写的是标签，也会被解析成网页元素

2：alert(‘要出的内容’)

页面弹出警告对话框

3：console.log(‘控制台打印’)

控制台输出语法，程序员调试使用

输入

Prompt(‘请输入您的姓名：’)

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，即括号内单引号中的内容

Tips：alert和prompt会跳过页面渲染先被执行（目前仅作为了解）

变量

变量是计算机用于存储数据的容器，并不是数据本身

变量的声明

语法：let 变量名

声明变量由两部分组成：声明关键字，变量名（标识符）

变量的赋值

定义变量之后，能够初始化变量，对其进行赋值，“=”为赋值号

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        // let age//声明一个年龄变量

        // age = 18//赋值

        // console.log(age);//在控制台输出age的值

        let age=18//声明的同时进行赋值，变量的初始化

    </script>

</body>

</html>

小练习：声明变量1购买商品的数量num=20，变量2用户的姓名uname为张三，用控制台打印出两个变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let num=20

        let uname='张三'

        console.log(num);

        console.log(uname);

    </script>

</body>

</html>

更新变量

变量赋值后，还可以通过简单的给他一个不同的值来更新他

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let age=18

        age=19

        //而不能再这样写 let age =19

        console.log(age);

    </script>

</body>

</html>

Let不允许重复声明同一个变量

声明多个变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        // let age=18

        // age=19

        // //而不能再这样写 let age =19

        // console.log(age);

        let age = 18,uname = '张三'//声明多个变量

        console.log(age,uname);

    </script>

</body>

</html>

可是声明变量时为了可读性提倡用第一种方法，即一行声明一个变量

变量声明练习

进入页面弹出一个对话框，输入姓名，在页面中打印出输入的姓名

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let uname=prompt('请输入姓名：')

        document.write(uname)

    </script>

</body>

</html>

变量值的交换

类比C++,C语言中值的交换，声明除两个变量之外第三个变量，通过这一中间体将两个变量的值进行交换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let uname=prompt('请输入姓名：')

        document.write(uname)

    </script>

</body>

</html>