JavaScript基础（学习笔记一）

最新推荐文章于 2024-07-13 15:45:29 发布

CccooY

最新推荐文章于 2024-07-13 15:45:29 发布

阅读量336

点赞数

文章标签： JavaScript入门学习笔记

本文链接：https://blog.csdn.net/Chengcy98/article/details/100326853

版权

本文介绍了JavaScript的基础知识，包括ECMAScript、DOM和BOM。JavaScript是一种解释性、基于对象和事件驱动的脚本语言，常用于网页交互。文中详细讲解了JavaScript的三种弹框、变量声明、数据类型以及函数的声明方式。此外，还讨论了事件处理、Window对象、History和Location对象在BOM中的作用。

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

1. 什么是JavaScript

JavaScript是一种描述语言，基于对象和事件驱动的脚本语言。

特点：

脚本语言（一种轻量级的编程语言）
一种解释性语言（无需预编译）
被设计为向HTML页面添加交互行为
运行于客户端

1.ECMAScript

ECMAScript定义了脚本语言的所有属性、方法和对象
包括语法、类型、关键字、保留字、运算符、对象等
除了JavaScript外，同时也是Nombas的ScriptEase和
Flash脚本ActionScript的基础

2.DOM（Document Object Model 文档对象模型）

HTML和XML的应用程序接口（API）
把整个页面规划为层级式的节点结构

3.BOM（Broswer Object Model 浏览器对象模型）

可对浏览器窗口进行访问和操作
包括
弹出新的浏览器窗口
移动、关闭浏览器窗口及调节浏览器窗口大小
获取用户屏幕分辨率的屏幕对象
WEB浏览器详细的定位对象
对象举例
Window对象
Navigator对象
Screen对象
History对象
Location对象

JavaScript的三种弹框

<script type="text/javascript">
	// 1.  alert弹框
	alert("你好 alert");   //注意alert有一个特性！
	// 浏览器处于阻塞状态 代码在alert这个位置停止并等待

	//  2.prompt    prompt框具有返回值,返回的是string数据类型
	var userName = prompt("请输入用户名称：",666);   //接受2个参数，第一个是提示字符，第二个是输入框默认的值
	alert(typeof userName);
	
	//  3. confirm 确认框  返回的是布尔值的true或者false
	var flag=confirm("确定提交吗？");
	alert(flag);

</script>

js经常使用console.log()来debug进行代码调试

### JavaScript的变量 1、由于 JavaScript **对大小写敏感**，变量名也对大小写敏感（y 和 Y 是两个不同的变量） 2、变量**必须以字母或下划线或美元符$开始** ，不能使用关键字作为变量名

变量的声明

JavaScript中变量的声明是通过 var 关键字来声明的不用指定数据类型

//通过var关键字来声明
var str = "JavaScript" ;
//当然也可声明多个，之间用逗号隔开
var num =10 ,  str = "JavaScript" ;      //声明多个用第二种效率高
//省略 var 语句，直接变量声明
num = 100; //相当于window.num= 100; （不推荐）

建议先定义后使用

‘+’ 运算符用于把文本值或字符串变量加起来（连接起
来），如果是两个数字则为数学运算加号

‘=’ 运算符用于给变量赋值，变量可以重复赋不同类型
的值

var 声明的变量只有在函数体内能用跟局部变量很像在最外层使用var声明变量则可以作为全局变量等同于不用关键字声明 b=5;

JavaScript的数据类型

在这里插入图片描述

注意：当你声明了一个变量的时候， js自动赋值undefined

typeof 关键字

typeof检测变量类型的返回值

undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
function：函数方法
object：对象 或 数组 或 Null 类型

转换函数
parseInt():字符串转换为整数
parseFloat():字符串转换为浮点数
toString()：返回字符串

强制类型转换
Boolean()：转化为逻辑值
Number()：对象转化为数字
String()：对象转化为字符串

JavaScript中的函数

函数的声明方式1
js函数提升器 js会先声明这种方式声明的函数再依次执行代码

   function alertName(userName){
    	alert(userName);
    }

函数的声明方式2 声明一个匿名函数将地址传递给变量

var alertName = function(userName){
	alert(userName);
}

/*
如果我函数的声明中参数和传入参数数量不一致会有什么结果
functuon fn1() {}
fn1("jack");
functuon fn2(userName) {}
fn2();
?形参和实参有关系吗？       
无关。  都能执行。具体原因要思考底层问题
*/

注意：函数有匿名函数且需要先定义后使用

事件–JavaScript侦测到的行为

在这里插入图片描述
例子一：

<html>
	<head>
		<script>
			window.onload=function(){
			// 当页面加载完成的时候 出发onload事件 
			// 这个事件绑定在一个函数上，然后执行这个函数
			var input1 = document.getElementById("userName");
			var texta1 = document.getElementById("texta");
			console.log(input1.value);
			console.log(texta.innerHTML);
		}
		</script>
	</head>
	<body>
		<input type="text" id="userName" value="你好上海" />
		<textarea id="texta">
		你好中国
		</textarea>
	</body>
</html>

BOM

BOM使得JavaScript能与浏览器进行“对话”
主要是Window对象的操作
History对象
Location对象
Document对象

Window 对象表时浏览器中打开的窗口

特点

Window 对象是全局对象，可直接调用其方法和属性
Window对象的一些方法和属性可省略不写比如 document alert();

注意：把JavaScript程序写在 window.onload 函数体中，目的是在窗
口加载完成时再执行JavaScript代码；

Window对象常用属性
在这里插入图片描述

history属性（是History对象的引用）

方法：
back() 加载上一个浏览的文档若不存在上一个浏览的文档则不跳转
forward()：加载下一个浏览过的文档
go(n)：n为整数，跳转第n个浏览过的文档
n==0刷新当前页面
n>0 向前跳转到第n个文档
n<0 向后跳转到第n个文档

<script>
//1 获取元素
var hh1 = document.getElementById("hh1");
//2 操作元素
hh1.onclick=function(){   //匿名函数使用
	history.back();
}

Location属性（是Location对象的引用）

在这里插入图片描述

例子：

<body>

<input type="text" id="address" /><input type="button" value="跳转" id="btn" />
<!-- file:///C:/Users/naixi/Desktop/www.baidu.com -->

	<script type="text/javascript">
		//1 获取元素
		var add=document.getElementById("address");
		var btn1=document.getElementById("btn");
		//2 操作元素
		btn1.onclick=function(){
			// 2.1 获取文本框中的内容
			var a = add.value;
			// 2.2 将文本框中的内容作为浏览器中的地址
			location.href="https://"+a;
	}
	</script>

</body>