HTML5:javascript基础

学霸女神

已于 2023-03-10 16:54:27 修改

阅读量1k

点赞数 1

分类专栏： HTML5 文章标签： javascript html5 html Powered by 金山文档

于 2023-03-10 16:51:32 首次发布

本文链接：https://blog.csdn.net/qq_56545699/article/details/129422396

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

@[TOC](文章目录)

介绍：

JavaScript是WEB页面的逻辑控制器，它创建动态页面，并且让用户与客户端页面进行交互。

JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行。

是一种轻量级的编程语言，用来建立动态的、交互式的网页内容。

是一种解释性的语言

Javascript脚本需位于<script></script>之间

对大小写敏感

Javascript使用方法：

文档页面内使用：

<script type="text/javascript">
    document.write("hello World!");
</script>

document.write字段是标准的Javascript命令，用来向页面写入输出。

注释：单行注释符 // 多行注释符/*......*/

引入外部脚本文件：

外部引入.js文件，然后将.js文件指定给<script>标签中的"src"属性，就可以使用这个外部文件了：

<!DOCTYPE html>
<html>
    <head>
        <script src="test.js"></script>
    </head>
    <body>
    </body>
</html>

注意：外部文件中不能含有<script>标签

另外这里的test.js与该html文件是存放在同一个文件夹内，这里要确保使用正确的绝对路径或者相对路径，以防止找不到对应的js文件。可以把.js文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

Javascript原理

一个完整的Javascript实现是由3个不同的部分组成的：

ECMAScript 描述了该语言的语法和基本对象；

DOM 描述了处理网页内容的方法和接口；

BOM 描述了与浏览器进行交互的方法和接口。

BOM

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。它只是Javascript的一个部分，没有任何标准。

这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

DOM

文档对象模型（Document Object Model）它在本质上是一种文档平台。要改变页面的某个东西，JavaScript就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）

DOM规定：

整个文档是一个文档节点

每个HTML标签是一个元素结点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

DOM节点类型：

DOM树的根节点是个Document对象，JavaScript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。Comment类型的节点是指文档的注释。

利用DOM，开发人员可以动态地创建HTML文档，可以遍历、增加、删除、修改HTML文档内容。DOM提供的API与编程语言无关，所以对一些DOM标准中没有明确定义的接口，具体在不同平台或语言中有所差别

Document对象的属性和方法

document.write(“Hello World”);             
                   //可用于直接向HTML输出流写内容

var x = document.getElementById(“intro”);
                   //通过ID查找HTML元素

x.innerHTML = “HELLO javascript”;
                   //改变元素内容

document.getElementById(“image”).src = “land.jpg”;
                   //改变HTML属性

DOM对象简介：

ECMAScript

在 JavaScript 中创建变量经常被称为“声明”变量。您可以通过 var 语句来声明 JavaScript 变量。

声明变量的时候不需要指定类型：

var x;
var pi = 3.14;
var name = “Bill Gates”;
var isEnabled = true;

基本的数据类型主要由四种：

Undefined：未定义类型，用于不存在或没有被赋初始值的变量或对象的属性。例如：var x;

Null：数据类型为空值

Boolean ：布尔型，取值true或false

String：字符型数据。JavaScript不区分单个字符和字符串，任何字符或字符串都可以用双引号或单引号引起来。例如：

var nameA = “Tom”;

var nameB = ‘Tom’;

var str = “This is ‘Tom’”;

个别特殊的运算符

恒等运算符，例如：a===b，如果a的值等于b，而且它们的数据类型也相同，则返回True，否则返回False，例如：

var a=8，b="8";
a==b; //true
a===b: //false

无符号位右移运算，将左边数据表示的二进制数值向右移动，忽略出被移除的位，左侧空位补0.例如：

9>>>2,结果为2

函数

在<script>中直接调用函数名

<Script Language = “JavaScript”>
function PrintWelcome()
{
      document.write(“欢迎使用javascript”);
} 
PrintWelcome();
</Script>

调用.js文件函数

在.js文件中写入一个函数，让其输出形参：

// ----- 创建mylib.js文件 ------
function PrintString(str) {
       document.write(str);
}

在HTML文件中调用函数：

<body>
<script src=“mylib.js”></script>
<script>
    PrintString(“传递参数”);
</script>
</body>

与事件结合调用Javascript函数

<button type = “button”  onclick=“myFunction(‘BillGates’,’CEO’)”>
点击这里
</button>
<script>
function myFunction(name, job)
 {   
      alert(“Welcome”+name+”  , the”+job);           
}
</script>
<!--这个目前还不太了解，先记一下-->

JavaScript类的定义和实例化

语法：

function className(){
          //具体操作
}

举例：

创建函数方法一：

function Person （） {
    this.name = “张三”;
    this.sex = “男”;
    this.say = function(){
        document.write(“我的名字是”+ this.name +“，性别是” + this.sex +“。” ); 
    }  }

这里的this.say 是一个方法，创建一个方法用来输出

类在使用的时候需要实例化（还是在js文件里）：

