JavaScript基础1

实验介绍:

JavaScript可以使网页进行交互。

它和Java没有任何关系,但在它出现的时候Java很热门,为了引起人们对它的重视,它起名JavaScript。

理想的web页面划分

内容(HTML中)
外观样式(css中)
脚本/代码(JavaScript文件中)

一:JavaScript里的新概念语法

在越来越复杂的web设计中,属性和函数捆绑在一起,不同属性构成了类。为了调用类就需要用到dom对象,对象是类的具体实例化。

不理解正常以后还会重复讲到

当浏览器加载一个网页时,它会将网页中的HTML内容解析成一个树形结构,这个结构就被称为DOM树。
image

[此处插入图片],该图片作者为未知,来源于百度,仅学习非商用。

getElement对象

Document 对象的 getElementById() 方法 可以通过它指定获得id的HTML元素。
方法即函数,getElementById() 是内置方法,不用定义
document.getElementByld("所需元素ID")
image

[此处插入图片],该图片作者为未知,来源于百度,仅学习非商用。

如果要添加新元素,可以使用
document.createElement()
image

[此处插入图片],该图片作者为未知,来源于Mozilla Developer,仅学习非商用。

根据Class属性值获取元素对象们
document.getElementsByClassName()

转义字符

转义字符是键盘无法录入的字符和被当成特殊用途而需要转回它原来意义的字符。
image

[此处插入图片],该图片作者为西安交通大学两位老师,来源于mooc,仅学习非商用。

字符串连接和加法

在字符串的连接运算中,只要有一方是字符型,结果就是字符型。
1+3+“5”+7+9从左到右加,1+3都是数字所以结果是4;
4+“5”有字符所以+号充当连接符,结果是字符型“45”,
“45”加7同理。
image

[此处插入图片],该图片作者为西安交通大学两位老师,来源于mooc,仅学习非商用。

变量用var关键字声明

例如:var age= 21
区分大小写(大小写敏感);类型不用指定,JavaScript是解释型语言。

注释

//单行注释
/这是Javascript
的多行注释
/

二:Javascript的函数

字符的转换

parselnt函数和parsefloat函数
parselnt把值转换成整数型
parselnt("5years") //输出:5
parsefloat转化成浮点型
parsefloat("3.75years349") //后面的数字省略 输出:3.75
parsefloat("years") //输出:NaN

字符的截取和索引号的获取

substring函数和indexOf函数
var s=“xiannong's blog ”
s.indexOf("")代表取s出现第一个空格的索引号
s.substring(0,s.indexOf(""))从0截到第一个空格出现的索引号。
var s2=s.substring(0,s.indexOf("")); //输出“xiannong’s”

math属性函数

Math.PI 圆周率,3.1415。。。
Math.E 自然对数底数,2.718。。。
Math.abx(x) 返回x的绝对值
Math.max(x,y) 返回x和y中最大值

三:JavaScript程序三步骤

1创建HTML控件

以创建一个botton按键举例
image
image

2编写JavaScript事件处理函数

按了按钮会发生什么
alert()弹窗输出内容
image

3连接事件处理程序和控件

image
image

posted on 2024-10-13 17:23  纤秾  阅读(122)  评论(0编辑  收藏  举报