JavaScript基础细讲
JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript 重新进行设计,并改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。
JavaScript优点
1.简单性
JavaScript是一种脚本编写语言,它采用小程序段的方式实现编程,像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
2.动态性
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
3.跨平台性
JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可以正确执行。
4.节省CGI的交互时间
随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流,确浏览的身份、需服务的内等等,这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然,通过网络与用户的交互过程一方面增大了网络的通信量,另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时,需要一个进程为它服务,它要占用服务器的资源(如CPU服务、内存耗费等),如果用户填表出现错误,交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多,服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用CGI的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。
编写JavaScript
1、JavaScript代码存在形式
<!-- 方式一 --> <script type"text/javascript" src="JS文件"></script><!-- 方式二 --> <script type"text/javascript">Js代码内容 </script>
2、JavaScript代码存放位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> <script>alert('123'); </script>
每个语言刚开始都是Hello World那咱们也来写一个吧
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>document.write("Hello World!!");document.write("My name is 张岩林");</script> </body> </html>
效果如下:
注意:每一行代码写完要写一个分号来分割开,谨记
JavaScript变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。
<script type="text/javascript">// 全局变量name = 'seven';// 定义函数function func(){// 局部变量var age = 18;// 全局变量gender = "男"} </script>
注:在JS中也有注释,//表示单行注释,/* ...注释内容... */表示多行注释,此注释仅在Script块中生效
数据类型
JavaScript 中的数据类型分为原始类型和对象类型:
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- “字典”
- ...
特别的,数字、布尔值、null、undefined、字符串是不可变。
null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
undefined是一个特殊值,表示变量未定义。
1、number数字类型
avaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
转换:
- parseInt(..) 将某值转换成数字,不成功则NaN
- parseFloat(..) 将某值转换成浮点数,不成功则NaN
特殊值:
- NaN,非数字。可使用 isNaN(num) 来判断。
- Infinity,无穷大。可使用 isFinite(num) 来判断。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 7 8 9 |
|
2、string字符串
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
挨个练习一下吧
<script>var a = "zhangyanlin";document.write(a.charAt(5));// 返回ydocument.write(a.concat("haoshuai"));// 返回zhangyanlinhaoshuaidocument.write(a.indexOf("yan"));// 返回5document.write(a.length);// 返回11var b = "zhang7yan8lin";document.write(b.split("7"));//返回 ["zhang", "yan8lin"]document.write(b.split(/\d/));// 返回["zhang", "yan", "lin"]document.write(b.slice(1,d1_text.length));// 返回 hang7yan8lin</script>
下面再写一个很有意思的案例,让字体滚动起来吧:
demo
3、Boolean布尔类型
布尔类型仅包含真假,与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4、Array数组
JavaScript中的数组和Python中的列表非常相似
数组提供的方法有
Array 对数组的内部支持 Array.concat( ) 连接数组 Array.join( ) 将数组元素连接起来以构建一个字符串 Array.length 数组的大小 Array.pop( ) 删除并返回数组的最后一个元素 Array.push( ) 给数组添加元素 Array.reverse( ) 颠倒数组中元素的顺序 Array.shift( ) 将元素移出数组 Array.slice( ) 返回数组的一部分 Array.sort( ) 对数组元素进行排序 Array.splice( ) 插入、删除或替换数组的元素Array.splice(n,
0
,val) 指定位置插入元素
Array.splice(n,
1
,val) 指定位置替换元素
Array
.splice(n,
1
) 指定位置删除元素
Array.toLocaleString( ) 把数组转换成局部字符串 Array.toString( ) 将数组转换成一个字符串 Array.unshift( ) 在数组头部插入一个元素
<script>var a = ["zhang","yan","lin","aylin"];var b = [1,2,3,4];document.write(a.concat(b));// 输出结果["zhang","yan","lin","aylin",1,2,3,4]document.write(a.join("_"));// 输出结果zhang_yan_lin_aylindocument.write(a.length);// 输出结果4var c = a.pop();document.write(c);// 输出aylina.splice(1,0,"索");document.write(a);// 输出 ["zhang","索","yan","lin","aylin"]</script>
更多请参考http://www.shouce.ren/api/javascript/l_Object.html
条件判断
1、条件语句
JavaScript中支持两个中条件语句,分别是:if 和 switch
if判断
switch语句
2、循环语句
JavaScript中支持三种循环语句,分别是:
方式一
方式二
方式三
3、异常处理
try {//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 } catch (e) {// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。//e是一个局部变量,用来指向Error对象或者其他抛出的对象 } finally {//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。 }
注:主动跑出异常 throw Error('xxxx')
函数
1、基本函数
JavaScript中函数基本上可以分为一下三类:
// 普通函数function func() {return "zhangyanlin"}// 匿名函数var func = function(arg){return "zhangyanlin";};// 自执行函数(function(arg){console.log(arg);})('123')
注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。
实例:
<button οnclick="myFunction('张岩林','CEO')">点击这里</button><script> function myFunction(name,job) { alert("Welcome " + name + ", the " + job); } </script>
2、作用域
JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。
切记:所有的作用域在创建函数且未执行时候就已经存在。
更多请参考http://www.cnblogs.com/wupeiqi/p/5649402.html
3、闭包
「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。
function f2(){var arg= [11,22,33,44];function f3(){return arg;}return f3; }ret = f2(); ret();
4、面向对象
function Foo (name,age) {this.Name = name;this.Age = age;this.Func = function(arg){return this.Name + arg;} }var obj = new Foo('张岩林', 18); var ret = obj.Func("很帅"); console.log(ret);
对于上述代码需要注意:
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:
function Foo (name,age) {this.Name = name;this.Age = age; } Foo.prototype = {GetInfo: function(){return this.Name + this.Age},Func : function(arg){return this.Name + arg;} }
JavaScript基础细讲相关推荐
- JavaScript基础精讲
---------------------------------------------------------------------------------------------------- ...
- Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
- Js与Jq实战:第二讲:JavaScript基础
第二讲:JavaScript基础 一.预习笔记 1.变量 1)JavaScript是一门弱语言,没有明确的数据类型,所以在声明变量时,不需要指定变量的类型,变量的类型由赋给变量的值决定.声明变量一般使 ...
- 视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲 螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术 邓老师 ¥59.00 立即订阅 扫码下载「CSDN程序员学院 ...
- javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
- JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)
文章目录 1.1 第一章 初入宗门 1.2 第二章 直接量 1.3 第三章 数据类型 1.4 第四章 数据类型 扩展内容: 1.5 第五章 基础考核 1.6 第六章 何老 1.7 第七章 对象数据类型 ...
- javascript百炼成仙 第一章 掌握JavaScript基础1.7 对象数据类型
听到这句话,叶小凡一顿,动作停止了下来. 对象数据类型,这在JavaScript基础修炼要诀中只是提了一下,但是并没有细讲,这个对象数据类型一直以来都深深地勾起了叶小凡的好奇心. "小娃娃, ...
- JavaScript基础语法笔记,ECMAScript基础,每部分都有经典案例以及解析。会持续更新(2022.0310)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript导读 1.1 什么是JavaScript(这里借鉴Js红宝书的内容,看一看就可以了) 1.2 ...
- JavaScript异步精讲,让你更加明白Js的执行流程!
JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 as ...
最新文章
- 13个月才跑通GitHub模型,机器学习科研入门太难了吧
- C 语言内存区域分配(进程的各个段)详解
- SSM整合之纯注解方式,注解实现事务,异常,与拦截器
- mybatis 配置错误 XML document structures must start and end within the same entity
- 将VNC 安装在Centos 7步骤
- LeetCode 1224. 最大相等频率(哈希)
- 收获,不止SQL优化——抓住SQL的本质--第六章
- 随想录(scons编译)
- 亚吉铁路 + 蒙内铁路
- NetBeans 时事通讯(刊号 # 51 - Apr 07, 2009)
- linux 开放端口
- python测开课程_2020年第五期《python接口自动化+测试开发》课程,10月11号开学(火热报名中!)...
- WAPI在校园网应用中的证书安装
- 机器学习数据的划分和介绍
- 【数电】数电基础知识
- 大数乘法——大数问题
- Java设计模式博客全目录
- 软件定义汽车,进入深水区
- 在乐视2手机上解决kindle阅读器即译时音标显示正常的问题
- 蒂森mc2服务器老显示fc00,蒂森电梯MC2控制系统电梯的常见故障的处理方法.pdf