JavaScript基础教程——入门必看篇


Posted in Javascript onMay 20, 2016

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题。    

一. JavaScript

1.什么是JavaScript

JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言。

2.JavaScript的特点

JavaScript主要用来向HTML页面添加交互行为。

JavaScript是一种脚本语言,语法和Java类似。

javaScript一般用来编写客户端的脚本。

JavaScript是一种解释性语言。

3.JavaScript的组成

ECMScript标准(规定所有属性,方法和对象的标准)

BOM浏览器对象模型(Browser Object Model):与HTML交互

DOM文档对象模型(Document Object Model):访问和操纵HTML文档

4.JavaScript基本结构

<script language=”javascript” type=”text/javascript”>

</script>

Language=”javascript”用来表示使用的语言是javascript

5.JavaScript执行原理

1. 浏览器客户端向服务器端发送请求。(用户在浏览器地址栏中输入的地址)

2.数据处理:服务器端将某个包含javaScript的页面进行处理。

3.发送响应:服务器端将含有javascript的HTML文件进行处理页面发送到浏览器客户端,然后由浏览器客户端从上直下逐条解析HTML标签和JavaScript标签,将页面效果呈给用户。

二.在网页中引入JavaScript的方式

1.使用<script>标签。

2.使用外部JavaScript文件。

希望多个页面中运行JavaScript实现相同效果,通常使用外部文件为.js的文件。

如何引用.js为扩展名的文件:

<script src=”../1.js”></script>

注意:外部文件不能包含<script></script>

3.直接在HTML标签中

<input name='btn' type=”button” value=”弹出消息框” onclick=”javascript:alert(“欢迎你”);”/>

三.JavaScript核心语法

1.变量的声明和赋值

变量的声明只有用var,变量的命名规范和Java类似。Var num=1;

在JavaScript中变量可以不用声明就可以直接使用,但是不推荐这种用法。

2.数据类型

Undefined(未定义类型)

Null(空类型)

Number(数字类型)

String(字符串类型)

Boolean(布尔类型)

3.undefined和null的区别

null 表示"没有对象",即该处不应该有值。典型用法是:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

Object.getPrototypeOf (Object.prototype)// null

undefined 表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

(1)变量被声明了,但没有赋值时,就等于 undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于 undefined。

(3)对象没有赋值的属性,该属性的值为 undefined。

(4)函数没有返回值时,默认返回 undefined。

4.只有6种情况,判定结果为假。

null,false,undefined,0,"",NaN

5.字符串的一些常用方法

toString();返回字符串

toLowerCasee();把字符串装换为小写。

toUpperCase();把字符串转换成大写

charAt(index);返回在指定位置的字符串

indexOf(str,index);查找某个指定的字符串在字符串中首次出现的位置

Substring(index,index);返回位于指定索引index1和index2之间的字符串(包括index1不包括index2)

Split(str);将字符串分割为字符数组

6.创建数组并为数组赋值的三种方式

01. Var num=(‘1','2');

02.var num=new Array(2);

Num[0]=1;

Num[1]=2;

03.var num=[‘1','2'];

数组的常用方法和属性
Length:设置或返回数组中元素的数目

Join():把数组的所有语速放入一个字符串,通过分割符进行分割。

Sort():对数组进行排序

Push():向数组末尾添加一个或更多元素,并放回新的长度。

<script type="text/javascript">

//01.方式一:创建数组,并给数组赋值

// var fruit = new Array('apple', 'orange', 'peach', 'bananer');

//02.方式二:先创建数组,后通过下标给数组赋值

var fruits = new Array(4);

fruits[0] = 'apple';

fruits[1] = 'orange';

fruits[2] = 'peach';

fruits[3] = 'bananer';

//03方式三:和方式一类似只不过改变了符号

//var fruitss = new Array['apple', 'orange', 'peach', 'bananer'];

//04.访问数组中下标为3的数据

document.write(fruits[0]);

//05通过数组的join方法把元素放到字符串中并用指定分隔符进行分割

var result = fruits.join(',');

//06通过sort方法对数组进行排序

fruits.sort();

//06.向末尾添加一个或多个元素,最后返回该数组的新长度

var length= fruits.push('wert','foot');

document.write('\n' + length);

//07.遍历数组

for(var item in fruits)

       {

 alert(fruits[item]);

       }

</script>

7.运算符

JavaScript基础教程——入门必看篇

8 程序调试

方案一:在VS中调试

步骤:01.将要调试的页面设置成起始页

02.设置断点

03.按F5启动调试

方案二:chrome浏览器调试

步骤:01.点击F12,将工具调出

02.设置断点

03.刷新页面

方案三:IE浏览器

步骤:01.F12,开发人员工具

02.切到脚本选项卡

03.设置断点

04.启动调试

 05.刷新

四.JavaScript中的函数

1.常用的系统函数

01.   parseInt(“字符串”);

parseInt()函数首先查看位置为0处的字符,判断他是否为一个有效数字,如果不是则返回NaN,不在执行其他操作,但如果该字符是有效参数,则该函数将查看位置为1处的字符,进行同样的测试,这一过程将持续到发现该字符是有效字符为止,此时该字符将之前的字符串转换成数字。

eg:

var num1=parseInt(“78.9”)//返回值为78

var num2=parseInt(“afa78.9”)//返回值为NaN

02.parseFloat(“字符串”);

他的用法和parseInt类似,只不过字符串中出现的第一个点将被认为是有效字符.

eg:

var num1=parseInt(“78.9”)//返回值为78

var num2=parseInt(“afa78.9”)//返回值为NaN

2.自定义函数

在JavaScript中,自定义函数是由function,函数名,一组以参数以及置于括号中待执行的JavaScript语句组成。

下面来看一看语法:

function 函数名(参数1,参数2,..)

{

//JavaScript语句

[return 返回值]

}

function是定义函数的关键字,必须有。

参数1,和参数2是该函数的参数,因为JavaScritp他本省的类型是弱类型,所有在给定参数时没有必要提供类型

{}定义的函数的开始和结尾.

return 语句用来规定函数返回的值.

2.调用函数

要执行一个函数,首先肯定要调用这个函数,必须制定函数名和其后的参数。

eg:

<script type=”text/javascript”>

function show(){



}

show();

</script>

3.匿名函数

匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解。这里就来分析一下。

function 函数名(参数列表){函数体;}

如果是创建匿名函数,那就应该是:

function(){函数体;}

因为是匿名函数,所以一般也不会有参数传给他。

为什么要创建匿名函数呢?在什么情况下会使用到匿名函数。匿名函数主要有两种常用的场景,一是回调函数,二是直接执行函数。

eg:

<script language="javascript">
var a = "a";
(function(){
  var a="b";
  alert(a);
})();
alert(a);
</script>

在上面这段代码中,会顺序输出两个alert框。第一个alert框内容为b,第二个为a。以为该Script标签中有一个匿名方法时自调用的,所有首先弹出b,然后碰到匿名方法后的alert(a)则弹出a。

以上这篇JavaScript基础教程——入门必看篇就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
js制作简易年历完整实例
Jan 28 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP获取网卡地址的代码
2008/04/09 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
python基础知识小结之集合
2015/11/25 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
高中校园广播稿
2014/01/11 职场文书
党课培训主持词
2014/04/01 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书