JavaScript

最新推荐文章于 2023-11-14 10:56:21 发布

敲木鱼_

最新推荐文章于 2023-11-14 10:56:21 发布

阅读量630

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_30075075/article/details/102579753

版权

这篇博客详细介绍了JavaScript的基础知识，包括JavaScript的组成（ECMAScript、DOM、BOM）、与HTML/CSS的关系、变量、数据类型转换、运算符、流程控制语句、数组、函数、匿名函数、变量作用域、面向对象等内容。还涉及到了BOM和DOM操作，如事件、节点操作和表单验证等。此外，提供了一些实用的小案例，如日历、定时器和倒计时等。

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

JavaScript基础

1. 什么是JavaScript

1. JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由    浏览器解释运行。
2. 是一种解释性脚本语言（代码不进行预编译）

2. JavaScript的组成

2.1 ECMAScript

1. JavaScript的语法标准
2. ECMA是一个组织，即欧洲计算机制造商协会
3. ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
4. JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容

2.2 DOM

JavaScript操作网页上的元素的API

文档对象模型（DOM），描述处理网页内容的方法和接口。

2.3. BOM

JavaScript操作浏览器的部分功能的API

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

3. JavaScript和HTML、CSS的关系

Html：是用来制作网页，简单来说就是编写网页结构
CSS： 美化网页（样式）
Javascript: 实现网页与客户之间互动的桥梁，让网页具有丰富的生命力

4. JS书写方式

4.1. 行内式

方式一 :
<button onclick="alert('今天天气很好！');">今天天气?</button>
方式二 :
<a href="javascript:alert('你点疼我了！！');">点我</a>

4.2. 页内式

</body>
      ......
     <script>
        alert("今天天气很好！");
     </script>
 </body>

注意事项:
	1. 网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
	2. HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。

4.3. 外链式

<script src="xxx.js"></script>

注意事项 :
	1. 外链式的script代码块中不能编写js代码, 即便写了也不会执行
	2. 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

5. 输出方式

5.1. alert

控制浏览器弹出一个警告框 :  
	<script>
        alert("Hello, World!");
    </script>

5.2. write

可以向body中输出一个内容:
	<script>
        document.write("Hello World!");
    </script>

5.3 . console.log

向控制台输出一个内容 :
	<script>
	console.log("Hello World!");
	console.warn("警告输出！"); 
	console.error("错误输出！"); 
    </script>

5.4. prompt

在网页中弹出输入框，一般用于接收用户输入的信息 :
	<script>
		prompt("Hello, World！"); 
    </script>

5.5. comfirm

在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用:
	<script>
	 comfirm("Hello，JavaScript！"); 
    </script>

6. JS 书写规范

1. 编写Javascript注意语法规范，一行代码结束后必须在代码最后加上:
		如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；此外，容易加错分号，所以在开发中分号必须要写。
2. 在JavaScript中是严格区分大小写的:
		comfirm("Hello，JavaScript！");   // 正确
		COMFIRM("Hello，JavaScript！");   // 错误 
3. JavaScript中会忽略多个空格和换行
		console.log( "Hello，JavaScript！" );

7. JS注释

// 单行注释
 /*多行注释*/

8.数据类型

定义变量

var 变量名=值;
var a = 1

查看变量类型

var 变量名
var (变量名)
typeof 变量名

1. 数字 - number

整数 var a = 1
小数 var b = 3.1415
保留(3位)小数 b.toFixede(3)  //3.152结果是字符串
数字和字符串显示的颜色不一样

2. boolean 布尔值

全部都是小写
ture : [] {} ...
false : undefined null NaN 0 ''

3. null 空和undefined未定义

null 表示空  boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false

4. 字符串 - string

var s1 = '单引号'
var s2 = "双引号"

string类型的常用方法

1. 属性 : 长度 :
	var s1 = 'asdfg'
    s1.length	// 5
2. 去除字符串空格 - 不能修改源数据
	var s2 = '   asdfg     '
    s2.trim()	// "asdfg"
3. 拼接字符串
	s1.concat(s2,'哈哈')
4. 给出索引查找出相应字符
	s1.charAt(1) // "s"
5. 给出字符查找相应索引 (默认从左向右第一个)
	s1.indexOf('s')	// 1
6. 切片取值 - 顾头不顾尾 可以负数,没有步幅
	s1.slice(0,2)  // "as"
7. 全部大/小写
	s1.toUpperCase() // "ASDFG"
	s1.toLowerCase()
8. 切割
	s1.split('d')  // (2) ["as", "fg"]
	
	var s3 = 'a,b,c,d,e,f,g'
	s3.split(',',3) // (3) ["a", "b", "c"]  只取前三个
9. charAt 获取相应索引对应的字符
<script>
    var str1 = '你好 哈偶'
    console.log(str1.charAt(1)) //好
    console.log(str1.charAt(3)) //哈
</script>
10. charCodeAt 获取相应索引对应的编码(Unicode)

9. 数据类型转换

9.1. 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()方法，如果强行调用,则会报错

 var num2 = undefined;
 var str2 = num2.toString(); // 报错
 console.log(str2 );

 var num3 = null;
 var str3= num3.toString(); // 报错
 console.log(res4);

 var num4 = NaN;
 var str4 = num4.toString();
 console.log(str4); // NaN
 console.log(typeof str4); // String

toString()不会影响到原变量，它会将转换的结果返回

 var num5 = 10;
 var str5 = str5.toString();
 console.log(typeof num5 ); // number
 console.log(typeof str5 ); // string

