1. 书写格式
行内式
<button onclick="alert('今天天气很好！');">今天天气很好！</button>
页内式
</body>
......
<script type="text/javascript">
alert("今天天气很好！");
</script>
</body>
页内式注意点:
- <script></script>标签中的js代码一半写在文档的尾部；
网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素); - HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。所以如果把js代码如果写在head中, 那么js代码执行完毕之前后续网页无法被加载。
外链式格式
<script type="text/javascript" src="01-js书写格式.js"></script>
外链式注意点
- 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="index.js">
alert("今天天气很好！"); // 不会被执行
</script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。
2, 网页弹框——alert
<script>
alert("Hello，JavaScript！");
</script>
3. 控制台输出——console
<script>
console.log("Hello，JavaScript！");
console.warn("警告输出！");
console.error("错误输出！");
</script>
4. 接收用户输入——prompt
<script>
prompt("Hello，JavaScript！");
</script>
5. 提示/验证框——confirm
<script>
comfirm("Hello，JavaScript！");
</script>
6. 注释
- 单行注释
//单行注释
- 多行注释
/*多行注释*/
var name;
7. 变量
使用var定义变量，定义后如果没有初始化(赋值)就输出的话会抛出未定义的错误，
- 关键字不能用作变量名、函数名，保留字也建议不要用作函数、变量名
一般关键字
image.png
保留字
image.png
8. 标识符?
在JS中所有的可以由我们自主命名的都可以称为是标识符
比如变量名、函数名、属性名都属于标识符
var name; # 这里的name就是标识符
- 命名一个标识符时需要遵守如下的规则：
- 标识符中可以含有字母 、数字 、下划线_ 、$符号
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留字
- 严格区分大小写，比如name和Name是2个不同的标识符
- 标识符一般都采用驼峰命名法
- 首字母小写，每个单词的开头字母大写，其余字母小写如：helloWorld xxxYyyZzz
- JS底层保存标识符时实际上是采用的Unicode编码 , 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。
9. 数据类型
image.png
1. JS中如何查看数据类型?
typeof 操作符 -> 会将检查的结果以字符串的形式返回给我们
console.log(typeof 100); // number
var name = "旋之华";
console.log(typeof name ); // string
注意
- 在JS中所有的数值都是Number类型(整数和小数)
- 由于内存的限制，ECMAScript 并不能保存世界上所有的数值，超过了最大值就会返回Infinity，超过了最小值就会返回-Infinity
- NaN 非法数字（Not A Number）
JS中当对数值进行计算时没有结果返回，则返回NaN - 字符串中相同引号不能嵌套，不同引号可以嵌套
- 布尔型只能够取真（true）和假（false）两种数值, 也代表1和0，实际运算中true=1,false=0
2. Null和Undefined
Undefined这是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined
var num;
console.log(num); //结果是undefined
undefined是Undefined类型的字面量
前者undefined和10, "abc"一样是一个常量,后者Undefined和Number,Boolean一样是一个数据类型,需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。
var str1 = undefined;
console.log(typeof str1 ); //结果是undefined
var str2;
console.log(typeof str2); //结果是undefined
Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null
从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object
var test1= null;
console.log(typeof test1);
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true
var str1 = null;
var str2 = undefined;
console.log(str1 == str12);
console.log(str1=== str2);
3. 数据类型转换
将其它类型的数据转换为字符串类型——toString()
var num = 12306;
var str= num .toString();
console.log(str); // 12306
console.log(typeof str); // string
var num1 = true;
var str1 = num1.toString();
console.log(str1 ); // true
console.log(typeof str1 ); // string
- null和undefined没有toString()方法，如果强行调用,则会报错，对于这些不能调用toSting的 值可以使用String()进行转换
- toString()不会影响到原变量，它会将转换的结果返回
转换为数字—— Number()
- 如果是纯数字的字符串，则直接将其转换为数字
- 如果字符串中有非数字的内容，则转换为NaN
- 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
- 对于布尔类型，true 转成 1, false 转成 0
parseInt()函数和parseFloat()函数
- Number()函数中无论混合字符串是否存在有效整数都会返回NaN, 利用- 2. parseInt()/parseFloat()可以提取字符串中的有效整数
- parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数
parseInt()提取字符串中的整数
- 从第一位有效数字开始, 直到遇到无效数字
- 如果第一位不是有效数字, 什么都提取不到, 会返回NaN
- 第一个参数是要转换的字符串，第二个参数是要转换的进制
var str7 = "300px";
var res9 = parseInt(str7);
console.log(res9); // 300
var str8 = "300px250";
var res10 = parseInt(str8);
console.log(res10); // 300
console.log(parseInt("abc123")); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt(""));
parseFloat提取字符串中的小数
- 会解析第一个"." 遇到第二个"."或者非数字结束
- 如果第一位不是有效数字, 什么都提取不到
- 不支持第二个参数，只能解析10进制数
- 如果解析的内容里只有整数，解析成整数
var str9 = "20.5px";
var res11 = parseInt(str9);
console.log(res11); // 20
var str10 = "20.5.5.5px";
var res12 = parseFloat(str10);
console.log(res12); // 20.5
- 对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作
var str11 = true;
var res13 = parseInt(str11); // 这里相当于parseInt("true");
console.log(res13); // NaN
var res14 = Number(str11);
console.log(res14); // 1
注意点
JavaScript中是严格区分大小写的
一行代码结束后必须在代码最后加上;
如果不写分号除了多行注释之间外，其余两者注释皆可彼此嵌套使用(只有多行注释与多行注释不能嵌套)
参考
网易云js课程
