初识JavaScript （小白必备）

@我是东山啊

已于 2022-08-24 20:27:54 修改

阅读量206

点赞数

分类专栏： web 文章标签： javascript 前端 css

于 2022-08-23 09:11:07 首次发布

本文链接：https://blog.csdn.net/m0_53404077/article/details/126477592

版权

web 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

初识JavaScript

JavaScript

	web简短的脚本语言  
	可以跨平台 web必备 
	ECMA制定的前端开发语言标准

作用
页面特效
表单验证
修改内容属性样式
组成
ECMA执行标准
BOM
js与浏览器交互
DOM
js与页面元素交互
标准
符号全英文
要用分号符隔开
区分大小写

三种js使用方法

	写在事件属性中（以on开头）只能作用于当前标签
	写在文件内部的script中  只能作用当前文件，当前行以后的内容
	外部js文件  可以作用于 所有通过script引入的html文件

三种引入方式

	属性：事件属性  直接在标签里写
	script标签  在head或者body里写  一般在body最后面
	外部引入  使用script中的scr引入
	一般内部script标签要写在引入外部js'的后面

html标签事件属性

onclick
点击
ondblclick
双击
onmousedown
鼠标按下
onmouseup
鼠标抬起
onmouseenter
鼠标进入
onmouseleave
鼠标离开
onmousemove
鼠标移动
onmouseout
鼠标离开
onmouseover
鼠标进入
onmousewheel
滚轮滚动

特殊标签属性

onload
加载完毕
body
window
img
onscroll
滚动条滚动
body
window
带滚动条的元素
onresize
尺寸变化
body
window
onfocus
聚焦
onblur
失焦
oninput
输入内容

<!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>
        div{
            display: inline-block;
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 5px solid lightblue;
            background-color: sandybrown;
            margin: 10px;
            text-align: center;
        }
        p{
            white-space: nowrap;
            overflow: auto;
            width: 200px;
        }
        /* 隐藏滚动条 */
        /* p::-webkit-scrollbar{
            display: none;
        } */
    </style>
</head>
<body onload="console.log('body加载完毕')" onscroll="console.log('body滚动条滚动')"  onresize="console.log('body尺寸变化')">
    <div onclick="alert('点击')">点击</div>
    <div ondblclick="alert('双击')">双击</div>
    <div onmousedown="console.log('鼠标按下')">鼠标按下</div>
    <div onmouseup="console.log('鼠标抬起')">鼠标抬起</div>
    <div onmouseenter="console.log('鼠标进入')">鼠标进入</div>
    <div onmouseleave="console.log('鼠标离开')">鼠标离开</div>
    <div onmousemove="console.log('鼠标移动')">鼠标移动</div>
    <div onmouseout="console.log('鼠标离开')">鼠标离开</div>
    <div onmouseover="console.log('鼠标进入')">鼠标进入</div>
    <div onmousewheel="console.log('滑轮滚动')">滑轮滚动</div>
    <hr>
    <img src="./img/favicon.ico" alt="" onload="console.log('图片加载完毕')">

    <p onscroll="console.log('文本滚动')">发生什么了 发生什么了 发生什么了 发生什么了 发生什么了 发生什么了 发生什么了 发生什么了 发生什么了 </p>

    <input type="text" onfocus="console.log('聚焦')" onblur="console.log('失焦')" oninput="console.log('输入内容')">

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

三种输出方式

console 打印在控制台
1. log
  普通内容
2. error
  输出红色错误样式
3. warn
  输出黄色警告样式
4. info
  输出普通样式和log一样
document.write
输出到文档可以同时输出多个内容，逗号隔开可以写入html的代码
也可以加入script标签要使用转义字符\才能运行
交互式输出
alert
警告弹框阻塞输出不点击代码无法继续运行

<!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>
        console.log("我下面的是**");
        console.error("一楼是**");
        console.warn("好一个天道殷勤");
        console.info("xr改的");
        document.write("我是无敌的！","hello world");
        document.write('<script>console.log("123");<\/script>');
    </script>

    <script>
        alert("你点我试试！！！");
    </script>
</body>
</html>