JavaScript知识点

最新推荐文章于 2022-08-06 14:37:11 发布

tomorrow-001

最新推荐文章于 2022-08-06 14:37:11 发布

阅读量270

点赞数 1

分类专栏：前端文章标签： JavaScript JavaScript 全局属性 JavaScript全局函数 JavaScript内置对象 JavaScript注释

本文链接：https://blog.csdn.net/weixin_39947101/article/details/77717895

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript是一种基于对象和事件驱动的客户端脚本语言。

在HTML中嵌入JavaScript 方式：

内部引用JavaScript

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

外部引用JavaScript

<head>
    <script type="text/javascript" src="hello.js"></script>
</head>

内联引用JavaScript

<input type="button" value="点击我哦" onclick="alert('你点击了一个按钮');">

语法基本要素

区分大小写
变量不区分类型
每条语句结尾可以省略分号
注释与C,C++,java,php相同
代码段要封闭

变量

变量是弱类型变量（由值决定），统一用var定义
数据类型：number、string、boolean、object、undefined，可用typeof判断
变量命名规则基本等同于Java
定义常量，使用关键字const，但不一定所有浏览器都支持

<script type="text/javascript">
  var s="hello"; //如果未给s赋值，那么s的值为undefined
</script>

运算符

JavaScript的运算符与Java几乎一样
根据所执行的运算，运算符可分为以下类别：
- 算术运算符：+、-、 * 、 / 、%、++、--、-(求负)、~（求反）
- 比较运算符：==、!=、>、>=、<、<=
- 逻辑运算符：&&、||、！
- 条件运算符：逻辑表达式?真返回值:假返回值
- 其它运算符：&、|、<<、>>、>>>、=、===、+=、-=、*=……
运算符同样具有和Java一样的运算优先级

逻辑控制语句

和Java语言几乎相同，JS支持以下流程控制语句：
- if/else条件语句
- switch/case多分支语句
- for、while循环语句

JavaScript 面向对象（OOP）语法

JavaScript面向对象代码的写法与其它常见语言（Java C# C++）几乎完全不同

示例代码：

<script type="text/javascript">
  //创建一个站点的构造函数，name与url是其参数
function Site(name, url)
{
        this.url = url;
        this.name = name;
}

//为Site增加一个方法，用于显示网址
Site.prototype.show = function()
{
        return this.name+"的网址为："+this.url;
};

//创建一个站点集合构造函数，sites是其参数
function Sites(sites)
{
        this.sites = sites;
}

//为Sites增加一个方法，用于显示网址
Sites.prototype.show = function()
{
        var retstr = "";
        for(var i=0;i<this.sites.length;i++)
        {
                retstr+=this.sites[i].show()+"<br />";
        }
        return retstr;
};

//新建一个站点集合，包括学习，百度，谷歌
var mySites = new Sites([new Site("xuex", "www.xuexi.com"), new Site("baidu", "www.baidu.com"), new Site("google", "www.google.com")]);

//打印站点网址
document.write(mySites.show());

</script>

1、使用构造函数创建JavaScript对象

语法

<script type="text/javascript">
//var : 声明对象变量
// object -- 对象的名称
// new -- new的关键词(JavaScript关键词)
//objectname -- 构造函数名称
  var object=new objectname();

</script>

示例

<script type="text/javascript">
   //定义构造函数
function Site(url, name)
{
    this.url = "www.baidu.com";
    this.name ="百度";
}
//使用构造函数产生一个JavaScript对象的实例
var mysite = new Site();
alert(mysite.url);
</script>

2、直接定义法创建JavaScript对象

语法：

<script type="text/javascript">
  //定义对象语法
var object={};
//对象内的属性语法(属性名(property)与属性值(value)是成对出现的)
object.property=value;
//对象内的函数语法(函数名(func)与函数内容是成对出现的)
object.func=function(){...;};
</script>

