JavaScript学习笔记(一)

最新推荐文章于 2021-10-19 17:04:46 发布
最新推荐文章于 2021-10-19 17:04:46 发布
阅读量564 收藏 7
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45020131/article/details/105932764
版权

初次体验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中的转义符，> &gt; < &lt; 空格 &nbsp;

// 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()); // 字符串类型
  1. 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

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

mr.ocean
关注
专栏目录
JavaScript学习笔记
11-13
JavaScript学习笔记JavaScript学习笔记
JavaScript学习知识点总结
最新发布
m0_73672948的博客
08-02 537
js基础知识点
javascript学习笔记
11-24
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端运行，无需专门的编译步骤，而是由浏览器实时解释执行。这种解释型的特性使得JavaScript轻便且灵活，能够快速响应用户交互，提升Web应用程序的动态...
JavaScript学习笔记（一）
01-08
JavaScript学习笔记（一）主要介绍了JavaScript的基本概念、历史以及快速入门知识，包括如何引入JavaScript、基本语法、数据类型和严格模式。以下是对这些知识点的详细解释： 1. **JavaScript概述**： JavaScript...
Javascript学习笔记
PaddyH's Corner
10-19 856
Javascript学习笔记，供查阅。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值