javaScript简介

JavaScript是一种由Netscape公司开发的直译式脚本语言,主要用于网页动态功能和客户端表单验证。它包括数值型、布尔型、字符串、对象等多种数据类型,并支持算术和比较运算符。JavaScript可通过内部样式表或外部JS文件引入,其DOM操作和事件处理机制对网页交互至关重要。
摘要由CSDN通过智能技术生成

javaScript历史:

JavaScript是由Netscape公司开发的脚本语言,将该语言命名为LiveScript
跟java一样,是面向对象的,无需编译就可以运行,可以由浏览器直接解释执行
之后与sun公司合作改名javaScript

javaScript概述:

它是一种直译式的语言, 用来为网页添加各种各样的动态功能 , 不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的

作用:

  1. 响应鼠标或者键盘事件
  2. 验证客户端页面的表单验证
  3. 动态的改变标签样式

javaScript使用:

<1>内部样式表:

在这里插入图片描述
<2>外部引入js

<script type="text/javascript" src="js/outer.js" charset="UTF-8"></script>

js支持的数据类型:

<1>数值型
包括整数型,浮点型 number

			var c = 10;
			var d = 10.5;
			alert(typeof(c));
			alert(typeof(d));

类型都是number

<2>布尔型(boolean)
true或者flase
<3>字符串使用 单或者双引号来表示 string

			var ss = "sss";
			alert(typeof(s));

<4>undfind(未定义类型)

			var m;
			alert(m);

即声明未初始化的变量,查看类型就是undefined
<5>Oject 对象类型 字符串对象 数组对象 math 日期 DOM

			var date = new Date();
			alert(date);

运算符

<1>算数运算符
+ - * / % ++ –

+:
数值+数值
数值+字符串 字符串+字符串=字符串 连接符
javaScript的隐式转化:

		   var a = 10;
		   var b = 5;
		   var c = "5";
		   var d = "aaa";
		   alert(a+b);
		   alert(a+c);
		   // java允许a-c
		   alert(a-c);//5 数值-字符串数字(隐式的数据类型转换)
		   alert(a-d);//NaN  意思是nat a number

甚至可以在运算时改变数据类型
a+=d; 运算时a由number变成字符串

等号(=)应用:

		   alert(b==c);//true  只是简单的比较值是否相等
		   alert(b===c);//false  比较值 和 数据类型是否相等

函数

<1>函数的基本语法:

function name(argument,argument){
        return 返回值
}

<2>如果函数有多个参数,但是调用时就传入一个实参,那么其他实参就是undefined

eg:
在这里插入图片描述
运行如下图
在这里插入图片描述

注意:由于javaScript是弱类型语言,所以方法不支持重载

在写方法时,不用写返回值,因为javaScript是弱类型语言,返回的任何类型都可以用一个var来接收
在这里插入图片描述

<3>全局函数

也就是javaScript里已经定义好的函数,我们可以直接拿来使用的函数

  1. alert( );在浏览器里弹出提示窗口
  2. parseInt(arg); 把数值( 小数 )可以转化成整数数值,可以把一个字符串的数字转为数值类型,直接截取小数,可以是纯数字或者数字开头的字符串
  3. parseFloat(arg): 把数值( 小数 )可以转化成小数数值,可以把一个字符串的数字转为数值类型,保留小数部分
  4. typeof( arg ); 可以拿到该变量的类型
  5. eval( arg ) ; 可以一段字符串当做脚本执行

内置对象

javaScript语言里一共有4种内置队对象, 字符串,数组,日期, Math

<1>字符串对象
var s = “abcd:ec:uop”;

对象方法

s.length)                获取字符串的长度
s.charAt( index )        获取字符串指定索引的字符
s.idnexOf( Ele )         获取字符串指定字符的索引( 第一次出现 )
s.lastindexOf( "Ele" )   获取字符串从尾部向前指定元素的索引
s.substring(start,end)   截取字符串,开始位置与结束位置( 不包括结束位置)
s.substr( start, length) 截取字符串, 开始位置与截取长度
s.split( ":" )           将字符串以什么符号来划分,结果是一个数组

<2>数组对象

javaScript定义数组方式:

//第一种
var a = new Array();
a[0] = 0;
a[1] = 1;
a[2] = 2;
//第二种
var a2 = new Array(1,2,3,4,5);
//第三种
var a3 = [1,2,3,4]

对象方法

 a.length;    该数组的长度
 a.join(":")  将数组转化成字符串,中间用指定字符间隔
 a.reverse()  将数组元素位置翻转
 ---------------------------------
var a4 = ["b","c","a","d"];
console.log(a4.sort()); 将数组元素按照编码顺序排序
---------------------------------
 var a4 = [2,1,4,12];
console.log(a4.sort(numberSort)); 将指定排序规则函数传进去
 // 自定义的排序规则函数
function numberSort(a,b){
	 return a-b;
}
--------------------------------

<3>日期对象

   var data = new Date();
		console.log(data.getFullYear());
		console.log(data.getMonth()+1);
		console.log(data.getDate());
		console.log(data.getDay());
		console.log(data.getHours());
		console.log(data.getMinutes());
		console.log(data.getSeconds());

<4>Math对象
在这里插入图片描述

事件

事件是属于html标签里的内容, 可以操作标签产生事件, 通过事件去调用指定的函数

  1. οnclick=“函数”
    这是鼠标左键单击事件

  2. οnfοcus=“函数”
    输入框获取到鼠标焦点时触发 聚焦事件

  3. onblu=“函数”
    输入框失去焦点时候触发 失焦事件

  4. οnmοuseοver=“函数”
    鼠标移入到标签上时触发, 悬浮事件

  5. οnmοuseοut=“函数”
    鼠标离开标签时触发 离开事件

HTML_DOM对象

Document Object Model --> 文档 对象 模型

javaScript是一种面向对象的语言, 操作网页时,把网页中的每一个标签都当做一个对象
把这一类标签对象都称作 dom 对象里的内容
document对象表示我们整个html网页文件, 网页加载完毕后,生成document对象

具体操作:

  1. docuemnt.getElementById(“id名”)

var tobj = docuemnt.getElementById(“id名”)
通过tobj来修改其中的内容
tobj.value = “今天天气真好”
在这里插入图片描述
innerHTML: 获取标签体里的内容
在这里插入图片描述
tobj.style.background-color = “red”
修改标签的css样式
在这里插入图片描述

  1. docuemnt.getElementByTagName(“标签名”)

获取指定一列的标签,返回结果是一个集合

  1. docuemnt.getElementByName(“name属性”)

获取指定一列的标签,返回结果是一个集合

  1. docuemnt.getElementByClass(“class属性名”)

获取指定一列的标签,返回结果是一个集合

计时器

javaScript里面一共有两种方式

第一种是:



//把test函数调用,交给了setTimeOut这个定时器,延迟多少秒调用指定函数
var t = setTimeout("test()",5000)//它只执行一次,每一个定时器都有自己的一个编号
结束定时:clearInterval(t);

第二种是:


t = setInterval("test()",3000);//它执行多次, 每过三秒就执行对应的方法
结束定时:clearInterval(t);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lion Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值