Javascript基础(第一天)

最新推荐文章于 2023-07-05 10:39:13 发布

LAN+

最新推荐文章于 2023-07-05 10:39:13 发布

阅读量723

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46291380/article/details/127542356

版权

这篇博客介绍了JavaScript的基础知识，包括JavaScript的作用、书写位置、注释、结束符、输入输出语法和字面量。讲解了变量的声明、使用、类型以及变量命名规则。还涉及数据类型如数字、字符串、布尔型、未定义和空类型，并讨论了数据类型的检测和转换。

摘要由CSDN通过智能技术生成

JavaScript介绍

1. 1 JavaScript是什么

1.JavaScript（是什么）？
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
2. 作用
网页特效（监听用户的一些行为让网页作出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js)
3. JS组成
ECMAScript、Web APIs（DOM+BOM）
- ECMAScript：规定了js基础语法核心知识，比如变量、分支语句、循环语句、对象等等
- Web APIs：
DOM→操作文档，比如对页面元素进行移动、大小、添加删除等操作。
BOM→操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

DOM：页面文档对象模型
BOM：浏览器对象模型

1.2 JavaScript书写位置

内联JavaScript
代码写在标签内部
语法：

<body>
		<button onclick="alert('逗你玩')">点击我月薪过万</button>
</body>

注意：此处作为了解即可，但是后面vue框架会用到这种模式

内部JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展： alert(‘你好，js’)页面弹出警告对话框
外部JavaScript
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中

<body>
		<script src="my.js"></script>
</body>

案例：

<!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">按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        let btns = document.querySelectorAll('button')
        
        for( let i = 0; i < btns.length; i++) {
     
            btns[i].addEventListener('click', function(){
     
                document.querySelector('.pink').className = '' 
                this.className = 'pink'
            })
        }
    </script<