【JaveScript】-总结

最新推荐文章于 2023-04-16 14:59:35 发布

林深梦鹿

最新推荐文章于 2023-04-16 14:59:35 发布

阅读量385

点赞数 4

分类专栏： -----【JaveScript】

本文链接：https://blog.csdn.net/a15076159739/article/details/88872848

版权

-----【JaveScript】专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

JaveScript看完之后，没有写博客总结，只是写到了oneNote笔记上，有必要在对JS总结一下。
在这里插入图片描述

是什么

是一门脚本语言：不需要编译，直接运行
是一门解释性的语言：遇到一样代码就解释一行代码
是一门动态类型的语言
是一门基于对象的语言
是一门弱类型语言：声明变量时候使用Var

什么是ECMAScript？

是一种由Ecma国际(前身为欧洲计算机制造商协会,通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
该标准定义了叫做ECMAScript的全新脚本语言。从此以后的Javascript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。

JaveScript和HTML、CSS

HTML:提供网页的结构、提供网页中的内容
CSS：美化网页
JaveScript:用来控制网页内筒、给网页增加动态的效果，学习JavaScript语言来弥补HTML语言的不足，实现动态数据的交互。

数据类型

基本类型：数字类型number、布尔类型boolean、字符串类型string
引用类型：对象类型、函数类型
空类型：null和undefined
语法：string typeof (变量);

数值转换：
使用parseInt()转换为整数
parseFloat()转换为小数
true转NaN,false转NaN。””字符串转为NaN，非数字字符串转为NaN。
Number()也强制类型转换。转换规则与parseInt()是不一样的,number转换比较严格
其他类型转字符串：
.tostring() 和string();

使用typeof()操作符是数据类型检测方法，可以据值来检测是什么数据类型。

如：<script>
    document.write(typeof ("ABC"));
    document.write("<br/>");
    document.write(typeof"123");
    document.write("<br/>");
    </script>
运行结果显示：string  number

函数和对象

JavaScript中的函数可以理解为C#中的方法，都是用来封装功能的段码段。使用function关键字定义，可以带参数可以不带参数，并且参数可以同名成为形参。
函数作用域：在JavaScript中变量的作用域，并非和C、Java等编程语言似得，在变量声明的代码段之外是不可见的，我们通常称为块级作用域，然而在JavaScript中使用的是函数作用域（变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的）。

对象属性：JavaScript 对象是属性变量的容器。有两种方式访问对象：

p.name;
p[name];

JS创建object的对象的两种方法

1、使用new操作符后跟Object构造函数 如：
var person = new Object();  
 person.name = "kitty";
 person.age = 25;

构造函数方法：

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.sayName = function(){
       alert(this.name);
    };
  };
  var person1 = new Person("zhou",23);
  person1.sayName();

BOM

BOM称为浏览器对象模型，主要用来对浏览器进行相关的操作，有了BOM，才使JavaScript可以操作浏览器的相关对象，例如：打开窗口、关闭窗口，弹出提示框等等。
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
常见的alert()、confirm()都属于window对象的方法。（Window 对象表示浏览器中打开的窗口）
全局变量是 window 对象的属性。全局函数是 window 对象的方法。

Window方法

window.open() ：打开新窗口。

<scripttype="text/javascript">
function openWin() {
        window.open("HtmlPage1.html");
    }
</script>

window.close() ：关闭当前窗口。
window.moveTo() ：移动窗口。

<scripttype="text/javascript">
var w;
function openWindow() {
        w = window.open("HtmlPage1.html", "", "width=200,height=100");
    }
function moveWindow() {
        w.moveTo(300, 400);
    }
</script>
moveTo() 方法可把窗口的左上角移动到一个指定的坐标。

window.resizeTo() ：调整窗口的尺寸。

window.history对象

window.history对象包含浏览器的历史记录。

属性	说明
length	返回历史列表中的网址数

方法	说明
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go（）	加载history列表中某个具体界面

window.location对象

window.location对象用于获得当前页面的地址 (URL)，并也可把浏览器重定向到新的页面。
主要属性：
host:返回一个URL的主机名和端口
href:返回完整的URL

DOM

DOM称为文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）DOM。
在这里插入图片描述
通过可编程的文档对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

document对象的方法和属性

在JavaScript中，如果想要操作HTML元素，则首先必须要找到该元素，查找到HTML元素之后就变为对象，那么给对象赋值和获取值就可以操作HTML元素了，JavScript能够操作HTML元素，就是通过DOM来实现的。

getElementById

在HTML中，所有的标记都可以具有一个唯一的id值，，可以轻松找到HTML元素
语法：var 变量名= document.getElementById("HTML元素的id值");

getElementsByClassName

这里说的类名是指CSS中的类名。这样我们就可以通过CSS的类名来查找HTML元素
语法：var 集合名= document.getElementsByClassName("类名");

-getElementsByName

通过HTML元素的name属性值查找HTML元素，使用getElementsByName() 方法。由于在HTML代码中，有的元素的name值可能会相同，所以
getElementsByName()方法返回的是一个NodeList集合。

getElementsByTagName

  HTML标记的标签名是指某一类HTML元素
 语法：  var 集合名= document.getElementsByTagName("标签名");

添加和删除html元素

如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

例子：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title></title>
<script>
//创建新的元素
function createNewElement() {
//创键一个p元素
var p1 = document.createElement("p");
//创建一个文本内容节点
var text1 = document.createTextNode("你好");
//将文本内容节点添加到p1元素中
            p1.appendChild(text1);
//最后将p1元素添加到已有的元素后面
var div1 = document.getElementById("div1");
            div1.appendChild(p1);
        }
</script>
</head>
<body>
<inputid="Button1"type="button"value="开始创建元素""createNewElement()"/>
<divid="div1"></div>
</body>
</html>

删除html元素：使用removeChild()方法从父元素中移除子元素。

总结

学习了BOM和DOM的属性和方法，就能做出很多例子，结合之后的实践，相信会理解的更深刻。

林深梦鹿

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
42
评论
【JaveScript】-总结

前言JaveScript看完之后，没有写博客总结，只是写到了oneNote笔记上，有必要在对JS总结一下。是什么是一门脚本语言：不需要编译，直接运行是一门解释性的语言：遇到一样代码就解释一行代码是一门动态类型的语言是一门基于对象的语言是一门弱类型语言：声明变量时候使用Var什么是ECMAScript？是一种由Ecma国际(前身为欧洲计算机制造商协会,通过ECMA-262标准化的...
复制链接

扫一扫