【网络空间安全】3.2JavaScript学习-JS基础(2)

最新推荐文章于 2025-01-02 17:31:59 发布

原创最新推荐文章于 2025-01-02 17:31:59 发布 · 802 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

本文详细介绍了JavaScript的基本概念，包括变量作用域、函数定义与使用、对象操作、时间处理、面向对象编程、运算符、流程控制语句等内容。

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

十、变量的作用域

10.1全局变量

变量在函数外定义，即为全局变量。当前网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

10.2局部变量

变量在函数内定义，即为局部变量。只在当前函数中使用



function myFunction() {
var carName = " Volvo";
    // 函数内可调用 carName 变量
}
// 函数外不可以调用 carName 变量

10.3 let关键词

当在块中声明同名变量，也将重新声明块外的变量：

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
var carName = " Volvo";
    // 函数内可调用 carName 变量
}
// 函数外不可以调用 carName 变量

let 可以解决这个问题使两个变量独立使用

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
var let carName = " Volvo";
    // 函数内可调用局部 carName 变量
}
// 函数可以调用全局 carName 变量

10.4 const关键字

通过 const关键字 定义的变量与 let 变量类似，同样可以重新声明，但不能被重新赋值。一般定值变量使用const声明

十一、函数

11.1函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：

//构造函数
function func(arg){
	return arg+1;
		}

11.2函数访问

myFunction是引用的是函数对象，而 myFunction() 引用的是函数结果。



function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}
//调用函数，引用函数结果
var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x
//调用函数，引用函数
var y = myFunction; //返回函数，y = function myFunction(a, b) {return a * b; // 函数返回 a 和 b 乘积}

匿名函数

没有名字的函数称为匿名函数

setInterval(function(){
		console.log(123);
},500)

自执行函数

创建函数并且自动执行

(function(arg){
	console.log(arg);
})(1);

11.3箭头函数

箭头函数允许我们编写更短的函数

hello = function() {
  return "Hello World!";
}
//等于如下
hello = () => {
  return "Hello World!";
}

11.4eval()函数

eval(string)可以接受一个字符串str作为参数，并把这个参数作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式；
如果参数是Javascript语句，eval()将执行 Javascript 语句
eval(“var a=1”);//声明一个变量a并赋值1。
eval(“2+3”);//执行加运算，并返回运算值。
eval(“mytest()”);//执行mytest()函数。
eval(“{b:2}”);//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval(“({b:2})”);

十二、对象

12.1对象结构

对象（字典）是一种以键-值对形式存储数据的数据结构

var dict = {k1:"moonsec",k2:'moon',age:18};

12.2对象输出

输出对象元素

for(var item in dict){
console.log(dict[item]);
}

12.3对象操作

获取指定元素32
dict[‘age’] 获取key为age的元素
赋值
dict[‘age’]=10
删除元素
delete dict[‘one’];
delete dict.age;00
this操作
在函数定义中，this 引用该函数的“拥有者”。下列例子中，this 指的是“拥有” fullName 函数的 person 对象。this.firstName 的意思是 this 对象的 firstName 属性。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

十三、时间

使用Date 对象使用时间函数

var myDate = new Date();  
myDate.getYear(); //获取当前年份(2位)  
myDate.getFullYear(); //获取完整的年份(4位,1970-????)  
myDate.getMonth(); //获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;   
myDate.getDate(); //获取当前日(1-31)  
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  
myDate.getHours(); //获取当前小时数(0-23)  
myDate.getMinutes(); //获取当前分钟数(0-59)  
myDate.getSeconds(); //获取当前秒数(0-59)  
myDate.getMilliseconds(); //获取当前毫秒数(0-999)  
myDate.toLocaleDateString(); //获取当前日期  
var mytime = myDate.toLocaleTimeString(); //获取当前时间  
myDate.toLocaleString( ); //获取日期与时间  
//加一天 
var dateTime = new Date();  
dateTime=dateTime.setDate(dateTime.getDate()+1);

十四、面向对象

14.1javascript的类

JavaScript是一种基于原型的语言，在2015，ES6前它没类的声明语句，比如C+ +或Java中用的。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。

14.2方法作类的使用

使用关键字 class 创建类，并且始终添加名为 constructor() 的方法

function Person(name) {
     //构造函数里面的方法和属性
    this._name = name;
    this.getName = function () {
         console.log(this._name);
     };
     this.setName = function (name) {
         this._name = name;
     };
 }
 
 var p = new Person("张三");
 p.getName();  // 张三
 p.setName("李四");
 p.getName();  // 李四

对于上述代码需要注意：

Person充当的构造函数
this代指对象
创建对象时需要使用 new

14.2类的使用

class Person {
     //类的构造函数，实例化的时候执行，new的时候执行
     constructor(name) {
         this._name = name;
     }
     getName() {
         console.log(this._name);
     }
     setName(name) {
        this._name = name
    }
}
 let p = new Preson('张三')
 p.getName();  // 张三
 p.setName('李四');
 p.getName();  // 李四

十五、原型

15.1原型解释

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
如果函数作为普通函数调用时 prototype没有任何作用。当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性指向该构造函数的原型。我们可以通过prototype来访问该属性
重新添加设置原型对象。
如需向构造器添加一个新属性，则必须把它添加到构造器函数

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}
Person.prototype.nationality = "English";//添加一个新属性

十六、运算符

用于执行程序代码运算，会针对一个以上操作数来进行

16.1算术运算符

+ - * / % ++ --

字符串拼接使用“+”

16.2比较运算符

<
>
==
！=
<=
>=
=== 全等于：将数值以及数据类型一并比较
！==不全等于：将数值以及数据类型一并比较

