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

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.运算符

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基础教程——入门必看篇就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Javascript基础学习笔记(菜鸟必看篇)

    什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

  • javascript基础知识讲解

    本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~. 学习目的 本文针对javascript基础薄弱的同学,可以加深对javascript的理解. 本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑 讲解内容如下: 1. 连等 2. i++ 3. 包装对象 4. 引用类型 5. && 与 || 讲解部分 1. 连等 小试牛刀 连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型. // 字面量连

  • Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

  • js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • javaScript基础详解

    首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 JavaScript的六大作用: 1直接在script输出 document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效 2对事件作出反应 <button type="button"

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • js 基础篇必看(点击事件轮播图的简单实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • JS基础随笔(菜鸟必看篇)

    在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

  • JavaScript基础知识点归纳(推荐)

    定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

  • JavaScript基础重点(必看)

    接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景 相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法 常规语法省略 重点强调: 1.原始值和对象:原始值包括布

随机推荐