JavaScript简单基础知识_javascript中能实现单数输入的是-CSDN博客

本文链接：https://blog.csdn.net/qq_49547215/article/details/121408598

前言

这是个人对于JavaScript的简单理解，也许能帮助对于JavaScript的理解

提示：文章中对于JavaScript简称为js

一、js中输出方法

1.alert（）

alert方法是使用弹出警告框来显示数据，可以在函数中单数使用alert()来生成弹出警告框。

<body>
</body>
<script>
windows.alert(123);
//将会一弹窗的方式对123进行输出
</script>

2.document.write()

可以将内容直接写在HTML文档中

<body>

</body>
<script>
document.write(123);
//会在HTML文档中显示123;
</script>

注意：使用document.write()仅仅想文档输出写内容，如果在文档已完成加载后执行document.write()，这个HTML页面将会每覆盖。

3.console.log()

向控制台进行输出
可以在浏览器中按F12在控制台中进行查看

<body>
</body>
<script>
console.log(123)
</script>

这个方法时候前端工程师对代码进行调试的时候使用。

4.document.getElementById(Id)

使用document.getElementById(id).innerHTML使用Id属性来表示HTML元素，并使用innerHTML来获取或插入元素内容。
使用innerHTML，会对id元素内的内容进行修改，原有的HTML内容将不会显示。

<body>
<p id="demo">12</p>
</body>
<script>
document.getElementById("demo").innerHTML = 456;
</script>

在最后显示时，P标签内的内容会显示为456，而不是123

二、js中输入方法

使用表单控件进行输入
使用getElementById()方法获取输入

<body>
<input id="demo" type="text">
<input id="btn" type="button" value="点击" onclick="myFunction">
</body>
<script>
//使用getElementById方法得到输入
function myFunction(){
	var temp = document.getElementById("demo").value;
	//对得到的输入使用alert方法进行弹窗输出
	windows.alert(temp);
}
</script>

三、常见的HTML事件

事件	触发条件
onclick	用户点击HTML元素
onmouseover	用户在一个HTML元素上移动
onmouseout	用于从一个HTML元素上移开鼠标
onload	浏览器完成页面的加载

一般我们都会使用onclick时间来调用函数
例如

<body>
<!--当点击按钮的时候会触发onclick时间，从而调用myFunction_1函数-->
<input type="button" onclick="myFunction_1" vlaue="点击"/> 
</body>
<script>
	function myFunction(){
		//函数执行的内容
		......	
	}
</script>

四、变量

1.变量类型

变量	例子
6种同的数据类型	string、number、boolean、object、function、symbol
3种对象类型	object、Date、Array
2种不包含任何值的数据类型	undefined、Null

声明变量的类型，当想要为变量声明类型时，使用关键词"new"来声明其类型

<script>
	var x = new Array;
	var y = new boolean;
</script>

在javascript中变量可以在使用后声明——先使用后声明。

<body>

</body>
<script>
	x = 5;//设置变量
	element = document.getElementById("demo");
	elemenr.innerHTML = x;
	var x;//后声明
</script>

2.得到变量的类型

1.typeof

<script>
	//通过typeof方式可以得到变量类型
	typeof 变量; 
</script>

使用typeof来得到Date和Array会返回object所以无法判断Date和Array的类型。

2.constructor

使用constructor属性返回所有javascript变脸的构造函数，因此可以使用constructor来查看对象是否为Array和Date。

<script>
	var n=3.14;
	n.constructor;
</script>

3.数组

定义数组几种简单的方法
方法一：

<body>
</body>
<script>
	//先定义数组，之后在对数组内的元素进行赋值
	var cars = new Array();
	cars[0] = "A";
	cars[1] = "B";
	cars[2] = "C";
	......
</script>

方法二：

<body>
</body>
<script>
	//可以在定义的时候对数组进行赋初值
	var cars = new Array("A","B","C",.....)
</script>

方法三：

<body>
</body>
<script>
	//可以不用定义数组自己写赋值结果，HTML也会将他赋值成数组
	var cars = ("A","B","C",......)
</script>

4.对象object

对象一般由属性和方法构成。
对象的一般定义

<script>
	//定义一个对象
	var objectName = {
		//定义对象的属性
		key_1:"value_1";
		key_2:"vlaue_2";
		key_3:"vlaue_3";
		//定义对象的方法
		methodName_1:function(){
			......
			}
	}
</script>

对象的属性和对属性的赋值里可以利用键值对的方式进行记忆。
访问对象属性：

<script>
	//第一种方式
	objectName.key_n;
	//第二种方式
	objectName["key_n"];
</script>

访问对象的方法

<script>
	objectName.methodName()
</script>

javascript中一切变量均为对象

5.undefined和null

undefined	Null
undefined表示变量不含有值	null表示一个空对象引用

可以通过将变量的值设置为null来清空变量。null和undefined的值相等，但类型不等。

6.变量的范围

如果向为声明的javascript变量分配值，该变量将会自动作为windows的一个属性。

如果变量在函数内没有声明（没有使用var关键字），该变量为全局变量——javascript的全局变量。

在HTML中，全局变量是windows对象：所有数据变量都属于windows对象。

五、if、switch、for、while

1.if语句

<script>
	if(condition){
	//当条件成立时执行的代码
	......
	}
</script>

2.switch语句

<script>
	switch(n){
		case 1:
			执行代码块1;
			break;
		case 2:
			执行代码块2;
			break;
		case 3:
			执行代码块3;
			break;
		......
	}
</script>

3.for循环

<script>
	for(var i=0; i<10; i++){
		//循环体
		......;
	}
</script>

4.for/in循环

for/in一般用于循环遍历对象的属性

<script>
	for(x in person){
		//循环体
		......;
	}
</script>

5.while循环

<script>
	while(condition){
		//需要循环执行的代码
		......;
	}
</script>

错误——try、catch、finally、throw

try和catch是成对出现的

<script>
	try{
		//异常的抛出
		adddlert("Welcome guest!");
	}cache(err){
		//err是这一种错误类型可以用于输出
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
</script>

finally语句不管之前的try和catch是否会发生异常都会执行代码块

<script>
	try{
		//异常的抛出
		......;
	}catch(err){
		//err是这一种错误类型可以用于输出
		......;
	}finally{
		//执行的代码块
		......;
	}

</script>

throw语句允许我们常见自定义错误

<script>
	try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
    	//在对错误进行输出的时候，此时如果err满足在try中的throw，则err错误会变成throw中定义的错误
        message.innerHTML = "错误: " + err;
    }
</script>