var zhangsan = new Person();
Zhangsan.say();

然后在HTML中调用该js文件，运行HTML文件，就可以看到输出的内容：

大家好，我的名字是张三，性别是男。

创建函数方法二：

通过对象直接初始化创建对象

function zhangsan = {
    name : “张三”,
    sex : “男”,
    say : function(){
        document.write(“大家好，我的名字是”+this.name+”，性别是”+this.sex); }
}
zhangsan.say();

创建函数方法三：

不在函数体内初始化，在定义类的时候设置参数

function Person （name,sex） {
    this.name = name;
    this.sex = sex;
    this.say = function(){
        document.write(“我的名字是”+ this.name +“，性别是” + this.sex +“。” ); 
    }  }

//创建对象
var zhangsan = new Person("张三","男");
Zhangsan.say();

添加对象的属性和方法

使用“.”来访问对象属性:

objectName.propertyName

使用“[]”来访问对象属性

objectName[propertyName]

使用“.”来访问对象方法

objectName.methodName()

举例：

function Person （name,sex） {
    this.name = name;
    this.sex = sex;
    this.say = function(){
        document.write(“我的名字是”+ this.name +“，性别是” + this.sex +“。” ); 
    }  }

//创建对象
var zhangsan = new Person("张三","男");
Zhangsan.say();
//动态添加属性和方法
zhangsan.tel="029-389820892";//动态添加属性
zhangsan.run=function(){//动态添加run方法
    return "我跑的很快" 
}
//访问对象的属性和方法
alert("姓名："+zhangsan.name);
alert("性别："+zhangsan.sex);
alert(zhangsan.say());
alert("电话："+zhangsan.tel);
alert(zhangsan.run());

注意：

动态添加的属性仅仅在该对象实例zhangsan中才存在（以上代码的11-15行）。要想添加给所有的实例对象，可以用原型方法动态添加属性和方法：

下面是.js里面的内容（我取得名字是：test.js）

function Person (name,sex){
    this.name = name;
    this.sex = sex;
    this.say = function(){
        document.write("我的名字是:"+ this.name +"<br>性别是:" + this.sex +"。" ); 
    }  }
//添加原型属性和原型方法
Person.prototype.grade="2019";
Person.prototype.run=function(name){
    return name+"我跑的很快！";
}
//创建对象
var zhangsan=new Person("张三","男");
zhangsan.tel="029-191927386";
//访问对象的属性和方法
alert("姓名："+zhangsan.name);
alert("性别："+zhangsan.sex);
alert(zhangsan.say());
alert("年级："+zhangsan.grade);
alert(zhangsan.run(zhangsan.name));//输出：张三我跑的很快
//创建一个新的实例化对象，查看上面动态添加的方法和属性是否能用
var lisi=new Person("李四","男");
alert(lisi.run(lisi.name)); //输出：李四我跑的很快
alert("年级："+lisi.grade);//输出:年级：2019

下面是HTML里的内容，主要要用来测试效果:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            /*css注释方式 */
        </style>
        <script src="test.js"></script>
    </head>
    <!--h5注释方式-->
    <body> 
    </body>
</html>

运行之后是在浏览器弹出一个个小框，但是信息是全部都弹出来了的：

点击确定是可以显示下一条信息的。

但是我想要的效果是全部显示在页面上，而不是这么弹出来的：

下面是js里面的内容，HTML里面没有变

function Person (name,sex){
    this.name = name;
    this.sex = sex;
    this.say = function(){
        document.write("我的名字是:"+ this.name +"<br>性别是:" + this.sex +"。" +"<br>"); 
    }  }
//添加原型属性和原型方法
Person.prototype.grade="2019";
Person.prototype.run=function(name){
    return name+"我跑的很快！";
}
//创建对象
var zhangsan=new Person("张三","男");
var lisi=new Person("李四","男");
zhangsan.tel="029-191927386";

document.write(zhangsan.say());//从js向html输出的方式，用document.write()
document.write("<br>张三的电话号码："+zhangsan.tel);
document.write("<br>张三的年级："+zhangsan.grade+"<br>");

document.write(lisi.say());
document.write("<br>李四的年级："+lisi.grade);
document.write("<br>李四的电话："+lisi.tel);

仍然是实例化“zhangsan”和“lisi”两个对象，“zhangsan”动态添加“tel”，Person向所有对象添加“grade”。然后输出查看所有信息：

该图是浏览器输出效果，发现电话号码只插入了张三的信息，年级是插入了两个人的信息。

但是中间红线的两个地方为什么会有连个“undefined”，暂时我也不太懂，后面再琢磨！或者有明白的朋友可以告知一下，我将不胜感激！！！

学霸女神

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML5:javascript基础

Javascript使用方法：文档页面内使用；引入外部脚本文件。Javascript原理：BOM 、DOM、ECMScript的简单介绍。“===”“>>>”运算符，函数的调用、JavaScript类的定义和实例化，动态添加对象的属性和方法（添加单个对象的属性以及添加所有对象的属性）以及显示在网页端
复制链接

扫一扫