示例：定义了一个site对象，对象中包括一些属性与方法

<script type="text/javascript">
  var site = {};
site.URL = "www.baudu.com";
site.name = "百度";
site.englishname = "baidu";
site.author = "郭莉";
site.summary = "实习生教程";
site.pagescount = 100;
site.isOK = true;
site.startdate = new Date(2016, 11);

site.say = function(){
  alert(this.englishname+" say : hello world!")
};
site.age = function(){
  var theage=(new Date().getFullYear())-site.startdate.getFullYear();alert(this.name+"已经"+theage+"岁了!")
}
site.say();
site.age();

</script>

3、JSON法创建对象

JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法。JSON也是一种轻量级数据交换格式。JSON非常易于人阅读与编写，同时利于机器解析与生成。JSON是在AJAX中代替XML交换数据的更佳方案。

JSON定义法类似于直接定义法，JSON定义法就是将直接定义法定义的函数与属性放到大括号中，并且去掉属性与函数签名的对象名，把等于号改为了冒号，每行后面改为逗号！

<script type="text/javascript">
  var jsonobject=
{
        //对象内的属性语法(属性名与属性值是成对出现的)
        propertyname:value,

        //对象内的函数语法(函数名与函数内容是成对出现的)
        functionname:function(){...;}
};
</script>

jsonobject -- JSON对象名称
propertyname -- 属性名称
functionname -- 函数名称
一对大括号，括起多个"名称/值"的集合
JSON使用"名称/值"对的集合表示，也可以被理解为数组(Array)
属性名或函数名可以是任意字符串，甚至是空字符串(见下面示例)
逗号用于隔开每对"名称/值"对

1、示例：简单JSON对象定义

<script type="text/javascript">
var site =
{
        URL : "www.baidu.com",
        name : "百度",
        englishname : "baidu",
        author : "郭莉",
        summary : "实习生教程",
        pagescount : 100,
        isOK : true,
        startdate : new Date(2005, 12),
        say : function(){document.write(this.englishname+" say : hello world!")},
        age : function(){document.write(this.name+"已经"+((new Date().getFullYear())-this.startdate.getFullYear())+"岁了!")}
};
</script>

2、示例嵌套JSON对象定义

<script type="text/javascript">
var sites =
{
        count: 2,
        language: "chinese",
        baidu:
        {
                URL: "www.baidu.com",
                name: "百度",
                author: "baidu",
                say : function(){document.write(this.name+" say hello")}
        },
        google:
        {
                URL: "www.google.com",
                name: "google",
                author: "guoli",
                say : function(){document.write(this.name+" say hello")}
        }
};

</script>

JavaScript 全局属性

1、Infinity -- 表示无穷大的数值属性

Infinity不是常量。(Number.POSITIVE_INFINITY是常量)

2、NaN -- 表示非数字值属性

NaN不是常量。可以通过isNaN函数判断值是否为NaN，比如：document.write(parseInt("ABC"));

3、undefined -- 表示未定义的值

<script type="text/javascript">
  var str;
document.write(str);
</script>

JavaScript全局函数

decodeURI -- 解码encodeURI函数编码的字符串
decodeURIComponent -- 解码encodeURIComponent函数编码的字符串
encodeURI -- 转义某些字符串对URI编码
encodeURIComponent -- 转义某些字符串对URI的组件编码
escape -- 使用转义序列编码字符串
eval -- 执行字符串形式的JavaScript表达式或语句，并返回结果(如果有)
isFinite -- 检测值是否为有限的
isNaN -- 检测值是否为非数字
parseFloat -- 将字符串解析为数字
parseInt -- 将字符串解析为整数
unescape -- 解码escape函数编码的字符串

1、URL编码与解码示例

<script type="text/javascript">
  var str="http://www.baidu.com/";
  str=encodeURI(str);
  document.write(str);
  str=decodeURI(str);
  document.write(str);
</script>

