JavaScript【基础篇】

一。Script标签

  JavaScript经常在其他语言的上下文中使用,比如我们在HTML,XHTML等标记语言中使用JavaScript时,我们需要把JavaScript代码封装在script标签中,每当浏览器读取到script时,就不会以HTML,XHTML的方式处理其内容,而是会让浏览器中内置的js引擎去执行script元素中的内容

  type属性:网页脚本语言有很多,不仅仅JavaScript一个,所以我们使用了type属性来定义脚本类型,JavaScript的type值是text/javascript

  charset属性:定义了脚本的字符编码集,一般不用设置,除非脚本需要采用与文档完全不同的编码集

  defer属性:如果设置为"defer",表示该脚本不会生成任何文档内容,于是浏览器可以提前处理页面的其余部分,在页面处理结束并做好显示准备时才处理脚本部分。defer属性可以提高页面的载入速度,特别是那些引用了大量的JavaScript代码或者庞大的JavaScript程序库的页面

  src属性:表示所需要载入的外部JavaScript文件


二。JavaScript数据类型和变量

  特点:弱数据类型

    变量的数据类型是JavaScript脚本引擎对变量中所保存数据的类型解析,与其他语言不同的是,相同的变量可以保存不同的类型,这就是JavaScript的动态类型,这就意味着变量在不同的上下文中保存不同的数据类型,但动态类型也有缺点,如果希望两个数字执行加法,但是JavaScript引擎将保存其中一个数字的变量解释成了字符串数据类型,那么其结果就将是连接这两个字符串,而不是求这两个数字的和。 

  三种基本数据类型: 

    三种类型有字符串,数字以及布尔类型。在使用这三种基本类型的时候,js引擎会自动封装成三种对象:String,Number,Boolean。使得可以对基本类型的变量使用对象中的属性和方法。当方法或属性调用完毕后,会丢弃这个临时对象。

    String类型

        1.字符串编码

          当在字符串中使用特殊符号的时候,转义符\是非常有用,但这个有用是建立在字符有对应Ascii码上,当处理一些非Ascii码字符的时候,‘\‘就没有用了,这些情况通常会在AJAX中遇到,此时我们就要使用全局函数encodeURI和encodeURIComponent了。使用该方法对那些非Ascii码字符进行编码,就将其从Ascii码或非Ascii码转换成了URIencoding字符,当然也有相应的解码方式decodeURI和decodeURIComponent

    boolean类型

输入 结果
undefined false
null false
布尔值 布尔值
数字 如果数字是0或NaN,那么结果为false
字符串 空字符串为false
对象 true

    Number类型 

        1.范围

          虽然JavaScript可以支持较大的数字,但是某些函数只能够支持-2e31到2e31(大约21亿)之间的数字。

        2.特殊的两个数字,Infinity(正无穷大)和-Infinity(负无穷大)

        3.全局函数parseInt()与parseFloat()

          无论字符串是整数还是浮点数,一个返回整数部分,一个返回浮点数部分。值得注意的是parseInt()的第二个参数是进制

        4.全局函数Number转换的特殊情况

输入 结果
undefined NaN(not a number)类型
null 0(IE中会返回NaN)
布尔值 true=1;false=0(IE中返回NaN)
数字 数字值
字符串 整数或浮点数,取决于字符串
对象 NaN

  二种特殊变量:

    null

        1.已经定义的变量,并且赋值为null。赋值为null,表示没有给该变量申请内存空间,所以无法调用

    undefined

        1.没有定义的变量

        2.定义了变量,但没有赋值

     判断变量有没有初始化:

        if(var){} //如果变量为null或undefined都会返回false。

         


三。函数

  

  函数的功能不必多说,值得注意的是在JavaScript中,定义类(JS中应该叫做原型对象)的方式与定义函数的方式是相同,只不过不同的用法导致了选择调用函数还是创建对象

  创建函数的三种方式:

    声明式/静态的

      当页面载入的时候,就会解析声明式函数,在每次调用该函数时使用其解析结果

function functionName(param1){ //同java不同,不需要变量类型
  return ...;
}

    动态的/匿名的

      函数也是对象,因为js中一切皆对象,我们就可以像创建对象的方式来创建一个函数,当JavaScript处理应用程序时,不同于声明式函数,每次调用匿名函数的时候,才会创建函数。

    var helloWord=new Function("name","window.alert(‘你好:‘+name);");

    字面量式的  

    var helloWorld=function(){
        window.alert("hello world");
    }

  与Java函数的一些不同:

    1.arguments变量可以接受不定参数,当你传入多个实参时,就算没有形参去接受,我们在函数内部使用arguments变量就可以操作传进来的实参。并且JavaScript没有函数重载,JavaScript总是会调用最后一个定义的重载函数。

    2.JavaScript可以进行函数嵌套,内部函数有外部函数的访问权限,外部函数没有访问内部函数的权限,主调函数也没有访问内部函数的权限,这里有一个复杂的情况

