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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
微信小程序实现左滑动删除效果
Mar 30 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
JavaScript数组排序功能简单实现
2020/05/14 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
总经理助理岗位职责
2013/11/08 职场文书
晨会主持词
2014/03/17 职场文书
元旦晚会主持词
2014/03/24 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
瘦西湖导游词
2015/02/03 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
社区干部培训心得体会
2016/01/06 职场文书
详解Laravel制作API接口
2021/05/31 PHP