JavaScript笔记记录_如何用javascript记录笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_26558047/article/details/111151458

1、什么是JavaScript？

JavaScript用于网页和用户之间的交互。
比如提交时，判断用户名是否为空之类的。

JavaScript的几个组成成分

 1、语言基础
 2、BOM
 3、DOM

2、Script标签

JavaScript都是放在script标签中的，一旦加载在就会执行。

如果有多段Script代码就会从上到下顺序执行。

使用外部的JS文件

JavaScript有时候代码量相当多，因此可以放在内部文件里面进行导入。

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

注释

JavaScript中，注释使用//和/**/这跟Java语言是一样的。

变量

在JavaScript中，变量可以用var来声明，也可以什么都不写，直接给一个字符赋值。
并且JavaScript中值的类型是动态的。

变量类型：

undifined(如果只声明，不赋值)
Boolean
Number
String（没有字符概念）

伪对象的概念：
在JavaScript中，即使是基本数据类型也是伪对象，有属性和方法。也就是说如果存在var a = “xxx”,可以调用a.length。

函数

跟Java 的方法没大多区别，
可以带return，可以传参
格式

<script>
//声明
function print(参数表){
	函数内容
}
//调用
print()
</script>

DOM与JavaScript的结合

<script>
function get(){
	var value = document.getElementById("num1").value;
	document.getElementById("value").value = "取值出来的结果是"+value;
}
</script>

<input type="text" id="num1" value="1">
<input type="text" id="result" value="">
<input type="button" value="取值" onclick="get()">

可以看出在onlick中调用了函数get（）

作用域

函数的参数，作用域在函数内部。
全局变量，在函数内部也能用。

与Java都差不多的地方

算术运算
逻辑运算
条件运算
循环运算
错误处理（try/catch）（一旦程序代码出错，下面的代码是不会继续执行下去的。）

3、对象

Number
String
Array
Date
Math
Object
需要的时候再看。

4、BOM

BOM = （Browser Object Model）
浏览器对象模型

浏览器对象包括：

Window（窗口）
Navigator（浏览器）
Screen（客户端屏幕）
History（访问历史）
Location（浏览器地址）

window

1、获取文档显示区域的高度和宽度
window.innerWidth
2、外部窗体的高度和宽度
window.outerWidth
3、打开新的窗口
window.open("/")
可以用其来打开另外一些网站

Navigator

1、查看浏览器名称
navigator.appName
2、查看浏览器版本号
navigator.appVersion
3、浏览器内部代码
navigator.appCodeName
4、操作系统
navigator.platform
5、是否使用cookie
navigator.cookieEnableCookie

screen

不常用

history

history.back()
history.go(-2) //-1代表上次，-2代表上上次

location

Location表示浏览器中的地址栏
1、location.relord() 相当于F5刷新
2、location=“xxxx” 跳转到xxx页面
3、可以查看一些属性。如：
location.protocol：协议
location.hostname：主机名
等等

弹出框

alert（警告框）
confirm（确认框）
prompt（输入框）

5、DOM

DOM是Document Object Model的缩写
DOM是把html的各种数据当做对象进行操作的一种思路。
通俗一点讲，就是把面向对象的思想用在HTML的标签上

在DOM的思想下，
整一个文档是一个节点，即document。
元素（标签）是一个节点，
元素内的属性是一个节点，
元素内的内容也是一个节点。

获取节点

一个元素对应的id是唯一的

<div id = "d1">xxxxxx</div>
var div1 = document.getElementById(”d1“)；

通过标签名（不常用）
通过类名(其中可以用elements[i] 来调用不同的节点)

<div class = "d">xxxxxx</div>
<div class = "d">qqqqq</div>
<div class = "d">aaaaa</div>
var elements = document.getElementByClassName(”d“)；

通过表单的name获得节点

<input name = "userName">
var elements = document.getElementByName(”userName“)；

要获取节点的时候要记得JavaScript是解释性语言，如果没有定义出标签，是无法获取的。

获取属性

元素上的属性，如id，value可以直接获取。
而自定义的属性则需要getAttribute（“xxx”）来获取

<script>
function get(){
	var input1 = document.getElementById("input1");
	var s = input1.id;
	var s2 = input1.value;
	var s3 = input1.className;
	var s4 = input1.getAtrribute("test");
}
</script>

<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<button onclick="get()">获取input的属性<button>

DOM事件

DOM上事件很多，主要有：

onfocus（获取焦点）onblur（失去焦点）
onmouseup（鼠标弹起） onmousedown（鼠标按下）等等
onkeydown（键盘按下）等等
onclick（点击事件）
onchange 变化事件
onsubmit 提交事件
onload 加载事件
this 当前组件
return false 阻止当前事件发生

主要讲一下onsubmit，onsubmit一般配合表单form元素提交。

<form action="/study/login.jsp" onsubmit="login()">
<input type="submit" value="登录">
</form>

<script>
	function login(){
		alert("提交表单");
	}
</script>

其中如果在事件之中用来return false这种格式，就可以产生一种根据script函数返回值来判断时间是否发生。

<form action="/study/login.jsp" onsubmit="return login()">
<input type="text" id="name" name="name">
<input type="submit" value="登录">
</form>

<script>
	function login(){
		var name = document.getElementById("name");
		if(name.value.length == 0){
			alert("用户名不能为空！");
			return false;
		}
		return true;
	}
</script>