javascript每日必学之基础入门

从今天开始，我将带领新朋友们，从了解javascript开始，一步一步地进阶到大神境界，别的不废话，现在开始，我们就一点一点地从入门阶段开始。

　　我们还是介绍一下javascript的身世，不然，大家会对javascript存在非常大的误解，它的产生历史，我们就过于多说，我也记不住，上学开始历史也没及过格

　　js与我们经常用来开发后台程序的java语言不是什么亲戚，他们的使用范围也是相差非常远，js只是用在html，用来对document节点进行增删改查，构建与服务器通讯的一种解释性语言而已，这只是最简单的理解，后面我们来对javascript进行详细深入的学习，好了，我们就从语法开始，虽然，我说了不再废话，但是，我感觉我仍然还是这么啰嗦，好了，大家也不要介意，想修炼成大神的朋友们，也请忍耐一下我这习惯。

　　还得声明一点，看此文章的人，默认是有HTML基础的朋友如果连下面的代码还不理解的人，就请先理解之后，再来修炼，独门秘笈也不是一般人能够修炼的，万一走火入魔了呢，怎么办？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
</head>
<body>
  <h1>javascript大神修炼记</h1>
  <div>………………</div>
  <script type="text/javascript">
    function MyFun(){
      ……
    }
  </script>
</body>
</html>

　　这样的代码，大家就应该很熟悉了吧，我还得说一点的就是，script标签跟大家在课本上面看到的写法不一样，我是写在body标签里面，而且还是写在body标签最后面，这是因为网页的加载顺序，是从上往下，按节点渲染，资源也是从上往下，逐个加载，至于资源响应速度，就与服务器和当前的访问情况而论了，这是题外话了。页面从上向往下逐个渲染到script标签时候，就开始解析javascript代码，如果javascript代码存在对document节点有操作的情况，那么，它才能正确地得到节点对象，不然，就会存在代码执行出错的风险。所以我们的script标签就没有写在head标签里面。

　　我们再来看一下语法，我们先用程序入门的方式进行讲解，不然，直接操作document节点，某些朋友可能会接受不了，说到程序，大家后面还得接触OOP，所以我们现在讲 类，函数，变量，如果你觉得陌生，不要怕，我曾经也是这样，但是，逐渐地我就能理解了，相信你也一样，在javascript里面，类和函数有互相转化的概念，所以还存在很多理解上问题，所以我决定，就从函数开始讲，先不让大家接触类的概念

function WriteMyName(){
      console.log("My name is MrDream");
    }

WriteMyName();

我这是用chrome浏览器，按一下F12，进入console面板，对代码进行调试，大家也要习惯用这个浏览器，后面大家看我调试的多了，大家也会喜欢上这款浏览器，自然也会习惯用它来进行代码调试。

前面我用function关键字声明了一个函数WriteMyName，在方法体里面我只写了一句简单的console.log("My name is MrDream")，然后，直接用函数名加一个括号

WriteMyName()，这样就可以执行前面的函数体里面的内容了，里面的内容就是，打印一句话，打印的内容是My name is MrDream，现在大家只要明白 console.log就是打印的意思就行了。

　　简单小结一下函数体声明语法  function 函数名(){函数体}

　　下面我们再来看一下，带参数的函数

function WriteMyName(_your_name){
      console.log(_your_name);
    }

WriteMyName("My name is MrDream");

　　现在声明的函数跟前面的函数区别就是，打印的内容是用参数形式进行传递，那么带的好处就是，我们之前调用WriteMyName()的时候，只是打印里面固定的内容，然而现在，我们就可以这样写WriteMyName("马大哈")，一对双引号里面写入任意一个名字，我们就可以打印出来了，是不是更方便了啊，我们再来看一下

灵活性就比之前的高多了，我们可以给函数体传递任意的字符串名字了，大家记住了，字符串，一定要带上外面的一对引号，不然，会出错，目前的你还不能理解，这是为什么，接下来，我们会继续讲变量的声明，首先，我们得理解，变量是什么，变量的作用

var five = 5;
var six = 6;

function add(){
  console.log(five+six);
}

　　我们同样是使用函数名+括号进行函数调用 add()，我们来看一下效果

　　函数体里面仍然是一句打印语句，打印的结果是11，5+6=11，没有错吧，如果我们要做其他值的加法，怎么办呢？是不是要修改变量呢，对了，前面的var就是用来声明变量的关键字，我们声明了一个five和一个six,并且给他们赋值，然后，打印这两个变量相加。

　　是不是觉得我们每次想打印的时候，都要修改函数体里面的变量，这样就很麻烦了，那们我们来试一个传递参数的函数

var five = 5;
var six = 6;

function add(num1,num2){
  console.log(num1+num2);
}

add(five,six);

我们在函数num1,num2处的位置分别传入了变量five,six同样打印出来正确的结果，这样，我们就可以方便地传入其他的值了

现在看一下，我们可以传入变量，也可以传入数字，正负均可，如果需要使用不固定的值在函数体进行计算的时候，我们就需要把这个函数写在带参数的函数。

　　总结一下，我们今天学会了什么？

　　第一，javascript是用来干什么的

　　第二，javsscript代码放在页面的什么位置最合适

　　第三，变量的声明，用什么关键字

　　第四，我们学会了函数的声明（带参数，不带参数，带参数的原因），用什么关键字

哈哈 离大神又更近了一步，希望大家再接再厉，坚持下去，一定会有所收获。

赞 (0)

