01 - JavaScript(声明变量方式,变量,注释)

最新推荐文章于 2022-10-14 10:03:33 发布

xyyojl

最新推荐文章于 2022-10-14 10:03:33 发布

阅读量772

点赞数

分类专栏： javascript 前端文章标签：变量声明变量的方式注释 innerHTML innerText

本文链接：https://blog.youkuaiyun.com/xyyojl/article/details/82764691

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

本文介绍了JavaScript中代码的位置，DOM操作，变量命名规范，声明变量的关键字var、let、const的区别，注释的使用，以及innerHTML与innerText的区别。强调了变量声明的规则和注意事项，包括在使用变量前必须先声明，并建议将script标签放置在body结束标签之前。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js的代码写在哪里?
如何获取操作元素的权力(DOM)
操作元素权力一次性,操作100次需要用到变量(给人起文字 = 变量名),变量的命名规范
三种声明变量的方式的区别
注释
innerHTML /innerText
onload/defer

js代码写在哪里?

行内,写在标签属性里面,不推荐使用
内部,代码需要放在script(双标签)标签里面,script标签的位置任意,解析到script标签的时候,交给js解析器
外部js文件,利用src属性引入
script可以防止于任何位置,不同的位置要注意加载顺序,通常放在head或body结束之前

如何获取操作元素的权力

给一个方法(DOM提供的)/api 传递一个名字,这个方法会通过这个名字去找到

对应的标签,确定标签存在时,就返回这个标签的操作权力

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 200px;"></div>
    <script>
        //document.getElementById("box");
    	 /*
    	 通过id获取标签的操作权力
        	docuement 文档
        	getElementById("id") 通过id获取元素
        	必须带括号,不需要加#,因为已经说明是通过id获取
        	只要是方法的东西都要带括号
        */
        //需要给标签注册一个点击事件
        //div#box 有一个点击事件 = 小纸条把要做的事全部记录下来
        document.getElementById("box").onclick = function(){
            //这个花括号里就是 纸条上记录的内容
            //第一件事,弹出一个窗口,(BOM)对应的方法控制效果
            alert("这是一个弹窗");
            //第二件事,点击div的时候,添加内容,操作对象,用完就没有了,第二次使用要重新在写一次
            document.getElementById("box").innerHTML = "风屿大帅比";
            //需要触发事件,才执行里面的代码,所以一开始没有展示什么
            //操作100次,怎么办?设置一些一些专门用来标记的东西
        }
    </script>
</body>

变量的命名规范

不能纯数字
不能以数字开头
名字严格区分大小写
不能使用关键字和保留字(目前没有特殊意义,以后可能会有)
可以使用符号 (最好是英文符号,$,_)
虽然可以使用中文作为名字,但是非常不推荐使用
不能使用四则运算符

变量应该是英文符号或者是英文字母开头,中间可以有数字,但是开头不能有数字或者全部纯数字

可以声明多个变量,变量不一定要马上赋值

声明变量

用来声明变量的关键字: var let const class function import

三个声明变量(var let const)的区别,通常情况下,龙头老大是window

//在script标签里面的第一层,全局变量
/*
	var 全局变量 会自动的成为window 的属性
	let 和 const 声明的全局变量 不会成为 window的属性 不能在
	js出生时带来的一个不好的弊端 尽量不要使用 var 会存在变量提升
	let const必须先声明,后使用,不提前声明会报错
	let 和 const 的区别
        let 声明的 叫做 变量 ,可以被改变
        const 声明的 叫做 常量 ,不可以被改变(通过等号重新赋值),恒定
*/
//调试方式console.log()打印日志
//字符串一定要加引号,关键字和变量不需要加引号
var a = 1;	
let b = 2;
console.log(b);		//打印2
b = 123;
console.log(b);		//打印123
const c = 3;
console.log(c);		//打印3
c = 4; //会报错,提示不能给常量赋值

什么时候使用let/const?

let 声明的变量可以重新赋值,需要对它重新赋值
const 声明的变量不可以重新赋值,不需要对它重新赋值

es6 老版本的浏览器不兼容,IE基本全不兼容

使用第三方工具(webpack)es6转换es5代码,如果es5本身有兼容IE的,就需要自己写

注释

单行注释

//单行注释

多行注释

/*
多行注释
多行注释
*/

###innerHTML和innerText的区别

innerHTML/innerText	含义
innerHTML	可以解析标签,希望解析标签的时候使用
innerText	就是纯文本不会解析标签
innerHTML/innerText	内容没有标签,两者都可以

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 500px;"></div>
    <p id="p1"></p>
    <script>
        
    	let box1 = docuement.getElementById("box");
        let p = document.getElementById("p1");
        //box1 代表id值为box的 div的操作权力
        //box1 就是id值为box的 div 这个标签的本身/本体
        //DOM 0级 同类只能绑定一次
        box1.onmousernter = function(){
            console.log("鼠标进来了");
            box1.innerHTML = "<a href="https:www.baidu.com">这是鼠标移入事件的内容</a>";
            //拿到box1的id
            console.log(box1.id);
            //直接对象.style,操作的是行内样式
            console.log(box1.style.width);
            box1.style.width = "400px";//更改该标签的width值,操作的是行内样式值
        }
        box1.onmouseleave = function(){
            console.log("鼠标出去了");
            box1.innerText = "<a href="https:www.baidu.com">这是鼠标移出事件的内容</a>";
            p.innerHTML = "123";
            
        }
    </script>
</body>

###小提示

//在上面那个代码的基础上,增加上去,放在事件里面
let str = p.innerHTML;//不代表p的本身,代表的p的内容,只是数据而已
//str只是代表p标签里面的内容
//带等号是赋值,不带是设置
str = 1234;//相当于是重置变量的值,不能给p.innerHTML设置为1234
p.innerHTML = 123;//这个才是真正的给p.innerHTML 设置值
p.innerHTML = str;
console.log(str);

onload/defer

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        let divBox = document.getElementById("box");//获取不到,返回null ==> null不能设置属性
        divBox.onclick =function(){
            console.log("鼠标移入了");
        }
    //效果没有出现,按f12==>看一下控制台有没有红叉出现,Uncaught TypeError: Cannot set property 'onclick' of null,属性不能设置为空
    //报错类型:报错提示
    /*
    解决思路:
    代码大致是从上往下
    不能给null设置属性 ==> 这个对象为null,一定是document.getElementById("box")没有获取到 ==> 标签还没加载 ==> script标签的位置
    */
    /*
    	如果script一定要写在head标签里面
    	解决办法:
    		1.把那些内容放在下面这里,window.onload 等待加载完成后才执行
            window.onload = function(){
            	let divBox = document.getElementById("box");
                divBox.onclick =function(){
                    console.log("鼠标移入了");
                }
            }
            2.采用外部js文件
            	2.1直接把解决办法1的内容放到外部js里面
            //1.js内容
            	2.2延迟加载,等整个文件加载完成以后,也就是defer 在window.onload的之前,只对外部js有用
            	<script src="1.js" defer></script>
            
    	
    */
    </script>
    
</head>
<body>
    <div id="box"></div>
    <script>
   		console.log(1);//1先执行
    </script>

</body>
</html>