0基础JavaScript

最新推荐文章于 2024-04-30 20:32:35 发布

一个不会编程的

最新推荐文章于 2024-04-30 20:32:35 发布

阅读量233

点赞数 1

分类专栏： JAVAWEB基础

本文链接：https://blog.csdn.net/qq_44878991/article/details/109173653

版权

JAVAWEB基础专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、JavaScript

HTML : 就是用来写网页的。—人的身体
CSS : 就是用来美化页面的。—人的衣服。
JavaScript:前端大脑、灵魂。—人的大脑、灵魂
JavaScript是WEB上强大的脚本语言。
作用:控制页面特效展示。
脚本语言 : 无法独立执行。必须嵌入到其他语言中，结合使用,直接被浏览器解析执行
Java编程语言 : 独立写程序，独立运行。编译—执行。

例如:
JS可以对HTML元素进行动态控制
JS可以对表单项进行校验。
JS可以控制CSS的样式。
在这里插入图片描述

1.JavaScript的语言特征和编程注意事项

开发规范规定 :
script标签的放置位置为 : Body结束标签前!!! 防止一些网卡的人体验感差。
优点:
保证html展示内容优先加载，最后加载脚本，增强用户体验性。
不过对于0基础学习的小白建议放在head内，等全部完成后再剪切粘贴到body标签结束前。

特征:
JavaScript无需编译，直接被浏览器解释并执行。
JavaScript无法单独运行，必须嵌入到HTML代码中运行。
JavaScript的执行过程由上到下依次执行。

注意：
JavaScript没有访问系统文件的权限
由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程·
JavaScript和java没有任何直接关系

2.JavaScript的引入方式

内部脚本

在当前页面内部写script标签，script内部即可书写JavaScript代码
格式:
<script type=“text/javascript”>
JavaScript的代码
</script>
注:script标签理论上可以书写在HTML文件的任意位置

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//int a = 10;
			var a = 10;
			//int b = 10;
			var b = 10;
			//int t = a + b;
			var t = a+b;
			//system.out.println(t);
			alert(t);
		</script>
	</head>
	<body>
	</body>
</html>

外部引入

在HTML文档中，通过<script src=" ">标签引入.js文件
格式:
<script type="text/javascript” src=“javascript 文件路径”></script>
注:外部引用时当前script标签内不能有script代码，即使写了也不会执行！！！！
若还想增加js脚本，可以选择复制到那个引用的js文件中，或者重新创建一个script标签
js文件如下：

alert("你好");

HTML文件如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="demo.js"></script>
		<script>
			alert("新的你好");
		</script>
	</head>
	<body>
	</body>
</html>

二、JavaScript语法及规则

1.注释

单行注释
//
Hbuilder 快捷键 ctrl + /
多行注释
/* */
Hbuilder快捷键ctrl + shift + /

2.变量

变量:标示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明:
var 变量名 ; ------------变量赋予默认值，默认值为undefined

变量的声明和赋值:
var 变量名 = 值 ; ----------变量赋予对应的值·

在声明JavaScript变量时，需要遵循以下命名规范:
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如: function
严格区分大小写

☆若有错误则可以使用 IE–>开发人员工具–>debug，进行调试，在控制台可以查看错误。

基本数据类型

类似于java中的基本数据类型。

string 字符串类型(注意是小写的)。" "和 ’ ’ 都是字符串。JavaScript 中没有单个字符！！均为字符串
boolean 布尔类型。固定值为 true 和 false
number 数字类型。任意数字
null 空，一个占位符。
undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。
注 : 因为 undefined 是从 null 中派生出来的，所以 undefined == null
JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声
明好之后，是可以赋予任意类型的值。

通过 typeof 运算符可以分辨变量值属于哪种基本数据类型
对变量或值调用 typeof 运算符将返回下列值之—:
undefined 如果变量是Undefined类型的
boolean 如果变量是Boolean类型的
number 如果变量是Number类型的
string 如果变量是String 类型的
object 如果变量是―种引用类型或 Null 类型的