16.3赋值运算符

=
+= 

-=
*=
/=
%=
a=a+2;==>a+=2
a=a-2;==>a-=2
a=a*2;==>a*=2
a=a/2;==>a/=2
a=a%2;==>a%=2

16.4逻辑运算符

&&  全真为真
||  一个为真就是真
！  取反

16.5三元运算符（三目运算符）

if判断
表达式1?表达式2:表达式3
当我的表达式1成立时，执行表达式2 ，否则执行表达式3

var max = 2>1?'>':'<';
console.log(max);

十七、流程控制语句

17.1 if-else语句

if
if(条件)
{ 函数体 }
if else语句
if(条件)
{ 函数体1 }
else
{ 函数体2 }
if.....else if......else语句
if(条件1){
}else if(条件2){
}else if(条件n){
}else{
}

17.2 switch语句:多分支语句

switch语句:多分支语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
}

17.3 循环结构

while循环：
先判断条件当条件成立再执行 while(循环成立条件){ … }
do...while循环
do…while循环:不论条件成不成立先执行一遍再判断
do{
…
}while(循环成立条件)

17.4 for循环

for (i = 0; i < cars.length; i++) {
text += cars[i] + “
”;
}

17.5 for in循环

遍历数组的属性，循环遍历对象的属性
for (variable in array) {
code
}

17.6 for of循环

遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等

continue
跳过当前循环，直接进入循环的下一个步骤
break
结束循环

十八、转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

十九、JS操作DOM

19.1 什么是DOM？

DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。
在这里插入图片描述

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

19.2 DOM元素

19.2.1查找元素

document.getElementById('id'); //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name"); //通过name来获取元素，返回name='name’的集合。
document.getElementsByClassName("classname") //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素，返回所有标签=“div”的集合。
querySelectorAll() 方法,通过 CSS 选择器查找 HTML 元素

19.2.2改变html元素

element.innerHTML = new html content 改变元素的 inner HTML

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";//改变内容
document.getElementById("myImage").src = "landscape.jpg";//改变属性
</script>
</body>
</html>

element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

19.2.3 添加和删除元素

document.createElement(element) 创建 HTML 元素
创建标签并添加到html中
第一种方式 字符串方式
insertAdjacentHTML()

<input type="button" value="+" onclick="add();"/>
<div id="div1">
	<p><input type="text"/></p>
</div>
<script>
	function add(){
		var tag="<p><input type='text'></p>"
		document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
	}
</script>

有四种值可用：
beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后

第二种方式 对象的方式
document.createElement

<input type="button" value="+" onclick="add2();"/>
		<div id="div1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add(){
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			}
			
			
			function add2(){
				var tag =document.createElement('input');
				tag.setAttribute('type','text');
				tag.style.color='red';
				var p =document.createElement('p');
				p.appendChild(tag)
				document.getElementById('div1').appendChild(p);
			}
		</script>

document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

千万不要在文档加载后使用 document.write()。这么做会覆盖文档

19.3 查找 HTML 对象

document.anchors 返回拥有 name 属性的所有元素。
document.applets 返回所有 <applet> 元素（HTML5 不建议使用）
document.baseURI 返回文档的绝对基准 URI
document.body 返回 <body> 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 <html> 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.embeds 返回所有 <embed> 元素
document.forms 返回所有 <form> 元素
document.head 返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素
document.readyState 返回文档的（加载）状态
document.referrer 返回引用的 URI（链接文档）
document.scripts 返回所有 <script> 元素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 元素
document.URL 返回文档的完整 URL

19.4 提交表单

任何标签都可以通过dom提交

getElementById('id').submit()

		<form id='f1' action="https://www.moonsec.com/">
	<input type="submit" value="提交" />
	<input type="button" value="botton" onclick="Sub();" />
	<a onclick="Sub();">提交</a>
</form>
<script>
	function Sub(){
		document.getElementById('f1').submit();
	}
	
</script>

19.5 验证表单

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

19.6.1 添加事件处理程序

document.getElementById(id).onclick = function(){code} 向 onclick事件添加事件处理程序

19.6.2 事件

onclick 在按钮完成点击后执行。为 button 元素指定 onclick 事件：
onmousedown 事件当鼠标按钮被点击时
onmouseup 事件当鼠标按钮被释放时被触发；
onload 当用户进入页面后触发。可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onunload 当用户离开页面时触发。可用于处理 cookie。
onchange 事件经常与输入字段验证结合使用。用户改变输入字段内容时触发
onmouseover 事件当用户将鼠标移至 HTML 元素上时触发
onmouseout 事件当用户将鼠标移出 HTML 元素上时触发

19.6.3 事件监听程序

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。您能够向一个元素添加多个事件处理程序。您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener()方法轻松地删除事件监听器。

19.7 DOM 节点

将html标签嵌套当作树状节点来进行控制的一种方法

19.8其他的一些东西

url和刷新
location.href 获取url
location.href =‘url’ 重定向
location.reload() 重新加载

定时器
setInterval()
clearInterval()

		<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();">

<script>


function setTime(){
	var tag = new Date();
	document.getElementById('i1').value=tag;
}

var obj=setInterval('setTime()','500');

function stop(){
	clearInterval(obj);
}

只执行一次
setTimeout()
clearTimeout()

<div id="status"></div>
		<input type="button" value="删除" onclick="Delele();">
	<script>
	function Delele(){
		document.getElementById('status').innerText="已删除";
		setTimeout(function(){
			document.getElementById('status').innerText="";
		},5000)
	}
	</script>