JavaScript学习笔记(一)

初次体验js代码

既然之前学习了HTML和CSS，那么学习js肯定是必不可少的。

• HTML:将数据展示到网页上
• CSS：美化页面
• JavaScript：控制页面

那么js的代码可以分为三个地方写：

• 1.在html的文件中, script标签中写js代码

 <script>
        // js代码
        alert("锄禾日当午，地雷埋下土。"); // alert表示在页面中显示对话框
    </script>

• 2.js代码可以在html标签中写入–内嵌

<input type="button" value="按钮" onclick="alert('被电了');" />

• 3.在js文件中写入js代码，但是需要在html中引入, 方法：在script标签中的src属性写入js路径 src="js路径"

<script type="text/javascript" src="test.js"></script>

写js代码的注意问题

• 1 在一对script标签中又错误的js代码，那么后续的js代码不会执行.

<script>
	alert('嘿嘿'; //这里少一个反括号
            alert("嘎嘎");
</script>

运行程序可以发现程序并没有执行，也没有报错。

• 2.如果第一对的script标签中有错误，不会影响后面的script标签中的js代码执行

<script>
   alert('嘿嘿';
           alert("嘎嘎");
   </script>

   <script type="text/javascript">

       alert("这次我又回来啦");
   </script>

运行程序。

• 3 script标签中可以写什么内容，type="text/javascript"是标准写法或者写language=“javascript”，但是目前我们的html页面中，type和language都可以省略，原因：html是遵循h5的标准。
• 4.有可能会出现这种情况：script标签中同时出现type和language的写法

<script type="text/javascript" language="JavaScript">
        alert("偶买噶的");
    </script>

• 5.script标签可以在页面中出现多对
• 6 script标签一般是放在body标签的最后的，有时候会在head标签中。(建议放在body标签中)
• 7 如果script标签是引入外部js文件的中的js代码，那么就不要在往这个script标签中写入代码，应该重新写一对script标签，里面写代码.

变量

//表示单行注释，/**/ 在javascript中表示多行注释。
js中声明变量都用var—>存储数据，数据应该有对应的数据类型

/*
*
* js变量：
* 操作的数据都是在内存中操作
* js中存储数据都是使用变量的方式(名字，值--->数据)
*js中声明变量都用var--->存储数据，数据应该有对应的数据类型
*
* 存储一个数据10
* 变量的声明及赋值
* var num=10;
*
* 存储一个名字
* var name="小黑";
* */


/*
*
* 变量----作用，用来存储数据
* 变量声明（有var 有变量名字， 没有值）
*
* 变量初始化(有var，有变量名字， 有值)
*
* 变量声明方式
* var 变量名字
*
* */

变量声明

var number; // 变量的声明，此时是没有赋值的
var x,y,z,q,m; // 一次性声明多个变量，没有赋值

变量初始化

//    变量的初始化（变量声明的同时并且赋值了）
    //    存储一个数字10
        var number = 10;

        //    存储一个人的名字
        var name = "小红";

        // 存储真(true)
        var flag=true;

        // 存储一个null --- 相当于空
        var nll = null;

        // 存储一个对象
        var obj= new Object();

变量命名规范

/*
*
* 变量名的注意问题--- 变量名的命名规范，要遵循驼峰命名法。
* 1.变量的名字要有意义。
* 2. 变量名有一定的规范：一般以$，字母，下划线(_)开头，中间或后面可以有$，字母数字或下划线
* 3.变量名一般都是小写的
* 4.变量名如果是多个单词，第一个单词的首字母是小写的，后面的所有单词的瘦子谬是大写的
* 这种命名方式称为：驼峰命名法
* var bigNumber=10;
*
* 5.不能使用关键字（系统自带的一些单词，不能使用）
*
* */

既然我们已经能够声明一个变量，那么应该怎么将这个变量的值打印出来呢？
有两种方法

1. alert()：弹窗

var num = 10;
alert(num);

运行结果

2.使用console.log():控制台输出 ,可以在浏览器的开发者工具的console窗口中查看输出值

var num = 10;
console.log(num);

运行程序。

变量交换

这里局一个小例子，交换两个变量的值

第一种方法:

//    声明多个变量并且赋值
var number1 = 10, number2 = 20;

// 变量交换, 第一种方式，借助其它变量进行赋值
var temp = number1;
number1 = number2;
number2 = temp;
//    控制台输出
console.log("number1的值是", number1);  // 20
console.log("number2的值是", number2);  // 10

这里是借助了第三方变量来实现变量值交换, 控制台输出为

第二种方法：使用运算来交换变量

var number1 = 10;
var number2 = 20;

number1 = number1 + number2; // 30
number2 = number1 - number2;  // 10
number1 = number1 - number2; // 20
console.log(number1, number2)

控制台输出为：

数据类型

js中的原始数据类型：number, boolean, null, string, undefined, object.

• number: 数字类型(整数和小数)
• string：字符串类型(值一般是用单引号或双引号括起来的) “34”
• boolean: 布尔类型(值只有两个，true(真/1)和false(假/0))
• null: 空类型，值只有一个：null， 一个对象指向空了，此时可以赋值为null
• undefined：未定义，值只有一个：undefined
  • 什么样的情况下的undefined： var num;
• object:对象, 复杂数据类型，这里后续更新，暂不做讲解

声明数据类型

var num1 = 10;  // number类型
var str = "小明";  // string类型
var nll = null;  // object类型
var undef;  // undefined类型
var flag = true;  // boolean类型
var obj = new Object();  // object类型

查看变量类型的关键字 – typeof

用法： 1. typeof 变量 2. typeof(变量)
举例，控制台输出

console.log(typeof String(nll));  // string类型
console.log(typeof num1); // number
console.log(typeof str); // string
console.log(typeof undef);  // undefined类型
console.log(typeof flag);  // boolean类型
console.log(typeof obj);  // object类型

在控制台查看输出结果

数字类型

关于进制转换，这里只做一个简单的讲解。

/*
*
* 数字类型： 整数和小数
* num=20; 整数
*
* 二进制：逢2进一
*
* 八进制：逢8进一
*
* 十进制：就是普通的数字，现有的计算方式
*
* 十六进制：逢f进一
*
* js中可以表示哪些进制
*
* var num=10; // 十进制
*
* var num2=012; //八进制，10
*
* var number3=0x123 // 十六进制
* */
// var number3 = 0x1f;  //十六进制，31
// console.log(number3)

数字类型有范围： 最小值和最大值， 使用以下代码即可查看

console.log("最大值为",Number.MAX_VALUE); // 最大值
console.log("最小值为",Number.MIN_VALUE); // 最小值

不要用小数去验证小数，这句话是什么意思呢？在js中 0.1+ 0.2可不等于0.3，看完如下代码即可了解了

var x = 0.1;
var y = 0.2;
var sum = x + y;
console.log(sum); // 控制台输出值：0.30000000000000004
console.log(sum==0.3); // false

所以，不要用小数验证小数。

不要用NaN去验证NaN

var num; // 标量声明了，没有赋值，结果是undefined
var sum=num+10;
console.log(sum); // NaN
console.log(typeof sum); // 类型为number类型
console.log(sum==NaN); // false

// 使用isNaN()来判断
console.log(isNaN(sum)); // false

//是不是一个数字-->不是一个数字吗？ NaN --> 不是一个数字
console.log(isNaN(10)); // false

var str = "你好";
console.log(isNaN(str)); //true
// 不是数字的为true， 是数字的为false。

总结

数字类型：Number类型
 * 无论是整数还是小数都是数字类型
 * 不要用小数验证小数
 * 不要使用NAN验证NAN，应该使用isNaN(值/变量名)来判断
 * 想要表示十进制：就是正常的数字
 * 想要表示八进制：0开头
 * 想要表示十六进制：0x开头

字符串类型

// 定义一个字符串

var str = "10"; // 字符串
var str2 = '20'; // 字符串
console.log(str + str2) // 1020, 字符串拼接

// 字符串可以使用单引号，也可以使用双引号。

查看字符串的长度 – .length

var str = "窗前明月光，疑是地上霜，举头望明月，低头思故乡";
// 查看字符串的长度，length
console.log(str.length);

转义符

// html中的转义符，> > < < 空格  

// js中的字符串里也有转义符
// tab键 -- 水平制表符
console.log("hello\tworld"); // \t,水平制表符
console.log("欧买\"噶的"); // \"表示一个双引号
console.log('欧买\'噶的'); // \'表示一个单引号
console.log("欧买\\噶的"); // \\ 表示一个\
console.log("欧买\r噶的"); // \r表示回车
console.log("欧买\n噶的"); // \n表示换行

控制台输出结果

字符串拼接

/*
*
* 字符串的拼接， 使用+可以把多个字符串放在一起形成一个字符串。
* 只要游曳哥是字符串，其他的是数字，那么结果也是拼接，不是相加
* 如果有一个是字符串，另一个不是字符串，使用 - 号， 此时会发生计算
* 浏览器会帮助我们自动的把字符串类型转换成了数字类型，这种方式叫做：隐式转换
*
* */

举例

var str1 = "您好";
var str2 = "我好";
console.log(str1 + str2); // 您好我好

//    特殊情况的字符串拼接
var str1 = "10";
var str2 = "20";
console.log(str1 + str2); // 1020

//    如果一方为数字字符串，一方为数字，将两边拼接呢？
var str1 = "10";
var str2 = 5;
console.log(str1 + str2); // 字符串类型， 105

//    如果一方为数字字符串，一方为数字，将两边相减呢？
var str1 = "10";
var str2 = 5;
console.log(str1 - str2); // 数字类型 5


//    如果一方为数字字符串，一方为数字，将两边相乘呢？
var str1 = "10";
var str2 = 5;
console.log(str1 * str2); // 数字类型 50

布尔类型 – Boolean

布尔类型：值有两个，一个是true， 一个是false， 计算机内部存储： true为1， false为0

其它类型转换为布尔类型，使用Boolean()方法.

// 其它类型转布尔类型, 使用Boolean(值)方法即可
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean(10)); // true
console.log(Boolean(-10));  // true
console.log(Boolean("哈哈")); // true
console.log(Boolean(""));  // false
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false``

类型转换

这里我将答案都写在注释后面了，所以就不做过多介绍了

其它类型转数字类型

// 其它类型转数字类型 ：三种方式
// 1.parseInt: 转整数
console.log(parseInt("10")); // 10
console.log(parseInt("10a")); // 10
console.log(parseInt("g10")); // NaN
console.log(parseInt("1ad0")); // 1
console.log(parseInt("10.98")); // 10
console.log(parseInt("10.98ad")); // 10

// 2.parseFloat, 转小数类型
console.log(parseFloat("10")); // 10
console.log(parseFloat("10a")); // 10
console.log(parseFloat("g10")); // NaN
console.log(parseFloat("1ad0")); // 1
console.log(parseFloat("10.98")); // 10.98
console.log(parseFloat("10.98ad")); // 10.98

// 3.Number：转数字
console.log(Number("10")); // 10
console.log(Number("10a")); // NaN
console.log(Number("g10")); // NaN
console.log(Number("1ad0")); // NaN
console.log(Number("10.98")); // 10.98
console.log(Number("10.98AD")); // NaN

// 总结：想要转换为整数，用parseInt方法，想要转换成小数，用parseFloat方法
// 想要转数字，用Number方法，要比上面两种方式更加严格

其它类型转字符串类型

其它类型转字符串类型，有两种方法

1. .toString(): 转化为字符串
   举例：

var str1 = 10;
console.log(str1.toString()); // 字符串类型

2. String():

var str2 = 20; // 数字类型
console.log(String(str2)); // 转化为字符串类型

那么以上两种方式有什么不一样呢？下面说说它们俩的区别

• 如果变量有意义，就用.toString()转换.
• 如果变量没有意义，可以使用String()转换.

运算符

运算符比较简单，下面是一些说明

 /*
*
* 操作符： ---- 一些符号--- 用来计算
*
* 算数运算符： + - * / %(取余数)
* 算数运算符表达式： 由算数运算符组成的表达式
* 一元运算符： ++ -- ！
* 二元运算符：这个操作符需要两个操作数就可以运算
* 三元运算符: （条件）? 表达式1: 表达式2
* 赋值运算符：= += -= /= %= *=
* 关系运算符：>、<、 >=、 <=、==、 ===、 !=、 !==
* 逻辑运算符: && -->与 || -->或 ! --> 非
* 逻辑运算符的值都为布尔类型
* */

这里挑几个重要的来举例把

// 算数运算符 % 举例
var num2 = 20;

// 逻辑运算符举例， == 表示不严格相等，===表示类型和值都相等
var num = 10;
console.log(num + 10 === 20 && 5 >= 3); // 表示num+10 等于20并且5大于等于3. 结果为true

// 关系运算符 == 举例
var num1 = "20"; // 字符串类型
console.log(num1 == 20); //"==" 不严格相等，表示值相等，但是类型不相等， 结果为true

// 三元运算符举例, 如果余数为0，则为true， 否则为false
var even = (11 % 2 === 0) ? true : false;// 表示如果11/2的余数为0，even的结果为true，反之为false， 这里为false
console.log(even)

// 赋值运算符举例
var num3 = 30;
num3 += 3; // 相等于 num3 = num3 + 3;
console.log(num3) // 结果为33

目前就写到这里吧，后面会继续更新的。