JavaScript入门

目录

一、JavaScript概述

二、基本语法

1.第一个JavaScript程序

2.变量

3.数据类型

4.运算符

三、函数

1.定义函数

2.调用

3.全局函数

四、内置对象

1.String字符串

2.Array数组

3.Date

4.Math

五、事件

六、HTML DOM

七、计时


一、JavaScript概述

1.JavaScript原名叫liveScript,是由美国网景开发的一种用于对网页操作的脚本语言

2.JavaScript一种直译式脚本语言,用来为网页添加各式各样的动态功能 (javaScript可以操作网页内容),不需要编译可直接通过浏览器解释运行,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

3.JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言,其目的 就是增 强Web客户交互。弥补了HTML的缺陷。

二、基本语法

javaScript脚本写在一组<script>标签中,此标签可以放在body或head中,一般习惯放在head中,还可以将脚本写在外部的.js文件中,在html页面中导入.js文件

1.第一个JavaScript程序

<html>
    <head>
        <script type="text/javascript">
            alert(“hello javaScript”);
        </script>
    </head>
    <body>
    </body>
</html>

2.变量

声明变量用var关键字

例:var name;

在声明变量的同时,也可以对其进行赋值

例:var name=“Tom”;

3.数据类型

(1)数值型(number)

        包括整型和浮点型

(2)布尔型(boolean)

        true或false

(3)字符串型

        由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。 (使用单引号来输入包含引号的字符串。)

(4)undefined类型

(5)Object类型

4.运算符

        JavaScript里的运算符与其他语言的运算符并无太大区别,其中有区别的地方在于比较运算符中的“=”,“==”和“===”(JavaScript中有三等符号)

运算符描述例子
=赋值x=5
==等于x==8(false)
===全等(值和类型)

x===5为true

x===“5”为false

三、函数

1.定义函数

function functionName([arguments]){
    javascript statements
    [return expression]
}

function:表示函数定义的关键字

functionName:表示函数名

arguments:表示传递给函数的参数列表,各个参数之间用逗号隔开,可以为空

statements:表示实现函数功能的函数体

return expression:表示函数将返回expression的值,同样是可选的语句

2.调用

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

3.全局函数

parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回 “NaN” 。

 parseFloat(arg) 把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN” 。 •

typeof (arg)返回arg值的数据类型。 • eval(arg) 可运算某个字符串

四、内置对象

1.String字符串

属性

length 用法:返回该字符串的长度.

方法

charAt(n):返回该字符串位于第n位的单个字符.

indexOf(char):返回指定char首次出现的位置.

lastIndexOf(char) :跟 indexOf() 相似,不过是从后边开始找.

substring(start,end) :返回原字符串的子字符串,该字符串是原字符串从start位 置到end位置的前一位置的一段.

substr(start,length) :返回原字符串的子字符串,该字符串是原字符串从start位 置开始,长度为length的一段.

split(分隔符字符) :返回一个数组,该数组是从字符串对象中分离开来的,决定了分离的地方,它本身不会包含在所返回的数组中。

例如:'1&2&345&678'.split('&')返回数组:1,2,345,678

2.Array数组

数组的定义方法:

var = new Array();

这样就定义了一个空数组。以后要添加数组元素,就用:

[下标] = 值;

如果想在定义数组的时候直接初始化数据,请用:

var = new Array(, , ...);

还可以 var = [, , ...]

属性

length :数组的长度,即数组里有多少个元素。

方法

join() :返回一个字符串,该字符串把数组中的各个元素串起来,用置于元素与元素之间。

reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。

sort() :使数组中的元素按照一定的顺序排列。如果不指定,则按字母顺序排列。 对数字排序需要调用排序函数。 function sortNumber(a,b){

                                return a - b;

                        }

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)

4.Math

方法

        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

五、事件

        onclick()鼠标点击时;

        onblur()标签失去焦点;

        onfocus()标签获得焦点;

        onmouseover()鼠标被移到某标签之上;

        onmouseout鼠标从某标签移开;

        onload()是在网页加载完毕后触发相应的的事件处理程序;

        onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序

六、HTML DOM

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

通常,通过 JavaScript,您需要操作 HTML 标签

有四种方法来做这件事:

通过 id 找到 HTML 标签

        document.getElementById(“id");

通过标签名找到 HTML 标签

        document.getElementsByTagName("p");

通过类名找到 HTML 标签

        document.getElementsByClassName("p");

通过name找到 HTML 标签

        document.getElementsByName(“name");

Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

        document.getElementById(“username").value=“new value";         document.getElementById("image").src=“new.jpg";

 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()

  • 28
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

刘伊珂

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

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

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

打赏作者

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

抵扣说明:

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

余额充值