JavaScript基础(一)

简介: JavaScript基础(一)

什么是JavaScript(简称js)

   JavaScript是一种脚本语言。

脚本,一条条的文字 命令。执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行。常见的脚本:批处理脚本、T-SQL脚本、VBScript等。(.net生成的exe文件用记事本打开看不懂。)

HTML只是描述网页长相的标记语言,没有计算、判断能力,如果所有计算、判断(比如判断文本框是否为空、判断两次密码是否输入一致)都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的脚本语言。

JavaScript和Java没直接的关系,唯一的关系就是JavaScript原名LiveScript,后来吸收了Java的一些特性,升级为JavaScript。JavaScript有时被简称为JS。

JavaScript是解释型语言,无需编译就可以随时运行.   JScript

JavaScript可以跨平台,只要有一个支持JS的浏览器即可。(Windows、Linux、Mac、Unix)

注:1.脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等。

脚本程序相对一般程序开发来说比较接近自然语言,可以不经编译而是解释执行,利于快速开发或一些轻量的控制。


2.动态程序一般有两种实现方式,一是二进制方式,一是脚本方式。

二进制方式是先将我们编写的程序进行编译,变成机器可识别的指令代码(如.exe文件),然后再执行。这种编译好的程序我们只能执行、使用,却看不到他的程序内容。

脚本简单地说就是一条条的文字命令,这些文字命令是我们可以看到的(如可以用记事本打开查看、编辑),脚本程序在执行时,是由系统的一个解释器,将其一条条的翻译成机器可识别的指令,并按程序顺序执行。因为脚本在执行时多了一道翻译的过程,所以它比二进制程序执行效率要稍低一些。


JS的开发环境

Visual Studio 2010(推荐)

JavaScript或jQuery都直接有智能提示

Visual Studio 2008(支持jQuery智能提示的方法)

安装补丁后js与jQuery都有智能提示

首先安装:Visual Studio 2008 SP1补丁

然后再安装: VS90SP1-KB958502-x86补丁(for jQuery)

使用jQuery的智能提示需要引入jQuery-1.x.x-vsdoc.js(或将该文件放在与jQuery-1.x.x.js的同目录下)

JS是非常灵活的动态语言,不像C#等静态语言那样严谨,开发工具中的JS完成功能只是一个辅助、建议。“.”出来的成员调用可能不能用,“.”不出来的成员也许也能调用,因此不要因为“点儿不出来”而担心代码有问题。编写js时,自己应该清楚当前对象有些什么成员,不能依赖智能提示。

VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J。

JavaScript基本组成

基本语法(浏览器基本都支持,有统一标准)

Dom(文档对象模型)(基本都支持,但可能会有差别,有统一标准)

Bom(浏览器对象,一般功能浏览器支持,但没有统一的标准)控制浏览器可见区域以外的部分(打开新窗口、关闭浏览器窗口、获取分辨率screen、XmlHttpRequest等。)

注:


JavaScript的组成:


核心的JavaScript由以下3部分组成:


ECMAScript(基本语法)


语法、类型、关键字、保留字、语句、运算符、对象


Dom文档对象模型(封装好的一些函数库)


在html于xml中都是用dom


Xml与html的应用程序接口(api)


Bom浏览器对象模型


XMLHttpRequest、ActiveXObject对象等。浏览器特有的。


JavaScript语法概述

大小写敏感,JavaScript严格区分大小写。(n与N是两个不同的变量。)

弱类型语言(声明变量都用var),不存在int n=10;string s=“a”;的情况,所有变量都用var。因为是“动态类型”,所以下面这段代码是合法的:var  n=10;n=“a”;√

Js的注释,与C#、Java的相同(//单行注释、/*  多行注释 */)。

很多语法与Java语言或C#语言类似。有Java语言或C#语言编程基础的同学学习JavaScript语法会很容易上手。

JavaScript入门1

编写第一个JavaScript程序:显示当前时间。

<script type="text/javascript">

       alert(new Date().toLocaleDateString());

</script>

<script language=“...” >W3C已经不推荐使用。

