【JavaScript基础】

javaScript

javaScript概述

  • javaScript历史:
    JavaScript是由Netscape公司(美国网景公司)开发的一种脚本语言。
    Netscape公司将这种脚本语言命名为LiveScript,与java一样,也是面向对
    象的语言,而且无需编译,可由浏览器直接解释运行。
    Netscape公司见LiveScript大有发展前途,而**SUN公司( java)**也觉得可以
    利用Livescript为Java的普及做铺垫,于是两家签订协议,将LiveScript改
    为JavaScript。
  • JavaScript一种直译式脚本语言,用来为网页添加各式各样的动态功能
    (javaScript可以操作网页内容),不需要编译可直接通过浏览器解释运
    行,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
  • 作用
    1.响应客户端鼠标和键盘事件
    2.客户端页面表单数据验证
    3.使用JavaScript动态的改变页面标签的样式
    JavaScript与html,css关系
    在这里插入图片描述
    脚本写在哪里?
    javaScript脚本写在一组
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		//  var array=new Array(1,2,3,4,5);
		// // console.log(array);
		// console.log(array.join('-'));
		 var date=new Date();
		 var day=date.getMonth();
		 alert(day);//alert:提示对话框
		// console.log(date.getDay());
		// console.log(date.getMonth());
		// console.log(date.getFullYear());
	</script>
	<body>
		<div id="格子">
		
		</div>
	</body>
</html>

基础语法

JavaScript支持的数据类型

  • 1、数值型(number):
    其中包括整型数和浮点型数。
  • 2、布尔型(boolean):
    即逻辑值,true或flase。
  • 3、字符串型:
    由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。
    (使用单引号来输入包含引号的字符串。)
  • 4: undefined类型
  • 5: Object类型
    算术运算符
    在这里插入图片描述
    赋值运算
    在这里插入图片描述
    比较运算符
    在这里插入图片描述
    逻辑运算符
    在这里插入图片描述
    条件运算符
    JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
    语法:
    var result = (条件表达式)?结果1:结果2
    当条件成立返回?后的内容,否则返回:后的内容
    控制语句
  • 第一种是选择结构
    1.单一选择结构(if)
    2.二路选择结构(if/else)
    3.多路选择结构(switch)
  • 第二种类型的程序控制结构是循环结构。
    1.由计数器控制的循环(for)
    2.在循环的开头测试表达式(while)
    3.在循环的末尾测试表达式(do/while)
    4.break continue

函数

定义函数

函数定义的基本语法:
function functionName([arguments]){
javascript statements
[return expression]
}
function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表,各个参数之间用逗号隔开,可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值,同样是可选的的语句。

函数-调用

由函数来调用
< script type= “text/javascript” >
function fun(){
alert(“test”);
}
fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
< /script >

全局函数

  • parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串,
    则字符串开头的数字部分被转换成整数,如果以字母开头,则返回
    “NaN”
  • parseFloat(arg) 把括号内的字符串转换成浮点数之后的值,字符串开头的
    数字部分被转换成浮点数,如果以字母开头,则返回“NaN”
  • typeof (arg)返回arg值的数据类型。
  • eval(arg) 可运算某个字符串。

内置对象

String字符串

在这里插入图片描述

Array数组

数组的定义方法:
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素,就用:
<数组名>[下标] = 值;
如果想在定义数组的时候直接初始化数据,请用:
var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);
还可以:var <数组名> = [<元素1>, <元素2>, <元素3>…];
在这里插入图片描述

Date

获取日期

  • new Date() 返回当日的日期和时间
  • getFullYear() 返回四位数字年份
  • getDate() 返回一个月中的某一天 (1 ~ 31)
  • getMonth() 返回月份 (0 ~ 11)
  • getDay() 返回一周中的某一天 (0 ~ 6)
  • getHours() 返回 Date 对象的小时 (0 ~ 23)
  • getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
  • getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

Math

Math 对象,提供对数据的数学计算。
属性
PI 返回π(3.1415926535…)。
方法

  • Math.abs(x) 绝对值计算;
  • Math.pow(x,y) 数的幂;x的y次幂
  • Math.sqrt(x) 计算平方根;
  • Math.ceil(x) 对一个数进行上舍入
  • Math.floor(x) 对一个数进行下舍入。
  • Math.round(x) 把一个数四舍五入为最接近的整数
  • Math.random() 返回 0 ~ 1 之间的随机数
  • Math.max(x,y) 返回 x 和 y 中的最大值
  • Math.min(x,y) 返回 x 和 y 中的最小值

事件

一些常用的事件:

  • onclick()鼠标点击时;
  • onblur()标签失去焦点;
  • onfocus()标签获得焦点;
  • onmouseover()鼠标被移到某标签之上;
  • onmouseout鼠标从某标签移开;
  • onload()是在网页加载完毕后触发相应的的事件处理程序;
  • onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

HTML DOM

DOM是Document Object Model文档对象(网页中的标签)模型的 缩写.
通过html dom,可用javaScript操作html文档的所有标签.

** 查找 元素**
在这里插入图片描述
改变HTML

  • Html dom允许javaScript 改变html标签的内容。
    改变 HTML 标签的属性
    document.getElementById(“username").value=“new value";
    document.getElementById(“image”).src=“new.jpg";
  • 修改 HTML 内容的最简单的方法时使用 innerHTML 属性
    document.getElementById(“div”).innerHTML=new HTML

HTML DOM - 改变 CSS
html dom允许 javaScript改变html标签的样式。
语法:
document.getElementById(“id”).style.property=new style;
:document.getElementById(“p2”).style.backgroundImage=“url(bg.jpg)”;

计时

通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执
行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消
setTimeout() setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值