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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
VSCode launch.json配置详细教程
Jun 18 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将任何格式视频转为flv的代码
2009/09/03 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
express框架下使用session的方法
2019/07/31 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
pytorch SENet实现案例
2020/06/24 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python