相关推荐

  • 整理Javascript基础入门学习笔记

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

  • Javascript 基础---Ajax入门必看

    Javascript 基础---Ajax入门必看

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

  • JavaScript_object基础入门(必看篇)

    之前写Java时老是有点蒙,大部分都是用jQuery,但原理还不是很清楚,最近一段时间在系统的学习JavaScript,有什么问题或错误请指出,多谢..................... Object所有类的基础类 var obj = new Object(); var obj = {}; //实例化对象 给对象设置属性分为两种: 1.使用直接量的方式:对象.属性/方法,这种方式直观.易懂 obj.name = '张三'; obj.age = 20; obj.sex = '男'; obj.s

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

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

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • javascript入门教程基础篇

    javascript入门教程基础篇

    一. 简介 1. 什么是javascript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 2. 为什么要使用javascript 表单验证 网页特效 小游戏 Ajax 3.快速入门 在程序中,如果想编写js代码,有两种办法: 1)在html文件中,在一对script标记中,直接编写 <script language='javascript'> document.write('hello'); </scrip

  • javascript每日必学之基础入门

    javascript每日必学之基础入门

    从今天开始,我将带领新朋友们,从了解javascript开始,一步一步地进阶到大神境界,别的不废话,现在开始,我们就一点一点地从入门阶段开始. 我们还是介绍一下javascript的身世,不然,大家会对javascript存在非常大的误解,它的产生历史,我们就过于多说,我也记不住,上学开始历史也没及过格 js与我们经常用来开发后台程序的java语言不是什么亲戚,他们的使用范围也是相差非常远,js只是用在html,用来对document节点进行增删改查,构建与服务器通讯的一种解释性语言而已,这只是

  • javascript每日必学之运算符

    javascript每日必学之运算符

    读者朋友们好,前面我已经大概的了解了Javascript的作用以及一些基本的函数声明与变量声明,今天我们就接着前面的内容讲解,我们就来看一下javscript的逻辑(正序,分支,循环)以及一些简单的运算符 下面我们就来讲一些简单的操作运算符 + 加号:1.用来计算两个数字相加之和,2.用来拼接两个字符串 - 减号:1.用来计算两个数字相减之差,2.用在一个数字前面来标识成一个负数 * 乘号:用来计算两具数字相乘之积 / 除号:用来计算被除数除以除数后,所得的商 % 取余:用来计算被除数除以除数后

  • javascript每日必学之循环

    javascript每日必学之循环

    朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo

  • JavaScript每天必学之基础知识

    JavaScript每天必学之基础知识

    基本概念 javascript是一门解释型的语言,浏览器充当解释器.js执行时,在同一个作用域内是先解释再执行.解释的时候会编译function和var这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值. 区分大小写 ECMASCript中的一切(包括变量,函数名和操作符)都区分大小写. 1. 变量 变量在第一次用到时就设置于内存中,便于后来在脚本中引用.使用变量之前先进行声明.可以使用 var 关键字来进行变量声明. var count, amount, level; // 用单个 v

  • javascript每日必学之继承

    javascript每日必学之继承

    朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续. 继承就是,后代继续祖先的一系列属性,行为.后代仍然算是与祖先同族,下面我们再用一些具体描述,来理解一下什么是继承 中国人,跟美国人都是 继承自 人类祖先,所以我们具有相同的属性行为,但是还有一定的差异,后面我们们将继续讲到的多态,所以通过上面的示例图,我们可以清晰的知道,人与人之前其实大同小异,所以我们再看看下面的示例代码,我们

  • javascript每日必学之多态

    javascript每日必学之多态

    朋友们大家好,今天我们就接着前面的内容讲,前面我们已经讲到了继承,今天我们就来讲OOP目前最后一个体现,那就是多态,因为javascript语言的灵活性,所以我们是没有办法使用接口的,所以这也给js程序带来了一定的困惑,大家也不用太着急关心这个问题,因为这些到后面ECMAScript后面的版本会给我们解决这些问题的,又扯远了,还是回到正题,OOP的多态,前面我们已经可以很明白的理解继承是什么样子的了,就是先声明一个父类,然后,我们可以写很多的子类来继承父类的属性和方法,这些我们就可以用最少的代码

  • javascript每日必学之封装

    javascript每日必学之封装

    朋友们好,前面我们已经讲解了有关javascript的基础,从今天的内容开始,我们就要开始讲有关封装的内容了,这里,我们就一点一点地接触到OOP(面向对象编程)了,如果作为一门语言使用的程序员连OOP都不知道是什么,或者只听说过,自己没有去领悟,不能写出面向对象的代码,那么也没有学习程序的必要了,下面我先会给大家详细的介绍面向对象是什么,面向过程是什么,要想弄明白面向对象,首先我们就必须知道面向过程.在你已经弄明白了面向过程之后,我们也不能盲目地为了OOP而OOP,那样只会是做一些徒劳的事,因为

  • javascript每日必学之条件分支

    javascript每日必学之条件分支

    大家好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差别的,但是我们都是一样的去执行买票这个行为,我们就可以把买票写成一个函数BuyTicket //代码 function BuyTicket(){ console.log("请付款200元"); } 大家看到了这个函数体,其实是有缺陷的,我们每个人去买票的时候,都是执行这一个函数,如果是军人,或者

  • JavaScript每天必学之数组和对象部分

    JavaScript每天必学之数组和对象部分

    对象部分 Object类型  Object 是一个无序的集合,可以存放任意类型对象,所有其他对象都继承自这个对象. 创建Object类型有两种,一种是使用new运算符,一种是字面量表示法. 1.使用new运算符创建Object  var obj = new Object();//注意大写,也可以直接写成Object() 注意,通过new Object() 的写法生成新对象,与字面量的写法 obj = {} 是等价的. 2. 使用字面量方式创建: var obj = { name : 'trigk

  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了. 一.下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以

随机推荐