JavaScript 基础_<script>console-优快云博客

本文深入探讨JavaScript的基础概念、组成、使用方法、数据类型、运算符、数据转换及应用实例，结合HTML实现计算两个文本框的和，提供完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是JavaScript的的诞生史，这个就先省略吧。

JavaScript的是基于对象和事件驱动，并具有安全性能的客户端脚本语言。是一种专为与网页交互而。

1.JavaScript的组成

JavaScript由三部分组成：ECMAScript（核心）DOM（文档对象模型）BOM（浏览器对象模型）

2在HTML中使用JavaScript有以下几种方法：

2.1。事件定义式（在HTML标签中直接嵌入JS代码（用的少））

<div id ='div1'onclick ='alert（“你好”）'>点击</ div>

2.2。标签嵌入式（在html文件中嵌入<script>标签，在标签中放置javascript代码。）
<script> </ SCRIPT>

2.3。文件调用式（将JavaScript的代码写入一个单独的JS文件，然后在HTML页面进行引用。）

<script src =“a.js”> </ script>

在JavaScript中的注释分两种
//单行注释
/ ** /多行注释

3变量的命名

变量的英文由数字，字母，下划线（_）和美元符号（$）的一种或者几种组成，且不能以数字开头，严格区分大小写。不能使用关键字

4 JavaScript数据类型

数值，字符串，布尔，未定义，为null，对象

//1.数值类型  number
    var num3 = -10;                //通过typeof来检测一个变量的类型
			           //alert(typeof num3);
//2.字符串类型  string              成对的单引号或者双引号引起来的一串字符
//3.布尔类型  boolean               true false
//4.undefined                    类型就一个值 undefined 
    var un1;                    //console.log(typeof un1,un1);//定义了未赋值
			        //console.log(un2);//未定义，报错
//5.null类型 一个值 null    	//var person = null;
                                //以上5种类型称为基本数据类型
//6.对象类型 object          复合类型
			var student = {
				name:"john",
				age:20,
				score:[100,100]
			}

5算术，赋值，关系运算符

算术运算符

+ - * /％

赋值运算符

= + = - = * = / =％=

关系运算符

> <> = <= ==！= ===！==

console.log("1"==1,"1"===1); //  true   false
//第一个为等于比较，第二个为全等比较(类型一致+数值一致)

6数据转换

分为显式转换和隐式转换

显式转换：Number（）//转换为数字

String（）//转换为字符串类型

Boolean（）//转换为布尔类型

console.log(Boolean(""),Boolean(" "),Boolean(1),Boolean(0),Boolean(undefined),Boolean(null),Boolean("abc"),Boolean(10))
			//false  true  true  false false  false  true true

ParseInt（）//转换为整数（碰到非数字样式即停止）

Parsefloat（）//转换为小数（碰到非数字样式即停止）

隐式转换（自动转换）

加法运算中，如果有一个操作值为字符串类型，则将另一个操作值转换为字符串，最后连接起来。

乘除，减，取余运算符，如果操作值之一不是数值，则被隐式调用号码（）函数进行转换。

<script>
			console.log(16-"5");//11
			console.log(5-"a");//NaN
			console.log(5-NaN);//NaN
			console.log(5-null);//5
			console.log(5-undefined);//NaN
			console.log(5-5);//0
			console.log(5-true);//4
			console.log(5-"true");//NaN
			console.log(5-"");//5
			console.log(16+"5");//165
			console.log(5+"a");//5a
			console.log(5+"NaN");//NaN
			console.log("两个数的和是"+5+5);//55
			console.log("两个数的和是"+(5+5));//10
			console.log("26">"5")//false
			console.log(5<"a")//false
			console.log(5>=NaN)//false
			console.log(5<NaN)//false
			console.log(5>="true")//false
			console.log(5>="")//true
		</script>

输出显示内容的方法：1.window.alert（）//出现在警告框

2.document.write（）//在页面中写入

3.console.log（）//出现在调试台

（写了这么久的写到这里，然后......电脑蓝屏了，强制关机再重启，内心是崩溃的，以为这么久的努力付诸东流，登上来一看居然在草稿箱里，必须要点个赞了）

课堂练习：计算两个文本框的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算两个文本框的和</title>
	</head>
	<body>
		<input type="text" id="text1" value="" /> +
		<input type="text" id="text2" value="" /> =
		
		<input type="text" id="text3" value="" />
		<input type="button" id="btn" value="计算" />
		<script>
			btn.onclick=function(){
				var val1=Number(text1.value);
				var val2=Number(text2.value);
				var val3=val1+val2;
				text3.value=Number(val3);
			}
		</script>
	</body>
</html>

第一次写东西，明天继续。