JavaScript

D488519971

已于 2022-12-12 20:21:01 修改

阅读量140

点赞数

文章标签： javascript 前端开发语言

于 2022-12-12 01:31:41 首次发布

本文链接：https://blog.csdn.net/D488519971/article/details/128280638

版权

JavaScript

简介
基本语法
事件
- 事件的分类

简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支
持类型。
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用
来给HTML网页增加动态功能。

组成部分

ECMAScript语法
文档对象模型（DOM Document Object Model）
浏览器对象模型(BOM Browser Object Model)

发展历史

它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公
司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器
对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名
为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因
此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自
Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系
统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。
两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了
ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript
6（ES6）

图解

在这里插入图片描述

使用方式

方式1
head标签体中写script标签,书写js代码
方式2
在当前页码导入外部.js文件
script标签体里面src属性=“外部.js文件”

 <script>
			//常用的函数: window.alert("提示框")
			alert("hello,javascript") ; //window可以不写
			
			//window里面确认提示
			var flag = confirm("您忍心删除吗?") ;
			//prompt带有一个消息和文本输入框
			window.prompt("请输入动态密令:") ;
			
			//向浏览器输出内容
			document.write("hello,javaScript") ;
			//浏览器中控制台打印内容
			console.log("hello,javascript") ;
		 </script>
		 
		 <script src="js/01.js"></script>

基本语法

变量以及数据类型

javasript:弱类型语言(语法结构不严谨)
js中定义任何变量以及创建对象使用var (var可以省略不写)

数据类型:
1)无论整数还是小数都是number 数值类型 --提升为 js内置对象 Number对象
2)boolan类型— 提升内置对象 Boolean对象
3)无论是字符还是字符串都是string类型 – 提升js内置对象 String对象
4)对象类型 object 提升 Object—代表所有js对象的模板
5)未定义类型undefined–没有值
查看js中的变量的数据类型 typeof(变量名)

运算符_流程控制语句

运算符
* 算术 +,-,,/,%
* 比较 :==,!=,<,<=,>,>=
* 逻辑:&&,|| 前端中使用 (提高执行效率:短路效果)
* 三元:(表达式)?执行成立的结果:否则不成立的结果;
* 赋值运算符: = ,+=,-=,=,%/…

js 流程控制语句
顺序结构语句:
代码由上而下依次加载
选择结构语句 :
if语句
if
if…else
if …else if…else…

switch(表达式或变量){
case “可以变量/也可以是常量”:
语句1;
break ;
…
default :
语句n;
break ;
}

for-in语句:
针对数组以及对象的属性进行遍历–类似于Java中的增强for
for(var 变量名 in 数组对象或者对象名){
使用变量名
}

switch(表达式/值){
case 值: (可以是变量也可以是常量)
语句;
break;
}

数组

创建一个数组 Array----Javascrpt内置对象
方式1:
var 数组名称 = new Array();
方式2:
var 数组名称 = new Array(size);
方式3:
var 数组名称=new Array() [元素1,元素2…];
静态初始化:简写为—var 数组名称=[元素1,元素2…]
特点

可以存储任意类型元素
可以不断的给数组中添加数据,不存在角标越界
内置功能
join(str) : 通过指定的分割符号将数组的元素拼接成字符串
revwese() : 将数组的元素反转

JS中的函数

定义
function 函数名称(参数列表){
完成方法的逻辑
1.直接输出
2.return,直接返回数据
}
调用
1.单独调用:函数名称(实际参数列表)
2.赋值调用: var 结果变量=函数名称(实际参数)
*注意事项:
1.定义函数时,函数中参数列表不能带var
2.JS定义函数,不需要返回类型,但是可以使用return.
3.JS中没有函数重载,函数名称相同,后面的会将前面的覆盖

String 内置对象的功能

