JavaScript与DOM编程

文章目录

  • JavaScript
    • JS简介
    • 常量与变量
    • 数组
      • 创建数组
      • 访问数组:通过指定数组名以及索引号,可以访问某个特定的元素
    • 对象
      • 1.系统所提供对象
      • 2.自定义对象
      • 访问对象
    • 函数
      • 第一种
      • 第二种
      • 第三种
  • DOM编程
    • DOM文档对象模型
      • 获取节点
        • document对象
        • 节点指针
      • 创建和插入节点
        • 创建节点
        • 插入节点
          • appendChild方法
            • 注意:
      • 复制,删除和替换节点
        • 复制删除和替换节点
        • removeChild移出已存在的元素
          • 注意
        • replaceChild替换已存在的元素
          • 注意
      • 获取,设置和删除属性
        • 获取,设置和删除属性
      • 修改元素内容
        • 使用innerHTML属性改变元素内容
      • 修改元素样式
        • 使用.style修改元素样式
    • 获取表单数据
      • 未加JavaScript代码
      • 加JavaScript代码
  • 事件与事件流
    • 事件
      • DOM0级事件
      • DOM2级事件
      • DOM3级事件
    • DOM事件流
      • 冒泡型事件
      • 捕获型事件
  • BOM编程
    • window对象常用方法
      • 函数组1
        • 页面上显示时钟
        • JavaScript进度条
        • 方块平移
      • 函数组2
      • 函数组3

JavaScript

JS简介

  1. JS是一种在浏览器中运行的解释性脚本语言。JS是由ES(ECMAScript),DOM(文档对象模型),BOM(浏览器对象模型)组成
  2. ECMAScript 6.0(简称 ES6)是JavaScript语言的下一代标准,已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,称为企业级开发语言
  3. Node.js是一个基于Chrome V8引擎的JavaScript运行环境,是让JS运行在服务端的开发平台,它使得JS成为与PHP,Python等服务端语言相似的语言

常量与变量

  1. 常量声明:
const name='Bill';
  1. 变量声明:使用var关键词声明变量,可以同时声明多个变量,例如 var i=1,j=2,k=3;
  2. ES6新增了let命令,用来声明局部变量,所声明的变量只在let命令所在的代码块内有效,例如let name='Bill';
  3. JS拥有动态类型,相同的变量名可用作不同的类型
var x;					//x为undefined
var x=5;				//现在x为数字
var x="John";			//现在x为字符串
  1. 如果只是声明变量,并未对其赋值,则其默认为undefined

数组

创建数组

  1. 常规方式:
var myCars= new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
  1. 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
  1. 字面:
var myCars={
     "Saab","Volvo","BMW"};

访问数组:通过指定数组名以及索引号,可以访问某个特定的元素

  1. 以下实例可以访问myCars数组的第一个值:
var name=myCars[0];
  1. 以下实例修改了数组myCars的第一个元素:
myCars[0]="Ope1";

对象

1.系统所提供对象

2.自定义对象

自定义对象由花括号分隔,在括号内部,对象属性以名称和值对的形式(name:value)来定义,各个属性时间由逗号分隔。

var person={
     firstname:"Jhon",lastname:"Doe",id:5566};

访问对象

name=person.lastname;
name=person["lastname"];

函数

函数通常在部分或.js文件中定义
JavaScript与DOM编程_第1张图片

第一种

<!DOCTYPE html>
<html>
	<head>
	<script>
		function add(a,b)
		{
     
			return a+b;
		}
		
	</script>
</head>
<body>	
6+5=<script>document.write(add(6,5))</script>
</body>
</html>

JavaScript与DOM编程_第2张图片

第二种

<!DOCTYPE html>
<html>
	<head>
	<script>
		function fun1(txt)
		{
     
			alert(txt);
		}
		
	</script>
</head>
<body>	
<form>
	<input type="button" onclick="fun1(this.value)" value="hello">
</form>
</body>
</html>

JavaScript与DOM编程_第3张图片

第三种

<!DOCTYPE html>
<html>
	<head>
	<script src="my.js" type="text/javascript"></script>
</head>
<body>	
<form>
	<input type="button" onclick="disp()" value="OK"/>
</form>
</body>
</html>

my.js文件:

function disp()
{
     
	alert("hello world!");
}

JavaScript与DOM编程_第4张图片
注意:

  1. 外部js文件不包含

你可能感兴趣的:(Web前端技术)