ECMAScript实现之初的一个 bug，null属于基本数据类型，typeof(null)返回object

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
 			var a = 4;
			alert(typeof(a)); 
			a = true;
			alert(typeof(a)); 
			a = "a";
			alert(typeof(a)); 
			a = undefined;
			alert(typeof(a)); 
			a = null;
			alert(typeof(a)); 
		</script>
	</head>
	<body>
	</body>
</html>

引用数据类型

引用类型通常叫做类(class),但在JavaScript中，因为不存在编译过程,所以没有类的概念
所处理的引用数据类型都是对象。

标准创建方式:
var str= new String(); / /和JAVA相同
var str = new String; / /js独有方式

3.运算符

比较运算符

在这里插入图片描述
如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
 			var a1 = 10;
			var a2 = "10";
			alert(a1==a2); //true
			alert(a1===a2); // false
		</script>
	</head>
	<body>
	</body>
</html>

练习：
在这里插入图片描述

逻辑运算符

在这里插入图片描述

4.正则对象

RegExp对象的创建方式

var reg = new RegExp(“表达式”); / / (开发中基本不用）。
var reg= /^ 表达式 $ /; / / 直接量（开发中常用）
直接量中存在边界，即^代表开始，$代表结束
直接量的正则是对象，不是字符串，别用引号

test方法
正则对象.test(string);
用来校验字符串是否匹配正则。
全部字符匹配返回true ; 有字符不匹配返回false

例子1：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
 			var reg = /^\s*$/; // 0~多个空格
			var flag = reg.test("    ");  //true
			alert(flag);
			flag = reg.test("  a  ");  //false
			alert(flag);
		</script>
	</head>
	<body>
	</body>
</html>

正则对象使用注意事项

/^表达式$/
（直接量）只要有无法成立正则的字符存在，即为false,全部符合为true
(检查严格，眼睛不揉沙子）
适用于表单校验

/表达式/
（普通方式）只要有成立正则的字符存在，即为true。全部不符合为false
(检查不严格，懒人思想）
适用于字符串查找、替换
例子：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
 			var reg = /\s+/; // 1~多个空格(边界符被去掉)
			var flag = reg.test("");  //false
			alert(flag);
			flag = reg.test("  a  ");  //true
			alert(flag);
			flag = reg.test("aaa");  //false
			alert(flag);
		</script>
	</head>
	<body>
	</body>
</html>

5.JS数组对象

JS数组可以看做Java中的ArrayList集合。

数组中的每一个成员没有类型限制，及可以存放任意类型
数组的长度可以自动修改

JS数组的创建方式

方式一： var arr =[1,2,3,“a”,true];

方式二： var arr = new Array(); / / 数组长度默认为0

方式三： var arr = new Array(4); / / 实用性不大因为JS数组是动态的
数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。(仅在显示数组
时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）

方式四： var arr = new Array(1,2); / / 数组元素是1,2

注意：方式1，2重点掌握

JS数组的常用方法

在这里插入图片描述
例子1：length、join()、reverse()

		<script>
			var arr = [1,"a",true];
			alert(arr.length);   // 3
			arr[5] = 11;
			arr[4] = null;
			alert(arr.length);  // 6  自动扩容，定义未赋值，自动赋予undefined
			alert(arr[4])  // null
			var result = arr.join("+"); //不会影响原来数组
			alert(result);  //1+a+true+++11
			
			//reverse() 进行物理翻转，对原数组操作，返回翻转后数组，原数组也翻转
			var arr2 = arr.reverse();
			alert(arr2); // 11+++true+a+1
			alert(arr);  // 11+++true+a+1
		</script>

例子2：pop()、push()

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//pop() 删除并且返回数组的最后一个元素
			var arr = ['a','b','c'];
			alert(arr.length);  // 3
			var temp = arr.pop();
			alert(temp);  // c
			alert(arr);  // a,b
			
			
			//push()   向数组末尾追加1个或多个元素，并且返回数组新长度
			var len = arr.push('c','d','e');
			alert(len) // 5
			alert(arr); //a,b,c,d,e
			
		</script>
	</head>
	<body>
	</body>
</html>

6.全局函数（global）

执行

在这里插入图片描述

		<script>
			eval("var a = 10;");
			//eval(new String("var a = 10;"));    
			//会报错，即不能传入字符串对象，只可以传基本数据类型的字符串
			alert(a);
		</script>

编码和解码

在这里插入图片描述

<script>
	var s = "https://www.baidu.com/index.html?username=张三&password=123";
	var t = encodeURI(s); // 返回值是编码后的字符串
	alert(decodeURI(t));  //返回值是解码后的字符串
</script>

字符串转数字

在这里插入图片描述
注意：
如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。(例如: 11.5a55，parseInt,结果11，parseFloat,结果11.5）

如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN。( Not A Number，一个数字类型的标识，表示不是一个正确的数字)

		<script>
			var str = "10.55";
			alert(parseInt(str)); //10
			alert(parseFloat(str)); //10.55
			str = "10.5a5";
			alert(parseInt(str)); //10
			alert(parseFloat(str)); //10.5
			str = "a10.55";
			alert(parseInt(str)); //NaN
			alert(parseFloat(str)); //NaN
		</script>

7.自定义函数

如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数（方法）中。

作用:增强代码的复用性。

注意：
JavaScript函数定义必须用小写的function;
JavaScript函数无需定义返回值类型，直接在function后面书写方法名;参数的定义无需使用var关键字，否则报错;
JavaScript函数体中, return可以不写,也可以return具体值,或者仅仅写return;

强调：
JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定，如果未return具体值，返回值为undefined;
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;
因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配，也不会影响正常调用;
如果形参未赋值，就使用默认值undefined
例子1：

		<script>
			function sum(a,b){
				return a+b;
			}
			var num = sum(1,2);
			alert(num); // 3
			
			function sum1(a,b){
				return;
			}
			num = sum1(1,2);
			alert(num); //undefined
			
			function sum2(a,b){
			}
			num = sum2(1,2);
			alert(num); //undefined
		</script>

例子2：

		<script>
			function get(a,b){
				alert(a+"-"+b);
			}
			function get(a,b,c){
				alert(a+"-"+b+"-"+c);
			}
			//只看最后覆盖的那个函数，有无参数列表没关系
			get(); // undefined-undefined-undefined
			get(1,2); // 1-2-undefined
			get(1,2,3); // 1-2-3
		</script>

8.自定义对象

function构造函数

属性定义方式：
this关键字，在对象声明阶段，定义一个属性
创建对象后，使用对象.属性方式动态定义属性

		<script>
			function Person(a,b){
				this.name = a;
				this.age = b;
			}
			var p = new Person("校长",20);
			p.sex = "男"; //动态增加属性sex
			alert(p.name+p.age+p.sex);
			
		</script>

对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。
快速创建实例对象及数据封装
格式:
var 对象名 = { 属性名1 : “属性值1” , 属性名2 : “属性值2” , 属性名3 : “属性值3”………};

注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可。

		<script>
			var p = {name : "小美", age : 20};
			p.sex = "女";
			alert(p.name + p.age + p.sex);		
		</script>

三、BOM对象

BOM(Browser Object Model）浏览器对象模型浏览器:IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等）
一般情况下，window代表了BOM对象。
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

1.消息框

alert()

警告框，用来弹出警示信息
不同浏览器显示的组件样式不同，我们无需关注组件样式

confirm()

用于告知用户信息，并且收集用户的选择
通常配合该方法返回值来操作

		<script>
			var a = confirm("是否关闭");
			//有返回值，确定返回true，取消返回false
			alert(a);
		</script>

2.定时器

循环定时器

启动循环定时器 setInterval()

调用一次就会创建并循环执行一个定时器
格式：
setlnterval(调用方法,毫秒值); / / 毫秒值即为循环周期，每隔多少毫秒执行一次

取消循环定时器 clearInterval()

如果需要取消定时器则可以如下执行，实现两秒后只执行一次run方法。

		<script>
			var id;
			function run(){
				alert("执行run");
				clearInterval(id);
			}
			id = setInterval("run()",2000);
		</script>

一次性定时器

一次性定时器，调用一次就会创建并且执行一个定时器一次。

格式：
setTimeout(调用方法,毫秒值);

setTimeout 方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
此定时器ID在当前页面是不重复的。
我们可以通过clearTimeout方法，指定某个一次性定时器停止。
格式:
clearTimeout(定时器ID);

		<script>
			var id;
			function run(){
				alert("执行run");
				clearTimeout(id);
			}
			id = setTimeout("run()",2000);
		</script>

3.location对象

location对象包含浏览器地址栏的信息。

常用属性:
href 设置或返回完整的URL。

设置href属性，浏览器就会跳转到对应的路径。

练习：两秒后跳转到百度页面。

		<script>
			var id;
			function run(){
				location.href = "https://www.baidu.com";
				clearTimeout(id);
			}
			id = setTimeout("run()",2000);
		</script>

四、DOM对象

DOM (Document Object Model）文档对象模型。文档 : 标记型文档（HTML等）。
DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象。
通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

1.DOM树

例：
在这里插入图片描述
加载并且解析到内存中会形成一张DOM树

2.获取元素对象的四种方式

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

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id='t1'/>
		
		<input type="checkbox" name="hobby" value="read"/>
		<input type="checkbox" name="hobby" value="music"/>
		<input type="checkbox" name="hobby" value="run"/>
		
		<ul>
			<li>浙江</li>
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<input type="radio" name= "sex" value="man" class="Sex"/>
		<input type="radio" name= "sex" value="woman" class="Sex"/>
		<script>
			var t = document.getElementById('t1');
			alert(t);
			t = document.getElementById('t2');
			alert(t); // 找不到显示null

			var arr = document.getElementsByName("hobby")
			alert(arr.length);
			arr = document.getElementsByName("hobby1")
			alert(arr.length);  // 找不到显示0
			
			var arr1 = document.getElementsByTagName("li");
			alert(arr1.length);
			var arr2 = document.getElementsByClassName("Sex");
			alert(arr2.length)
		</script>
	</body>
</html>

注意：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中

3.元素对象常见属性

value

元素对象.value，获取元素对象的value属性值。
元素对象.value=属性值设置元素对象的 value 属性值。

修改元素的值

		<script>
			var t = document.getElementById("t1");
			alert(t.value);
			t.value = "你好？？？？？？";
		</script>

className

元素对象.className，获取元素对象的class属性值。,
元素对象.className=属性值，设置元素对象的class属性值。

修改元素的样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ys1{
				font-size: 120px;
				color: red;
			}
			.ys2{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span id = "t1" class="ys1">利用classname，可以更改样式</span>
		<span id = "t2" class="ys1">利用classname，可以更改样式</span>
		<script>
			var t = document.getElementsByClassName("ys1");
			alert(t.length);
			t[0].className = "ys2"
		</script>
	</body>
</html>

checked

元素对象.checked，获取元素对象的checked属性值。
元素对象.checked = 属性值，设置元素对象的checked属性值。

注:HTML 中checked=“checked” ，JavaScript中返回true，false

修改单选或者复选的选中与否

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id = "t1"/>;
		<script>
			var t = document.getElementById("t1");
			alert(t.checked); // false
			t.checked = true;
		</script>
	</body>
</html>

innerHTML

元素对象.innerHTML，获取元素对象的内容体。
元素对象.innerHTML = 值，设置元素对象的内容体

操作元素的内容体

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id = "t1">看我内容体要变了</span>
		<script>
			var t = document.getElementById("t1");
			alert(t.innerHTML);
			t.innerHTML = "现在学完了innerHTML";
			//追加内容体
			t.innerHTML += "，等等学JS事件。";
		</script>
	</body>
</html>

五、JS事件

1.JS驱动机制

通常鼠标或热键的动作我们称之为事件(Event)
点击、表单提交、值发生改变、鼠标移入、鼠标移出
通过JS事件，我们可以完成页面的指定特效。
在这里插入图片描述

2.常见JS事件

点击事件 onclick

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="点我弹框"  onclick="run()"/>
		<script>
			function run(){
				alert("弹对话框");
			}
		</script>
	</body>
</html>

焦点事件

获取焦点事件 onfocus
获取焦点事件:当元素组件获取焦点时触发
焦点:即整个页面的注意力。默认一个正常页面最多仅有一个焦点。
通常焦点也能反映出用户目前的关注点，或者正在操作的组件。

例如:文本框中闪烁的小竖线。

失去焦点事件 onblur
当元素组件失去焦点时触发
一下代码根据不同浏览器执行情况不同（谷歌无限弹窗）

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" onfocus="run()" onblur="run2()"/>;
		<script>
			function run(){
				alert("获取焦点");
			}
			function run2(){
				alert("失去焦点");
			}
		</script>
	</body>
</html>

域内容改变事件 onchange

元素组件的值改变时触发事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select onchange="run()">
			<option value="zj">浙江</option>
			<option value="bj">北京</option>
			<option value="sh">上海</option>
		</select>
		<script>
			function run(){
				alert("值改变了");
			}
		</script>
	</body>
</html>

加载完毕事件 onload

元素组件加载完毕时触发
用处：获取元素对象时，保证元素对象先加载，建议是把获取元素对象的代码放最后，现在则可以给那个标签绑定onload 方法则可以放任意位置
给body绑定一个onload 方法
onload 通常用于 body元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body onload="run()">
		你好
		<script>
			function run(){
				alert("加载完毕了");
			}
		</script>
	</body>
</html>

表单提交事件 onsubmit

表单提交事件:表单的提交按钮被点击时触发;
注意:该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作。
事件得到true，提交表单数据
事件得到false，阻止表单数据提交

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<form onsubmit="return run()">
			<input type="text" name="username" id="1" />
			<input type="submit" />
		</form>
		
		
		<script>
			function run(){
				alert("表单信息提交按钮被点击了");
				return true;// 若为false，则表单信息提交失败
			}
		</script>
	</body>
</html>

键位弹起事件

在组件中输入某些内容，键盘键位弹起时触发该事件
其实还有键位按下事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="text" name="username" onkeyup="run()" />	
		<script>
			function run(){
				alert("键位弹起了");
			}
		</script>
	</body>
</html>

常用鼠标事件

鼠标移入事件 onmouseover
鼠标移入某个元素组件时触发

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="text" name="username" onmouseover="run()"/>	
		<script>
			function run(){
				alert("鼠标移入！");
			}
		</script>
	</body>
</html>

鼠标移出事件 onmouseout
例子模仿上述即可

3.两种绑定方式

元素事件句柄绑定

将事件以元素属性方式写到标签内部，进而绑定对应函数
事件句柄绑定方式
优点 : ①开发快捷 ②传参方便 ③可以绑定多个函数
缺点:JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="text" value="求点" onclick="run(),run1(this)"/>	
		<script>
			function run(){
				alert("run");
			}
			function run1(obj){
				alert(obj.value);
			}
		</script>
	</body>
</html>

DOM绑定方式

优点:使得HTML代码和JS代码完全分离
缺点:①不能传递参数
②一个事件只能绑定一个函数,
两个缺点可以使用匿名函数去解决

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run(){
				alert("run");
			}
			function run1(obj){
				alert(obj.value);
			}
			//若同时写两个window.onload则会覆盖上一个。
			//DOM绑定方式  对象.事件属性  一次只能绑定一个函数，不能传参数
			// window.onload = run;
			//DOM绑定方式 匿名函数方式  可以绑定多个函数，可以传递参数
			// window.onload = function(){
			// 	run();
			// }

			window.onload = function(){
				var t = document.getElementById("t1");
				t.onclick = function (){
					run();
					run1(this);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="求点" id="t1"/>	
	</body>
</html>

总结

0基础JavaScript，一个努力的小白

一个不会编程的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
0基础JavaScript

文章目录一、JavaScript1.JavaScript的语言特征和编程注意事项2.JavaScript的引入方式内部脚本外部引入二、JavaScript语法及规则二、使用步骤1.引入库2.读入数据总结一、JavaScriptHTML : 就是用来写网页的。—人的身体CSS : 就是用来美化页面的。—人的衣服。JavaScript:前端大脑、灵魂。—人的大脑、灵魂JavaScript是WEB上强大的脚本语言。作用:控制页面特效展示。脚本语言 : 无法独立执行。必须嵌入到其他语言中，结合使用,
复制链接

扫一扫