function outerFunction(base){
  var punc="!";

  return function(ext){
     return base+ext+punc;
  }
}

      嵌套函数的工作机制是什么?有没有违反作用域规则?当函数终止时处于什么状态?局部变量所占的内存能否被垃圾回收机制回收?

       答案是不确定的,每当JavaScript应用程序中创建一个新的作用域时,如果需要的话会创建相关的作用域冒泡,用来封装作用域,函数就在封装作用中执行,当执行完毕后,作用域一般会释放,但是当内部函数是外部函数返回值并且赋值给一个变量的时候,内部函数的作用域就附加到了外部函数上,外部函数作用域又附加到了主调应用城中,附加的目的就是保证内部函数和外部函数参数和变量的完整性。然后把内部函数创建的函数字面量赋值给主调程序中的变量,


四。JavaScrip事件驱动

  2.1  事件概述

  2.2  事件分类

    鼠标事件:操作鼠标发生鼠标事件,比如click,mousedown,mouse

    键盘事件:输盘输入触发键盘事件

    HTML事件:浏览器加载HTML的时候也会触发HTML事件

    其他事件:AJAX请求

  2.3  事件驱动第一个程序

<script type="text/javascript">
    function helloWorld(){
        window.alert("hello world");
    }
</script>
<s:form action="add" namespace="/regist">
    <s:submit value="提交" onclick="helloWorld();"/>
</s:form>

  2.3  实际用法-访问css属性

//访问内部css属性
<script type="text/javascript">
    function changeColor(event){
        var color=event.value;
        window.alert(color);
        if("白色"==color){
            var div1=document.getElementById("div1");
            div1.style.background="white"
        }else{
            var div1=document.getElementById("div1");
            div1.style.background="black";
        }
    }
</script>
<div style="width:300px;height:300px;background-color:red" id="div1">
    <!-- this 代表当前元素本身 -->
    <input type="button" onclick="changeColor(this)" value="黑色"/>
    <input type="button" onclick="changeColor(this)" value="白色"/>
</div>

//访问外部css属性
<script type="text/javascript">
    //获取css/mycss.css中的类选择器全部获取
    var cssRules=document.styleSheets[0].rules;
    function changeColor(event){
        var color=event.value;
        window.alert(color);
        if("白色"==color){
            //cssRules[0]表示mycss.css中的第一个样式
            cssRules[0].style.background="green";
        }else{
            cssRules[0].style.background="black";
        }
    }
</script>

五。DOM(Document Object Model文档对象模型)编程

  

  3.1  什么是DOM编程?

 x

  3.2  DOM规范把HTML页面看做成了DOM树

    

  



      

六。表单,表单事件及验证

  


七。创建自定义对象

  创建对象的二种方式:

    1.  创建Object实例,再添加属性与方法

    2.  使用字面常量

      var dog={name:"小白"};

      window.alert(dog.name);

  创建对象的三种策略

    1.  工厂模式

    2.  构造函数模式

    3.  动态原型模式


八。面向对象的三大特性

  在JavaScript中一切皆对象,并且所有对象都继承了Object对象的功能,之前我们使用的是js引擎中的内置对象和浏览器文档对象模型中的对象,那么如何创建自定义对象呢?学习过Java的童鞋应该知道,在Java中我们通过定义类,并且使用new一个类来创建一个实例。在JavaScript中,我们把类这个概念称为原型,Object类负责提供构造函数来创建对象,这个构造函数能够为对象分配内存,并包含其所有属性。Object对象还提供了一个prototype属性,通过该属性,我们不但可以扩展内置对象,还可以扩展我们自定义对象的属性和方法,他有点像java中的static,让属性和方法属于这个原型(类)本身。

  

  Object类

      Object类是所有javascript类的基类,负责提供创新对象的框架,JavaScript中的其他对象,通过Object的构造函数来分配内存

    Object类的主要属性

        constructor:对象的构造函数

        prototype(static):获得类的prototype对象。

    Object类的主要方法

        hasOwnProperty(property):是否属于本类定义的属性

        isProrotypeOf(object):是否是指定类的prototype

        toString():返回对象对应的字符串

        valueOf():返回对象对应的原始类型值

  

  封装

      封装就是把抽象出的属性和对属性的操作封装在一起,属性被保护在内部,程序的其他部分只有通过被授权的操作(函数)才能对属性操作