9.2. String()函数

有的时候, 某些值并没有toString()方法，这个时候可以使用String()。比如：undefined和null
- Number和Boolean的数据就是调用的toString()方法
- 对于null和undefined，就不会调用toString()方法, 因为没有这个方法, 会在内部生成一个新的字符串
- 任何数据和 + 连接到一起都会转换为字符串, 其内部实现原理和String()函数一样

   var num1 = 100;
   var res1 = num1 + "";
   console.log(res1); // 100
   console.log(typeof res1); // string

   var num2 = true;
   var res2 = num2 + "";
   console.log(res2); // true
   console.log(typeof res2); // string

   var num3 = undefined;
   var res3 = num3 + "";
   console.log(res3); // undefined
   console.log(typeof res3); // string

   var num4 = null;
   var res4 = num4 + "";
   console.log(res4); // null
   console.log(typeof res4); // string

9.3. Number()函数

字符串转数字

如果是纯数字的字符串，则直接将其转换为数字

var str1 = "666";
var res1 = Number(str1);
console.log(res1); // 666
console.log(typeof  res1); // number

如果字符串中有非数字的内容，则转换为NaN

var str2 = "itlike123";
var res2 = Number(str2);
console.log(res2); // NaN

如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

var str3 = "";
var res3 = Number(str3);
console.log(res3); // 0

var str4 = "    ";
var res4 = Number(str4);
console.log(res4); // 0

undefined 转数字

var str6 = undefined;
var res8 = Number(str6);
console.log(res8); // NaN

null 转数字

var str5 = null;
var res7 = Number(str5);
console.log(res7); // 0

布尔转数字 ( true 转成1 , false转成0 )

   var bool1 = true;
  var res5 = Number(bool1);
  console.log(res5); // 1

  var bool2 = false;
  var res6 = Number(bool2);
  console.log(res6); // 0

9.4. parseInt()函数和parseFloat()函数

	Number()函数中无论混合字符串是否存在有效整数都会返回NaN, 利用parseInt()/parseFloat()可以提取字符串中的有效整数
    parseInt()和parseFloat()的区别是前者只能提取整数,后者可以提取小数

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(""));        //空字符串返回NaN，Number("")返回0

10. js运算

10.1. 算数运算

1. 加法运算
		格式:  Number1 + Number2
			var res = 1 + 1;
console.log(res); // 2

var num1 = 10;
var num2 = 20;
var res2 = num1 + num2;
console.log(res2); // 30
		非Number类型的值进行运算时，会将这些值转换为Number然后在运算
			var result = true + 1;
console.log(result); // 2
result = true + false;
console.log(result); // 1
result = 2 + null; 
console.log(result);// 2
		任何值和NaN做运算都得NaN
			var result = 1 + NaN;
console.log(result); //NaN
		任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
			var result = 10 + "123";
console.log(result); // 10123
result = 1 + "true";
console.log(result); // 1rue


2. 减法运算
		格式: Number1 - Number2
			var res = 1 - 1;
console.log(res); // 0

var num1 = 10;
var num2 = 20;
var res2 = num1 - num2;
console.log(res2); // -10
		非Number类型的值进行运算时，会将这些值转换为Number然后在运算
		任何值和NaN做运算都得NaN
		字符串做减法也会转换为Number
			var result = 2 - "1";
console.log(result); // 1
result = "2" - "1";
console.log(result); // 1


3. 乘法运算
		格式: Number1 * Number2
			var res = 2 * 2;
console.log(res); // 4

var num1 = 10;
var num2 = 20;
var res2 = num1 * num2;
console.log(res2); // 200
		其它规律和减法一样
			非Number类型的值进行运算时，会将这些值转换为Number然后在运算
			任何值和NaN做运算都得NaN
			字符串做乘法也会转换为Number
            
            
4. 除法运算
		格式: Number1 / Number2
			var res = 5 / 5;
console.log(res); // 1

var num1 = 100;
var num2 = 200;
var res2 = num1 / num2;
console.log(res2); // 0.5
	其它规律和减法一样
			非Number类型的值进行运算时，会将这些值转换为Number然后在运算
			任何值和NaN做运算都得NaN
			字符串做乘法也会转换为Number
	取余运算
		格式: Number1 % Number2
		m%n 求余,相当于m/n 获取余数
			var res = 10 % 4;
console.log(res); // 2

var num1 = 10;
var num2 = 2.5;
var res2 = num1 % num2;
console.log(res2); // 0
			n等于0 返回NaN
			m等于0 结果为0
			m>n 正常求余 如:8%3 = 2
			m<n 结果是m 如:2%4 = 2
		其它规律和减法一样
			非Number类型的值进行运算时，会将这些值转换为Number然后在运算
			任何值和NaN做运算都得NaN
			字符串做乘法也会转换为Number

10.2 . 一元运算符

一元运算符 - 只需要一个操作数
正号
		+ 正号不会对数字产生任何影响
                var num = 123;
                num = +num;
                console.log(num); // 123
		对于非Number类型的值,会将先转换为Number，然后再运算
                var bool = true;
                var res = +bool;
                console.log(res

最低0.47元/天解锁文章

敲木鱼_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript基础1. 什么是JavaScript1. JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。2. 是一种解释性脚本语言（代码不进行预编译）2. JavaScript的组成2.1 ECMAScript1. JavaScript的语法标准2. ECMA是一个组织，即欧洲计算机制...
复制链接

扫一扫