js应为标识符哪里错了,javascript符号和语法

小狗AI

于 2023-11-16 13:46:59 发布

阅读量224

点赞数

文章标签：人工智能

本文链接：https://blog.csdn.net/ai_lover_cat/article/details/134440029

版权

大家好，给大家分享一下js中的标识符命名规范有哪些，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

js复习

1.输出语句 console.log() ，console.dir()，window.alert()

使用 console.log() 写入浏览器控制台 //控制台输出信息（检查错误）
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
console.dir(div)：可以打印出： //(检查错误)
一个对象所有的属性和方法。

F12 来激活浏览器控制台，并在菜单中选择“控制台”

效果图：

代码：

<!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>






<style>
    


    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    

<div></div>





<>

var div=document.querySelector("div")
console.log("helloworld!")
console.log(div)
console.dir(div)


</>


</body>
</html>

在控制台输出了：文本，元素，元素内容
console.dir(div)：可以打印出：
一个对象所有的属性和方法Python中的所有运算符号。
在这里插入图片描述

效果图：
在这里插入图片描述

加了这个：window.alert(‘警告！’)
在这里插入图片描述

加了这个：document.write(‘helloworld!’)
在浏览器写入 HTML 输出

在这里插入图片描述

console.log(div)：可以打印出：div变量控制的元素的html结构
子元素:也会打印出来

<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>




</div>

在控制台：可以看到 div 和它的子元素（html结构）
在这里插入图片描述

2.js要不要写标点符号？

而 JavaScript 的分号却是可选的，若语句都各占一行，则可以省略分号。
但是：
写了分号：容易自己理解，美观，还是写分号为好

<!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>






<style>
    


    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    







<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>




</div>





<>

var div=document.querySelector("div");
var li=document.querySelector("li");
console.log(li);
window.alert('警告！');
/*document.write('helloworld!')*/
document.write('') ;
console.log("helloworld!");
console.log(div);



</>


</body>
</html>

3.let ,const(常量)

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。
这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）

let: 类似于var关键字// 都可以定义变量：
let lii=document.querySelector(“li”);// 也可以定义变量获取元素
console.log(lii);
let ve=100;
console.log(ve);

<!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>






<style>
    


    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    







<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>




</div>





<>

var div=document.querySelector("div");
var li=document.querySelector("li");
let lii=document.querySelector("li");
let ve=100;
console.log(li);
window.alert('警告！');
/*document.write('helloworld!')*/
document.write('') ;
console.log("helloworld!");
console.log(div);
console.log(lii);

console.log(ve);

</>


</body>
</html>

效果图：
在这里插入图片描述

const rty=400;
rty=100; //出现错误，常量不能再一次被赋值
在这里插入图片描述

4.JavaScript 数组用方括号书写：

数组的项目由逗号分隔。
下面的代码声明（创建）了名为 cars 的数组

var cars = [“apple”, “you”, “tyu”,5，‘q’]; //数据类型可以不同
console.log(cars[3]); //返回5
console.log(cars[4]); //返回字符q

<!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>






<style>
    


    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    







<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>




</div>





<>

var div=document.querySelector("div");
var li=document.querySelector("li");
let lii=document.querySelector("li");
let ve=100;
var cars = ["apple", "you", "tyu",5,'q'];

console.log(cars[3]);
console.log(cars[4]);


console.log(li);
window.alert('警告！');
/*document.write('helloworld!')*/
document.write('') ;
console.log("helloworld!");
console.log(div);
console.log(lii);

console.log(ve);

</>


</body>
</html>

效果图：
在这里插入图片描述

5.JavaScript 对象：

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。
定义一个对象：
var person = {firstName:“Bill”,
lastName:“Gates”,
age:62,
eyeColor:“blue”};

如何使用对象中的变量值？

person.age // 得到62
console.log(person.age)
或者：更改元素的内容：
p.innerHTML=person.firstName+“is”+person.age+“years old.”;//

<!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>






<style>
    


    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    







<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<p></p>


</div>





<>

var div=document.querySelector("div");
var li=document.querySelector("li");
let lii=document.querySelector("li");
var p=document.querySelector("p");
let ve=100;
var cars = ["apple", "you", "tyu",5,'q'];



var person = {firstName:"Bill", 
lastName:"Gates",
 age:62,
  eyeColor:"blue"};


p.innerHTML=person.firstName+"is"+person.age+"years old.";

console.log(person.age)






console.log(cars[3]);
console.log(cars[4]);


console.log(li);
window.alert('警告！');
/*document.write('helloworld!')*/
document.write('') ;
console.log("helloworld!");
console.log(div);
console.log(lii);

console.log(ve);

</>


</body>
</html>

结果：
在这里插入图片描述