转码日记——Javascript笔记（1）-CSDN博客

本文链接：https://blog.csdn.net/zzcoding_/article/details/126288962

本文介绍了前端开发者的转码之路，从HTML/CSS入门后转向JavaScript。重点讲解了JS代码的不同编写位置，包括内联、属性绑定和外部文件，以及JavaScript的基本语法，如注释、数据类型和转换。

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

五月底决定转码，感觉前端还是挺有意思的，学完了HTML和CSS但是还没有着手做项目，之后都在忙着申请学校。准备前置课的时候对java和python也做了很多了解，现在回来继续学js，抽空再复习一下html 和 css 的基础知识，以及一些新增的标签。

JS的编写位置

（1）直接写在html里面

*所有的js代码都要写在 <script type="text/javascript"></script>标签中

//输出语句
alert("Hello, world!"); /* 弹出警告框*/
document.write("你真好看！"); /*网页*/
console.log("nice"); /*控制台*/

（2）编写在标签的onclick属性当中（不推荐，属于结构和行为耦合，不方便维护）

<body>
<button onclick="alert ('???');"></button>

//在超链接中插入js代码时要在href后面写上是js
<a href="javascript:alert('点击');"> </a>
</body>

（3）写在外部文件里，拓展名为.js，通过script标签引入（推荐书写）

*<script>标签一旦引入外部文件，就无法编写内部代码了，写了也会被忽略。

<head>
<title></title>
/* 写的时候要有type和src*/
<script type="text/javascript" src=""></script>

</head>

如果需要在内部写js，可以另外再写一个标签

/*写的时候要有type和src*/
<script type="text/javascript" src=""></script>
<script>
/*在这里编写内部代码*/
</script>

内部外部根据编写顺序（从上到下）执行

JS基本语法

（1）注释（内容不会被运行，可以使用注释进行代码的调试）

/* 多行注释 */

// 单行注释（只对标点后面的内容起作用）

（2）

JS中严格区分大小写
每个语句以英文分号（；）结束 —如果不写分号，浏览器会自动添加，消耗资源/ 猜错语义加错分号
自动忽略空格和换行，利用空格和换行对代码进行格式化

（3）字面量&常量

字面量：不可变，可以直接使用，但一般不直接使用字面量

变量：用来保存字面量，且变量的值是可以任意改变的，更方便使用

//使用变量要先使用var声明变量
var a;
console.log(a);
//这样控制台输出的就是undefined，只声明了，但没有赋值
var a;
a = 123;
//可以同时声明和赋值
var a = 123;

//通过变量对字面量进行描述
var age = 80;

（4）标识符（可以自主命名，包括变量名、函数名、属性名等）

命名规范：

标识符中可以含有字母、数字、_、$
不能以数字开头
不能是JS中的保留字和关键字
使用驼峰命名法（首字母小写，每个单词的开头字母大写，其余小写）— helloWorld

数据类型（字面量的类型）

（1）String 字符串

//String一定要双引号/单引号括起来，单双引号不要混着用
var str = "hello"; 

//引号不可以嵌套，单引号里不能放单引号，双引号里不能放双引号，但是可以单引号里嵌套双引号
var str = '我说："什么时候才能转码上岸呢？"'；

//如果想要双引号嵌套，需要让浏览器知道这只是单纯的符号
//当表示一些特殊符号时，可以使用\作为转义字符
var str = "我说：\"什么时候才能转码上岸呢？\""；

// \n 换行；\t 制表符；

// 如果要print \的时候要打印两个\\
var str = "\\";

（2）Number

所有的数值都是Number类型，包括整数和浮点数

//可以使用运算符typeof检查变量的类型，区分字符串和Number
var a = 123;
console.log (typeof a);

//如果使用Number表示的数字超过了最大值，则会返回infinity/ -infinity表示无穷大
// infinity是字面量，可以直接声明
var a = infinity;

// NaN也是Number类型，表示not a number
a = "abc" * "def"; //返回就是NaN

（3）Boolean 布尔值

var a = true;
//注意这里不要加引号，分清楚boolean 和 string

(4) Null 空值

专门用来表示为空的一个对象，只有null一个值，所以typeof检查的时候返回的是object。

（5）Undefined

声明一个变量但是不赋值的时候，这个变量的类型就是undefined。

(6)Object 引用数据类型

强制类型转换

（1）将其他的数据类型转换成sring

调用被转换类型的toString()方法

var a = 123;
//调用x的y方法 x.y()
var b = a.toString();
var a = a.toString();

*该方法不会影响到原变量，a仍然是数字类型，只会将执行结果返回，所以要写一个变量接收返回值

null/ undefined没有toString()方法，如果调用会报错

2. 调用String()函数，并将被转换的数据作为参数传递给函数

//转换谁就把谁写在括号里作为参数
a = String(a);

使用String()进行转换的时候，如果原变量是boolean/ number则会调用to. String()方法进行转换，但是对于null 和 undefined则会将null直接转换成"null"

（2）将其他数据类型转换为Number

1. 使用Number()函数

如果是纯数字的字符串，则可以直接转换成数字；如果字符串中有非数字内容，则转换成NaN；如果字符串是空串或者是一个全是空格的字符串，则直接转换成0。

如果是布尔值转换成数字，true转换成1，false转换成0。

Null— Number : 0

Undefined转换成Number是NaN

2. parseInt()/ parseFloat()函数专门转换字符串为数字

var a = "123px";
a = parseInt(a);
//使用parseInt()函数可以将字符串中有效的整数内容取出并转换为Number

var a = "123a987";
a = parseInt(a); //这里只会取出123，如果有小数点则会忽略小数点后的数字

//如果对非String使用parseInt()/ parseFloat()函数，会将其先转换成String再操作
var a = true;
a = parseInt(a); == a = parseInt("true"); //返回值都是NaN

#表示其他进制的数字

// 如果要表示16进制的数字则以0x开头
var a = 0x10; //返回16

// 如果要表示8进制的数字则以0开头
var a = 070; // 返回56

// 如果要表示2进制的数字则以0b开头，但是不是所有的浏览器都支持
var a = 0b10; // 返回2

//可以在parseInt()中传递第二个参数，来指定数字的进制
var a = parseInt(a,10); //指定a是10进制

（3）将其他数据类型转换为Boolean

使用Boolean()函数

// 除了0和NaN之外，Number转成Boolean都是true
var a = 0; // false
var b = infinity/ -infinity // true

// 除了空串，String转Boolean都是true
var a = ""; //false

// NaN和Undefined都是false