JavaWeb之JavaScript基础学习与总结

最新推荐文章于 2022-01-09 15:11:04 发布

CRUD_CODER_LIN

最新推荐文章于 2022-01-09 15:11:04 发布

阅读量557

点赞数 1

分类专栏： JavaSE&JavaWeb

本文链接：https://blog.csdn.net/LINHONG_1994/article/details/98961723

版权

JavaSE&JavaWeb 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

JavaScript简介

1995年由Netscape公司在网景导航者浏览器上首次设计而成。Netscape在最初将其脚本语言命名为LiveScript 。后来因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。

JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。

笔记大纲

js基础概念
js基本语法
事件驱动
嵌入方式
DOM操作（重点是查询）

今日推荐：★★★☆☆

在这里插入图片描述

基础概念

js是一门弱类型语言，对数据类型要求比较弱，不严格。（用var声明，不赋值没有意义）

js是一种动态型语言，常见的动态的赋值（使用期间可以修改变量的值）。

js是一种基于对象和事件驱动的脚本语言。

js脚本语言特点：直接运行在浏览器中，因为各个浏览器厂商都会提供js引擎！

1.基本语法

（1）变量

a.使用var声明变量时无数据类型，使用typeof()验证变量的数据类型。

代码示例：

<script type="text/javascript">
     var i =18;
	alert(i); <!--数值18--> 
    
	 var i =18;
	alert(typeof(i)); <!--number 数值型--> 
	
	var i="daxia";
	alert(typeof(i));<!--string 字符型-->
        
    var i=false;
	alert(typeof(i));<!--boolean 布尔型-->
	
	var i=18;
	i="daxia";
	alert(typeof(i));<!--动态的赋值   最终是string--> 
</script>

页面效果1：

在这里插入图片描述

页面效果2：

在这里插入图片描述

b.在js中可以不声明变量，就直接赋值使用。（不建议）

<script type="text/javascript">
     i =18;
	 alert(typeof(i));
</script>

c.变量严格区分大小写

e.变量命名规则：只能是数字（0-9）、字母（a-z）、_、$,其中数字不能放在首位(与Java的命令规则是一致的)。

[1]基本数据类型（7种）

数据类型	说明
	①number 数值型（代替java中的整型与非整型）
	②string 字符型（s是小写）
A.基本类型	③boolean 布尔型
	④null
	⑤undefined 未定义（没有赋值）

	⑥数组：typeof(arr)返回的是object
B.对象类型	⑦对象
	函数

代码示例(数组)：

<script type="text/javascript">
	<!-- Js表示数组方式1 -->
	var arr =["codinglin","JavaScript",809];
	alert(arr);           <!-- codinglin,JavaScript,809--> 
	
	<!-- Js表示数组方式2 -->
	 var arr2 =new Array("codinglin","JavaScript",809);
	alert(typeof(arr2));  <!-- object --> 
	
	var arr3 =new Array("codinglin","JavaScript",809);
	alert(arr3[0]);       <!-- codinglin -->
	alert(typeof(arr3[0]));<!-- string -->
</script>

代码示例(对象)：

<script type="text/javascript">
	<!--Js表示对象方式1-->
	var info = new Object();
	info.name="codinglin";
	info.age=18;
	info.skill=function(){
		alert("专业技术10年");
	}
	<!--skill是一个函数-->
	info.skill();    <!--专业技术10年-->
	alert(info.name);<!--codinglin-->

	<!--Js表示对象方式2  json方式-->
	var jsonObj ={"name":"林大侠","age":18,"study":function(){
		alert("学习总结JavaScript");
	}};
	jsonObj.study();<!--学习总结JavaScript-->
	alert(jsonObj.name);<!--林大侠-->
	
</script>

[2]运算符（与java一致）

[3]流程控制（与java一致）

代码示例（Js应用）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld空白</title>
<script type="text/javascript">
//借助window.onload事件,在这个页面加载完成后执行程序代码
	window.onload = function(){  <!--相当于java中的main方法-->
		//获取按钮对象
		var btnEle =document.getElementById("btnId");
		//给按钮对象绑定单击响应函数
		btnEle.onclick =function(){
			//弹出警告框
			var luckyNum ="0110"; <!-- string类型-->
			alert("https://coding"+luckyNum +"lin.blog.csdn.net");
		
		};
	};