var 字符串名称 = new String(val);
创建字符串对象
s1.valueOf()
输出的就是字符串对象的原始值,一般用来比较内容是否相等
charAt(index)
返回指定索引位置处的字符
concat(str)
拼接功能
substring(start,end)
截取功能
split(字符串)
通过分隔符的字符串将字符串拆分成字符串数组
fontcolor,fontsize
设置字体颜色,字体大小

Date日期对象

var date = new Date();
创建日期对象
功能
~~getYear()~~
获取当前年份与1900之间的差值
getFullYear()
获取当前年份
getMonth()
获取当前月份,返回0-11之间的整数
getDate()
获取月份中的日期值
getHours(),getMinutes(),getSeconds()秒数
小时,分钟,秒数

定时器

定时器有两种:

windows.setIntercal(定时任务就是一个函数,imilliSeconds)
每经过imilliSeconds毫秒后重复执行这个任务函数.
windows.setTimeout(定时任务就是一个函数,imlliSeconds)
经过imllisSeconds毫秒后执行一次任务函数.

标签都有两个属性:

innerText:普通文本
innerHTML: html文本

动态给标签设置文本

需要获取当前标签对象,通过id属性值获取标签对象.
var 标签对象名称=document/getElementById(“id属性值”)
使用标签对象名称访问属性
innerText
innerHTML

举例:设置网页时钟

windows.setIntercal()

function genDate(){
//1.创建js的日期对象
var date = new Date();
//2.拼接日期
var dateStr = date.getFullYear()+(date.getMonth()+1)+date.getDate()+date.getHours();
//3.将日期+时间的字符串动态设置到span标签中
//3.1获取id="spanTip"标签对象
var spanObj=document.getElementById("spanTip");
//3.2设置它的文本大小
spanObj.innerHTML = "<h3>"+dateStr+"</h3>";
//4.定时器---每秒都执行
setInterval("getDate()",1000);
//每一秒对执行这个函数
}

windows.setTimeout

<body>
		<input type="button" onclick="myClick()" value="点击"/>
		<input type="button" onclick="clearMyClick()" value="清除定时器"/>
	</body>
<script>
var taskId ;
	//1)点击按钮----触发单击点击事件 
	function myClick(){		
		//3秒后执行一次任务
		//window.setTimeout("OpenHref()",3000) ;
		taskId = window.setInterval("OpenHref()",3000) ;
		//alert("触发点击了") 		
	}
	function clearMyClick(){
		window.clearInterval(taskId) ;
	}

	function OpenHref(){
		//open方法:参数1:打开地址 参数2:打开地址的方式
		window.open("06_Date日期对象.html","_blank") ;
	} 
	//2)弹框----window.open("url地址") ;		
	//定时器
	//window.setTimeout() ;
</script>

事件

事件的分类

点击事件
onclick–绑定单击事件
ondblclick–绑定双击事件
焦点事件
onfocus–获取焦点(文本输入框,点击进去输入内容)
onblur–失去焦点
onchange:下拉菜单选项卡发生变化的事件
onmouseout/onmouseover: 鼠标移出/鼠标经过
onLoad: 页面载入事件

<script>
	//测试失去焦点
	function testBlur(){
		//获取文本输入框的内容
		//通过标签对象获取value属性---默认值
		var usrename = document.getElementById("username").value ;
		
		//获取id="tip"的span标签对象
		var spanObj = document.getElementById("tip") ;
		//模拟数据:如果这个username内容不是高圆圆,提示"格式错误",否则,恭喜"可用"
		if(usrename !="高圆圆"){
			spanObj.innerHTML = "用户名格式有误".fontcolor("red") ;
		}else{
			spanObj.innerHTML = "恭喜您,可用".fontcolor("greenyellow") ;
		}
	}

	//测试获取焦点事件
	function testFocus(){
		//通过id="username"获取它的input标签对象
		var username = document.getElementById("username") ;
		//清空掉它的value属性
		username.value ="" ;
	}

	//测试单击
	function  testMyclick(){
		alert("点我试试") ;
	}
	//双击
	function testMyDblClick(){
		alert("点两下" ) ;
	}		
</script>