JaveScript

本文介绍了JavaScript的基础知识,包括变量、数据类型、分支和循环语句。深入讲解了函数的创建与调用以及对象的定义和访问方法。此外,还探讨了DOM的概念及其在页面元素操作中的作用,如查询元素和修改元素属性。最后,通过实例展示了如何利用JavaScript实现成绩查询和绘制直角三角形的功能。
摘要由CSDN通过智能技术生成

一、JavaScript基础

1.JS脚本语言—编程类语言

实现业务逻辑和页面控制(决定功能),相当于人的各种动作。

 2.JS书写位置

JS有三种书写位置,分别为:行内  内嵌  外部

3.JavaScript中的变量

什么是变量?

 变量就是一个装东西的盒子,通俗的来说,变量就是存放数据的容器。我们通过变量名获取数据,甚至可以修改数据。

JavaScript数据类型

JavaScript分支语句

分支结构:由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。

分支语句分类:if  if…else  switch

 JavaScript循环语句

循环结构:循环语句的作用是反复地执行同一段代码,只要给定的条件能得到满足,包括在循环条件语句里面的代码就会重复执行下去,一旦条件不再满足则终止。

循环语句分类:for  while  do…while

二、JS的函数和对象

1. JavaScript中的函数

函数

封装了一段可以被重复调用或者执行的代码块,通过这个代码块可以实现大量代码的重复使用,这就叫做函数。

创建函数1

function 函数名([参数列表]) {
    //函数体代码
}
function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum

创建函数2

var 函数名 = function ([参数列表]) {
    //函数体代码
}
因为函数没有名字,所以也被称为匿名函数
这个变量名里面存储的是一个函数  
函数表达式方式原理跟声明变量方式是一致的

函数调用

函数名([参数列表])

2.JavaScript中的对象

什么是对象?

JavaScript 对象是拥有属性和方法的数据。属性:事物的特征  方法:事物的行为

创建对象的方法1

 使用字面量创建对象:
var star = {
属性1:属性值1,
属性2:属性值2,
属性3:属性值3
方法1:函数1;
}

创建对象的方法2

利用 new Object 创建对象:
var star = new Object();
star.属性1=“属性1”;
star.属性2=“属性2”;
star.属性3=“属性3”;
star.方法1=函数1

创建对象的方法3

利用构造函数创建对象:
function 构造函数名([形参1,形参2,形参3]) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}
var obj=new 构造函数名([实参1,实参2,实参3])

访问对象的属性和方法

1.访问属性:
对象.属性名
对象[“属性名”]

2.访问方法:
对象.方法名()

三、JS操作DOM对象

1.什么是DOM?

DOM ( Document Object Model ),叫做文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

<html>
    <head>
    <title>HTML DOM</title>
    </head>
    <body>
        <h1>DOI的结构</h1>
        <p>
    <a href="href">链接</a>
        </p>
    </body>
</html>

2.DOM节点分类

DOM ( Document Object Model ),叫做文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。

文档节点==>document 元素节点==>标签 属性节点==>标签的属性 文本节点==>标签体

3.DOM的作用

通过可编程的对象模型
JavaScript 能够创建动态的 HTML节点
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应 

4.DOM查询元素方法

5.DOM元素的其他方法

课后小作业

 代码实现(成绩查询)

效果实现(成绩查询)

  代码实现(直角三角形)

  效果实现(直角三角形)

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值