</script>
</head>
<body>

  <button id="btnId">欢迎关注林大侠博客</button>
  
</body>
</html>

页面效果：

在这里插入图片描述

（2）函数（重点理解）

A.函数声明

在js中使用function声明函数

格式：

【非匿名函数】a.function 函数名([参数类型]){}

【匿名函数】b.function([参数类型]){}

注意：

如果需要返回值类型，直接return值。

B.有名函数调用

js中调用函数，不检查形参与实参的匹配情况。

形参>实参（形参少了）：

此时数据类型为number型，返回NaN(not a number)

本质是：数值+undefined

此时数据类型为string型，输出结果为：值+undefined【拼接方式】

形参<实参（实参多了）：

自动忽略后面多余的参数！

C.匿名函数调用

a.与事件结合定义。

b.使用变量名指向函数。

注意：调用函数时，使用函数名||函数名()区别

A.函数名：使用函数的引用

B.函数名():直接触发（执行）函数

代码示例a：

<!--a.与事件结合定义-->
<script type="text/javascript">
window.onload=function(){

alert("匿名函数--与事件结合定义测试");

}
</script>

代码示例b：


<!--b.使用变量名指向函数。-->
<script type="text/javascript">
var method =function(){
    alert("匿名函数--使用变量名指向函数测试");
}
method();
</script>

（3）对象

Js一般分为内置对象（window、document、location、Array、Date等）和自定义对象两种，函数也是对象。

<script type="text/javascript">
<!--a.与事件结合定义-->

var method =function(){
    alert("函数也是对象测试");
}
method.blog="https://coding0110lin.blog.csdn.net";
alert(method.blog);<!--https://coding0110lin.blog.csdn.net-->


}
</script>

2.事件驱动

（1）事件分类

系统事件比如：window.onload。

用户事件比如：btnEle.onclick||onblur||onsubmit等。

（2）常用事件

onload事件:加载事件。

onclick事件：鼠标单击事件，鼠标单击时触发。

onblur事件：失去焦点事件。如点击用户名文本框，会有蓝色的边框色，这叫聚焦。

onchange事件：文本改变且失去焦点时触发。

onsubmit事件：提交表单事件。

代码案例：
onchange事件:文本改变且失去焦点时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event</title>
<script type="text/javascript">
	<!--借助window.onload事件,在这个页面加载完成后执行程序代码-->
	window.onload = function(){
		<!--例如注册校验用户是否存在（假设数据库只有一个用户，名为lindaxia）-->
		var btnUserName =document.getElementById("username");
		btnUserName.onchange=function(){
			var username =btnUserName.value;
			if("lindaxia" == username){
				alert("用户名已存在，请重新输入");	
			}else{
				alert("用户名可用");	
			}
			alter(username);
		}		
	};
</script>
</head>
<body>
	用户名：<input type="text" name="username" id="username">
</body>
</html>

页面效果：

在这里插入图片描述
（3）事件驱动成功三要素

A.声明事件

B.绑定到指定控件上

C.触发事件

3.嵌入方式（Js）

注意：window.onload:当前文档完全加载后触发执行！

window.onload:当前文档只能书写一次，书写多次，后边会覆盖前面的代码！

完全加载：即使有图片、音频、视频等资源，先等资源加载完毕后，才会触发函数。

（1）行内（不建议使用）

写到标签的事件属性中，结构与行为相耦合！
代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
</head>
<body>
	<!--alert()是单引号-->
	<button id="btnId" onclick="alert('代码诚可贵，生命价更高');">行内嵌入测试</button>
</body>
</html>

（2）内部（不建议使用）

代码示例(方式一)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
</head>
<body>
	<button id="btnId">行内嵌入测试</button>