function Person(name,age){
  var name=name;//相当于java中的private
  var age=age;//相当于java中的private
  this.getName=function(){
       return name;
   }
  this.setName(myName){
       name=myName;
  }
}

     注意:使用prototype定义的方法不能访问原型的私有变量和私有方法‘

  继承

      不同于Java中的单继承,JavaScript可以实现多继承,并且JavaScript实现继承的方式是“对象冒充”

function People(name,age){
  var name=name;
  var age=age;
  this.getInfo=function(){
    return name+"and"+age;
 }
}
function Student(name,age){
  this.people=People;
  this.people(name,age);//对象冒充
}
var student=new Student("dyp",20);
student.getInfo();

  多态

      所谓多态,就是指一个引用在不同情况下的多种状态,在java中多态是指通过指向父类的引用,来调用不同字类中实现的方法。js实际上是无态的,是一种动态语言,一个变量的类型是在运行的过程中由js引擎来决定的的,

时间: 2024-10-19 03:33:32

JavaScript【基础篇】的相关文章

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

史上最全、JavaScript基础篇

索宁 Hot summer nights mid July, when you and  I were forever wild. 首页 新随笔 联系 管理 随笔 - 12  文章 - 5  评论 - 19 史上最全.JavaScript基础篇 本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语

前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind

在我的职业生涯中,很早就已经开始使用JavaScript进行项目开发了.但是一直都是把重心放在了后端开发方面,前端方面鲜有涉及.所以造成的一个现象就是:目前的前端知识水平,应付一般的项目已然是足够的,但是火候尚缺,没有深入的进行研究,以至于总是谈论起来就发现自己半瓶子哐当的水平.为了解决这种尴尬的局面,决心潜心研究一段时间JavaScript,以下知识为本人学习过程中的总结,虽然以本人水平可能招致贻笑大方之果,但是更盼抛砖引玉之实. 在JavaScript中,我们调用一个普通的方法,可以通过如下

一步步学习javascript基础篇(8):细说事件

终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能阅读了.有了事件,我们可以通过键盘或是鼠标和页面交互了,通过我们不同的操作页面给出不同的响应.好了,开始我们今天的分析吧. DOM0级事件处理方式 什么是DOM0级? 其实世上本来没有DOM0级,叫的人多了就有了DOM0级. 在1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,在此之前

一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

JavaScript基础篇(四)— — 函数

一.函数基础 ??1.返回值:如果某个函数没有显式的return返回值,默认它的返回值为undefined ??2.参数:内建变量arguments,能返回函数所接收的所有参数 ???? ??3.预定义(内建)函数 -- isNaN: ????a.检测parseInt / parseFloat调用是否成功. ???? ????b.NaN不存在等值的概念, 也就是说表达式NaN === NaN 返回的是false 二.函数的变量作用域 ??1.变量提升:函数域优先于全局域,所有局部a会覆盖掉所有与

JavaScript基础篇

本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语句 异常处理 函数 定义函数3种方式 函数参数(arguments) 作用域与作用链 闭包 面向对象(特性,构造模式,原型模式prototype) prototype 验证方法(isPrototypeOf.hasOwnProperty.in) 其

JavaScript基础篇分享之二

一.运算符的优先级 有括号的先算括号里面的  再乘除 后加减 如果我们需要提升运算符的优先级  一句话:加括号 二.流程控制 顺序结构.分支结构.循环结构! 顺序结构 代码是从上至下一行一行执行并解析! 分支结构 虽然说有多条路可以选择,但是我们在实际中往往只能选择一条路!if语句.switch语句 if语句 单分支.双分支.多分支 单分支: 格式: if(条件表达式){ //语句块 } 说明:如果当条件表达式成立的时候  得到布尔true  就执行语句块 注意:如果单分支小括号后面这一对大括号

JavaScript基础篇总结

一. 数组 1. 终止循环 a. break 终止整个循环,即跳出循环体,执行之外的语句. b. continue 终止本次循环,直接进行下一次循环 2. 数组 定义: 在内存中开辟一片连续的区域来存储数据. 声明: var arr = []; var arr = new Array(); 长度: 不超过最大值都行,无固定长度.arr.length 索引: 数组的基地址 + 偏移量 存储类型: 数组元素可以使任意类型 赋值方式: arr[0] = 1; arr[name] = "tom"