JS基础-01

onlyucanconquertime

已于 2023-02-24 22:38:23 修改

阅读量44

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2023-02-24 13:55:34 首次发布

本文链接：https://blog.csdn.net/m0_51509441/article/details/129196062

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. HelloWorld.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript" src="js/script.js">
            // 引入外部js文件，推荐使用
            // 好处：外部文件可以在不同的页面中被引用，也可以利用到浏览器的缓存机制
            // 只要使用了引入外部文件，就不能在写代码，写了浏览器也会忽略；
            // 要写只能再写多一个,JS代码由从上到下执行


            /* 基本语法
            * 1. JS严格区分大小写
            * 2. JS中每一条语言以;结尾
            *       -如果不写,浏览器会自动添加,但是会消耗系统资源;
            *        而且有些时候浏览器回家错分号
            * 3. JS忽略多个空格和换行,可借此进行美化处理
            */

            /* 标识符
            * 1. 只能以字母数字,下划线,$构成
            * 2. 不能以数字开头
            * 3. 不能使用JS关键字和保留字
            * 4. 一般使用驼峰命名法
            * 5. 使用unicode编码,能识别使用utf-8的所有内容,但是一般只用英文
            */
            
        </script>
        


        <script type="text/javascript">
        
        /*

        //将代码写在script标签文件中，或者外部js文件
            
        // 三条输出语句
 
        alert("Hello World")
        //弹窗

        document.write("加油！")
        //在网页body中输出一个内容

        console.info("kkk first try!")
        //向控制台输出内容

        // windows.alert("Hello World");   --错误

        */


        // 声明变量使用var;
        var a,b=98;
        a=10;
        a=123;
        // 没赋值的话不能用
        console.log(a,b);

        </script> 
    </head>
    <body>

        <!-- 可以写在标签中，但是属于结构与行为耦合，不推荐使用，难以维护--> 
        <!-- 将js代码写入button，点击button才执行 -->
        <button onclick="alert('JS-Button');">点我一下1</button>

        <!-- 将js代码写入href，点击button才执行 -->
        <a href="javascript:alert('JS-Href');">点我一下2</a>
        <a href="javascript:;">点我一下3</a> 

    </body>
</html>

2. script.js ——外部JS文件（放置在js文件夹下）

alert("Hello World 引入外部JS文件")

3. 基本数据结构

string
number：可以表示整数与浮点数；2进制浮点数以分数表示，不准确；NaN与Infinity是数值的字面量，表示非数与无穷；typeof 参数，检测某个值的类型。
boolean：只有两个值：true false
null：表示一个空对象

	var a = null;
    console.log(typeof a); //结果为object

undefined：已经声明的变量未赋值则成为undefined

 	var a;
    console.log(typeof a);//结果为undefined

4. 强制类型转换

string
两种办法：a.toString()，String()
1.1 toString只能用于对象，因此null和undefined无法调用；
2.2 String()对于Number, String, Boolean来说会调用底层的toString()方法，对于null和undefined会直接进行转换。

number
三种方法：Number(), parseInt(), parseFloat()
2.1 Number()：对于字符串来说如果只包含数字，直接转换成数字，如果包含非数字转换成NaN，如果是"“或者” "则转换成0；对于boolean值，true转换成1，false转换成0；对于null，转换成0；对于undefined，转换成NaN。
2.2 parseInt()：首先将所有内容转换成字符串再开始解析；从左到右依次解析，需要非整数直接舍去，第一位非整数返回NaN。
2.3 parseFloat()：与parseInt()相似，只是遇到第一位小数点不会忽略会转换成小数，其余与之相同。

boolean
一种方法：Boolean()
3.1 对于数字：只有0跟NaN会转换成false；
3.2 对于字符串：只有""会转换成false
3.3 对于null和undefined，只会转换成false

5. 进制

16进制在数字前加0x；
8进制在数字前加0；
2进制在数字前加0b，但是某些浏览器无法解析2进制如IE浏览器，同时也不常用。

	var a=123; // 123 10进制
	
	a=0x10; // 16 16进制

	a=070; // 56 8进制

	a=0b10 // 2(某些浏览器中才能识别) 2进制

	var a = "070";
	console.log(a); // 输出 56/70，根据浏览器不同可能会不同
	
	//解决方法：
	var a="070";
	a=parseInt(a,10);  // 指定为10进制
	// a=parseInt(a,8);  // 指定为8进制
	console.log(a);

6. 运算

运算符：typeof，+，-，*，/，%
一元运算符，只需要一个操作数，包括+，-，++，–；(++与-- 特性相同)

	var a=123;
	a = +a; // 123 '+'不对数值造成影响
	a = -a; // -123 '-'对数值进行符号取反

	// 对与非Number类型，会强制进行转换成Number值，再进行取'+'/'-'
	a = true; // Boolen值
	a = -a; // Number值，-1

	var result = 1 + "2" + 3; // 123
	result = 1 + +"2" + 3; // 6
	
	// ++特性：
	// 后++：a++；前++：++a
	// 同：都自增1
	// 不同：后++返回原值，前++返回新值
	a = 1;
	console.log(a++); // 1
	console.log("a = "+a); // a = 2

	a = 1;
	console.log(++a); // 2
	console.log("a = "+a); // a = 2

	var d=20;
	resule = d++ + ++d + d; // 20+22+22

	d=20;
	d = d++; //20 
	// 等价于 e=d++, d=e

逻辑运算符：！（对布尔值取反），&&（一假则假），||（一真则真）

	//从前到后检查，&&遇到flase停止
	true&&alert("kk"); // 出现kk弹窗
	false&&alert("kk"); // 不出现kk弹窗
	
	//从前到后检查，&&遇到true停止
	true&&alert("kk"); // 不出现kk弹窗
	false&&alert("kk"); // 出现kk弹窗

	//对于非布尔值，先将其转换为boolean值再进行运算，并且返回原值
	// 与运算：如果两个值有false，返回靠前的false; 都为true，则返回后面的；
	result = 0 && 2; // 0
	result = 2 && 0; // 0
	result = 0 && NaN; // 0
	result = NaN && 0; // NaN
	result = 5 && 6; // 6
	//或运算：如果两个值有true，返回靠前的true; 都为false，则返回后面的；
	result = 1 || 2; // 1
	result = 1 || NaN; // 1 
	result = NaN || 1; // 1

赋值运算符: =, +=, -=, /=, *=

关系运算符: <, >, <=, >=
规则：有一方为number值时，将非number值转换成number值再进行比较； NaN与任何值进行任何比较结果都为false，包括NaN本身；当两方都为string时，按位比较字符编码，因此在两者都为string类型值为数字时进行比较，结果可能不符合预期，可应用于英文名字的排序；

相等运算符：==, !=, !==, ===
!=, ==: 两者类型相同时判断是否相等，类型不同时进行类型转换再判断是否相等，转换成哪种类型无法确定；由于undefined衍生于null，因此两者相等；NaN与任何值进行运算结果都为false，包括自己。
===, !==：除不进行类型转换外，规则与==, !=类似；当两者类型不同时，===直接返回false，!==直接返回true；undefined与null在这种运算符下不相等；NaN与任何值进行运算结果都为false，包括自己。
unicode编码: 在JS中使用时在编码前加\u编码;（16进制）对编码进行转义输出; 在HTML中使用时以 &#编码;（10进制） 的格式输出。

其余三元运算符，逗号，条件判断语句（if, else, switch, break, continue, while, do{}while(), for）与c++相同。