</body>
<!-- 必须要注意位置！ -->
<!-- 位置不正确会报错Uncaught TypeError: Cannot set property 'onclick' of null -->
<script type="text/javascript">
	var btnEle = document.getElementById("btnId");
	btnEle.onclick=function(){
		alert("加油加油！");
		}
</script>
</html>

代码示例(方式二)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
<script type="text/javascript">
window.onload=function(){<!--window.onload表示当前文档加载后执行-->
	var btnEle = document.getElementById("btnId");
	btnEle.onclick=function(){
		alert("加油加油！");
		}
};
</script>
</head>
<body>
	<button id="btnId">行内嵌入测试</button>
</body>
</html>

（3）外部

书写xxx.js中

使用<script src="路径"> 标签引入外部js文件，注意一旦<script>标签中存在src属性，此时该标签的作用为：引入外部js,不能在该标签中书写js代码。

代码示例（外部outertest.js文件）：

window.onload=function(){<!--window.onload表示当前文档加载后执行-->
	var btnEle = document.getElementById("btnId");
	btnEle.onclick=function(){
		alert("加油加油！");
		}
};

代码示例（html文件）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
<!-- 引入Js文件-->
<script type="text/javascript" src="outertest.js">
</script>
</head>
<body>
	<button id="btnId">行内嵌入测试</button>
</body>
</html>

4.DOM操作（重点是查询）

DOM（Document Object Model）是文档对象模型，DOM定义了访问和处理HTML文档的标准方法。

（1）节点
（节点）Node——构成HTML文档最基本的单元。

对象模型分型：

A.文档节点对象（Document）：整个HTML文档的相关信息封装后得到的对象。
B.元素节点对象（Element）：构成HTML文档最基本的元素，对应HTML文档中的HTML标签。
C.文本节点对象（Text）：HTML 元素内的文本内容。
D.属性节点对象（Attribute）：每个 HTML 元素的属性。
E:注释节点：注释

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

（2）查询

①元素【必须掌握！！！】
在这里插入图片描述

A.基于整个文档范围内查询元素节点

▲ 根据id值查询【返回一个具体节点】: document.getElementById(“id值”)

▲ 根据标签名查询【返回节点数组】: document.getElementsByTagName(“标签名”)

▲ 根据name属性值查询【返回节点数组】: document.getElementsByName(“name值”)

B.基于具体元素节点范围内查找子节点

▼ 查找全部子节点【返回节点数组】: element.childNodes

▼ 查找第一个子节点【返回节点对象】: element.firstChild

▼ 查找最后一个子节点【返回节点对象】: element.lastChild

▼ 查找指定标签名的子节点【返回节点数组】: element.getElementsByTagName(“标签名”)

▼ 查找指定元素节点的父节点: element.parentNode

查找指定元素节点的兄弟节点

▼ 查找前一个兄弟节点: node.previousSibling

▼ 查找后一个兄弟节点: node.nextSibling

注意：IE版本>=9，识别空白文本;IE版本<9，不识别空白文本

②属性

A.读取属性值元素对象.属性名

B.修改属性值元素对象.属性名 = 新的属性值

③文本（三步曲）

A.获取文本节点父节点

B.获取父节点的第一个子节点:：parentEle.firstChild

C.获取文本节点的节点值：parentEle.firstChild.nodeValue

innerText:获取html节点元素的内部文本值。

innerHTML:获取html节点元素的内部HTML标签值。

value:获取表单项的value属性值。

（3）增删改（无）

☝上述分享来源个人总结，如果分享对您有帮忙，希望您积极转载；如果您有不同的见解，希望您积极留言，让我们一起探讨，您的鼓励将是我前进道路上一份助力，非常感谢！我会不定时更新相关技术动态，同时我也会不断完善自己，提升技术，希望与君同成长同进步！

☞本人博客：https://coding0110lin.blog.csdn.net/ 欢迎转载，一起技术交流吧！

CRUD_CODER_LIN

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之JavaScript基础学习与总结

JavaScipt简介 1995年由Netscape公司在网景导航者浏览器上首次设计而成。Netscape在最初将其脚本语言命名为LiveScript 。后来因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。 JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫...
复制链接

扫一扫