网页中的JavaScript代码应该放到<script></script>标签中,<script>标签可以放到<head>、<body>等任意位置,并且一个页面可以有不止一对<script></script>标签。

alert()函数是弹出一个消息窗口。new Date()创建一个Date对象,默认时间是当前时间。

放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。

注:JavaScript如果遇到错误,有错误的<script></script>中的代码不会执行,但是不会影响后面的而其他<script></script>代码和html的显示。


程序是一句、一句执行的。当执行完第一个<script>标签前,不会执行后面的ddddddddddddddddddddddddd(用IE测试,有时候会有缓存问题。)


<script type="text/javascript">


alert("body1");


</script>


dddddddddddddddddddddf


<script type="text/javascript">


alert("body2");


</script>


adsafasdfafdas


<script type="text/javascript">


alert("body3");


</script>


JavaScript入门2

导入外部JavaScript文件:

除了可以在页面中声明JavaScript以外,还可以将JavaScript写到单独的js文件中,然后在页面中引入:

<script src=“test.js” type=“text/javascript”></script>。


声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*),内容分发网络。

注意:不要写成

<script src=“test.js” type=“text/javascript”/>否则会有问题,这是一个比较特殊的地方。(×)


这种方式可以跨域加载js文件。

可以将导入外部文件的<script>标签写在文档最后,提高用户体验。

注:1.JavaScript如果遇到错误,有错误的<script></script>中的代码不会执行,但是不会影响后面的而其他<script></script>代码和html的显示。


2.当使用导入外部js文件时,由于js得加载时“阻塞”模式,所以需要等到js全部加载完成以后才会继续向后执行,所以如果对于性能要求比较高的时候可以考虑把js加载放到页面的最后。


CDN:


CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。


JavaScript的事件

JavaScript中也有“事件”的概念。

单击一个按钮显示当前时间。

<input type=“button” οnclick=“ js代码" />

一个特殊的地方:单击一个超链接显示当前时间。

<a href=“javascript:js代码”>热点文字</a>

只有超链接的href中的JavaScript中才需要加“javascript:”,因为它不是事件,而是把”javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、“mailto:”一样的网络协议,交由js解析引擎处理。只有href中这是这是一个特例。

超链接为“死链”时,使用#与javascript:void(0);的区别。

在工作中,如果我们想把a标签中的链接置成空链接,我们一般会用两种方法:


<a href="#" target="_blank"></a>或者


<a href="javascript:void(0);" target="_blank"></a>


href="#"方法:

其实也是空连接的意思,但是点击之后会自动跳转到页面的最上面,因为用了这个方法就相当于点击了一个锚记,但是这个锚记又没写ID,所以就默认跳转到页面顶部。


href="javascript:void(0);"方法:

void是一个操作符,这个操作符指定要计算一个表达式但是不返回值。如果在void中写入0(void(0)),则什么也不执行,从而也就形成了一个空链接。


#与javascript:void(0)的区别:

#方法会跳转到页面的顶部,并且在页面URL后面会出现#,而javascript:void(0)方法不会,所以如果是空连接的话,还是推荐javascript:void(0)。


注:只有超链接的href中的JavaScript中才需要加“”javascript:”,因为它不是事件,而是把“”javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、“mailto:”一样的网络协议,交由js解析引擎处理。只有href中这是这是一个特例。


有时候不想让程序触发onclick事件,但是单击的时候还想执行一些js代码。


这个时候就考虑用href="javascript:js代码",这里的“javascript:”,是表示一种协议。告诉浏览器“:”后面的是一段js代码。


   <a href="javascript:alert('js弹出对话框');">执行</a>


JavaScript中void是一个操作符,该操作符指定要计算一个表达式返回undefined。一个无用的值。


void 操作符用法格式如下:

1. javascript:void (expression)

2. javascript:void expression

expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。


<a href="javascript:void(0)">单击此处什么也不会发生</a>


<a href="javascript:document.form.submit();">submit form</a>


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
237 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
221 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
83 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
158 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
110 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
144 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
293 1
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
143 0
原生js制作选项卡详解,适合无基础的人学习