2、eval 示例

除了解析JSON对象外，eval在程序中很少使用

<script type="text/javascript">
var json=eval("({sitename:'baidu',sitedate:new Date(1980, 12, 17, 12, 0, 0)})");
document.write(json.sitename);
document.write(json.sitedate);
</script>

JavaScript内置对象

Array
Boolean -- 布尔对象
Date -- 日期对象
Math -- 算术运算对象
Number -- 数字对象
RegExp
String -- 字符串对象
Object
Function
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
arguments
arguments.callee
arguments.length

Array数组

数组是JS与Java语言不同的典型代表
JS中的数组异常灵活多变，可以用来实现Java中的数组、列表集合、映射集合等多种集合类型
基本语法：var arr=new Array(5);//创建了一个初始容量为5个的数组
arr[0]=12; arr[2]=“aaa”; 数组元素赋值，因为JS是弱类型，所以元素的取值范围没有限制
属性length：数组的长度

定义语法

<script type="text/javascript">
  var arr=new Array(3);
  arr[0]=“tony”;
  arr[1]=“Tommy”;
  arr[2]=“tom”;
  arr.sort();//自然排序
  for (var i = 0; i < arr.length; i++) {
    console.info(arr[i]);
  }
  //执行结果：Tommy、tom、tony
  arr.reverse();//倒序排列
  arr.push("merry");//在数组末尾增加一个元素
  var n=arr.pop();//从数组中取出末尾元素
  var s=arr.join();//join 方法拼接操作 结果如：tony,tom,tommy,merry
  var h=arr.join(";");//join 方法拼接操作 结果如：tony;tom;tommy;merry

//concat 对2个或多个数组中的元素进行拼接操作
  var arr2=new Array(2);
  arr2[0]=“mike”;
  arr2[1]=“marry”;
  var s=arr.concat(arr2);


</script>

浏览器对象模型BOM

BOM是browser object model的缩写，简称浏览器对象模型

window对象是BOM中所有对象的核心；如图：

window 对象

JavaScript中的任何一个全局函数或变量都是window的属性，因此调用它的子对象时可以不显示的指明window对象

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

1.window与self对象

self对象与window对象完全相同，self通常用于确认就是在当前的窗体内

2.window的子对象

3.window函数索引

窗体控制函数
窗体滚动轴控制函数
- scrollTo()
- scrollBy()
窗体焦点控制函数
- focus()
- blur()
新建窗体函数
对话框函数
时间等待与间隔函数

示例

<script type="text/javascript">

if(confirm("确定要离开此网站吗？")){
        alert("88 my friend.");
}
else{
        alert("learn now!");
}


var sResult=prompt("请在下面输入你的姓名", "学习网站");
if(sResult!=null){
        alert("你好"+sResult);
}
else{
        alert("你好 my friend.");
}
</script>

DOM对象

document用于表现HTML页面当前窗体的内容
document是BOM中最重要对象之一
document对象是window对象的属性
document对象包含一个节点对象，此对象包含每个单独页面的所有HTML元素

document属性

cookie -- 用户cookie
title -- 当前页面title标签中定义的文字
URL -- 当前页面的URL
anchors -- 文档中所有锚(a name="aname")的集合
applets -- 文档中所有applet标签表示的内容的集合
embeds -- 文档中所有embed标签表示的内容的集合
forms -- 文档中所有form标签表示的内容的集合
images -- 文档中所有image标签表示的内容的集合
links -- 文档中所有a(链接)标签表示的内容的集合

注释

JavaScript：

//第一种：注释内容

/*
第二种：注释内容
 */

tomorrow-001

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点

JavaScriptJavaScript是一种基于对象和事件驱动的客户端脚本语言。在HTML中嵌入JavaScript 方式：内部引用JavaScript document.write("hello!"); 外部引用JavaScript 内联引用JavaScript语
复制链接

扫一扫

专栏目录