Javascript基本介绍

我的一贯作风:首先,放一张图来表示我要说明的东西。


(一)
1.Javascript是什么?

JavaScript是一种基于对象和事件驱动的解释性的脚本弱类型语言,与HTML结合,增强功能,并提高与最终用户间的交互性能。大部分使用者将它用于创建动态交互网页,为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
2.基本特点
a、解释执行,事先不编译;逐行执行,无需进行严格的变量声明;
b、简洁易用,可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序
c、基于对象,内置大量现成对象,编写少量程序可以完成目标
d、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。
3.用途
a、适合做哪些事情:
客户端数据计算,表单合法性验证;浏览器对象的调用,事件的触发;网页特殊显示效果制作
b、不适合做哪些事情:
大型应用程序,图像、多媒体处理,网络实时通讯应用
(二)组成部分
三大结构

1、语法
Javascript 必须嵌套在HTML文档中,才能使用
嵌入网页的三种方式
a、在定义事件时直接写入JavaScript脚本(在标签中写)

<input type="button" value="点我去百度" onclick="window.open('http://www.baidu.com')" />

b、在网页中直接嵌入JavaScript

<input type="button" value="点我去百度" onclick="goBaiDU()" />
    <script type="text/javascript">
        function goBaiDU(){
            window.open('http://www.baidu.com');
        }
    </script>

c、在网页中调用独立JavaScript文件(提倡)

<script type="text/javascript" src="../js/01_.js"></script>     //引用外部js文件  
<input type="button" value="点我去百度" onclick="goBaiDU()" />

建议:写成单独的js文件有利于结构和行为的分离。<script> </script> 可放在网页任意位置,且一个页面中可放几个<script> </script> 它们之间不同部分的方法与变量可以共享的

数据类型

  • 在HTML中大小写是不敏感的,但是在JavaScript程序中大小写是敏感的
  • 分类
  • a 、String类型
    (1)字符串常量首尾由单引号或双引号括起
    (2)JavaScript 中没有字符类型,即无char
    (3)特殊字符:必须加上右字符串中部分划线\
特殊字符
  • b、Null、Undefined
    (1)Null在程序中代表变量没有值
    (2)Undefined代表变量的值尚未指定
  • c、数组——定义一系列变量
    (1)数组中元素的类型可以不一致,数组元素也可以是一个数组,即多维数组;
    (2)数组长度可以随意改变的,定义数组长度时,不会固定死。之后,也可以不断地添加元素,不会报错的;
  • d、函数
函数的定义:
function  函数名 (参数){
    函数体;
    return 返回值;
}

(1)可以使用变量、常量或表达式作为函数调用的参数
(2)函数由关键字function定义
(3)函数名的定义规则与标识符一致,大小写是敏感的
(4)返回值必须使用return

其余的和大部分语言一样,有:数据强制性转换、运算符、控制语句。在此不详细说明

2、对象
JavaScript是一种基于对象语言,对象是JavaScript中最重要的元素。对象是一系列属性与方法的集合。
属性,可以是基本数据类型,也可是复合数据类型。
访问对象属性与方法,通过.

JavaScript包含四种对象:

  • 内置对象 :Date,Math,String,Array…
  • 自定义对象:Person,Card
  • 浏览器对象: window,document…
  • ActiveX对象 :ActiveXObject(AJAX中讲到)

3、BOM(Browser Object Model)浏览器对象模型

BOM对象
  • Window对象
    (1)window 对象是 JavaScript 层级中的顶层对象
    (2)代表一个浏览器窗口或一个框架
    (3)在 <body> 或 <frameset> 每次出现时被自动创建
    A、属性
    status 状态栏
    opener 获取创建当前窗口的窗口的引用
    B、window对象的方法
    open() 打开新窗口
    alert() 显示一个警告框
    confirm() 选择确定。
    prompt() 输入框
    setTimeout() 一次性定时器,延时器
    setInterval() 周期性定时器,时间

  • Location 对象
    href 设置或获取整个URL为字符串
    reload() 重新装入当前页面,常用于刷新

  • screen 对象
    availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏
    availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏
    height 获取屏幕的垂直分辨率
    width 获取屏幕的水平分辨率

  • Document对象属性:
    forms 获取页面所有表单对象

eg:window.document.forms.length;    //window.document.forms相当于一个数组

images 获取页面所有图片对象
links 获取所有含有href属性的超链接对象
referrer 获取将用户引入当前页面的位置URL
bgColor 设置或获取表明对象后面的背景颜色的值。
fgColor 设置或获取文档的前景(文本)颜色。
方法:
write() 在指定窗口的文档中写入一个或多个 HTML表达式

  • History对象
    length 获取历史列表中的元素数目
    go(0) 从历史列表中装入URL,参数为0时表示浏览器刷新
  • Navigator对象
    appName 获取浏览器的名称
    appVersion 获取浏览器运行的平台和版本

4. DOM (Document Object Model)文档对象模型

  • DOM树
    举个栗子:
DOM树

如上图所示,HTML文档是由节点构成的集合,四种常见的DOM节点
(1)文档节点document
(2)元素节点——标签 Element
(3)文本节点——文字内容 TextElement
(4)属性节点——元素属性 AtrributeElement

  • DOM属性

(1)文档里的每个节点都有以下属性。
nodeName:一个字符串,其内容是给定节点的名字。 var name = node.nodeName;

  • 如果节点是元素节点,nodeName返回这个元素的名称
  • 如果是属性节点,nodeName返回这个属性的名称
  • 如果是文本节点,nodeName返回一个内容为#text 的字符串
    注:nodeName 是一个只读属性。

(2)nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值,常用的有三种:
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
(3)
nodeValue:返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
但可以为文本节点的 nodeValue 属性设置一个值。

  • 查找元素节点
    • getElementById() 返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.
    • 返回是节点集合:
      getElementsByName() 寻找有着给定name属性的所有元素
      getElementsByTagName() 寻找有着给定标签名的所有元素
  • 查看是否存在子节点
    hasChildNodes()
    该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
    var booleanValue = element.hasChildNodes();
    文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
  • 替换子节点 replaceChild()
    把一个给定父元素里的一个子节点替换为另外一个子节点
    var reference = element.replaceChild(newChild,oldChild);
    返回值是一个指向已被替换的那个子节点的引用指针。
    如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中
  • 查找属性节点和值
    getAttribute()
    返回一个给定元素的一个给定属性节点的值
    var attributeValue = element.getAttribute(attributeName);
    getAttributeNode()通过属性获取属性节点
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,749评论 0 8
  • 本文内容为慕课网学习笔记。 CSS CSS样式类型 内联式css样式,直接写在现有的HTML标签中 嵌入式css样...
    xiaoliuTX_iOS阅读 736评论 0 5
  • 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课...
    程序员poetry阅读 12,632评论 13 94
  • javaScript的概念: (1)javaScript主要用来向HTML页面添加交互行为。(2)javaScri...
    子约nan阅读 470评论 0 0
  • 来自福建省的文献名邦之镇,枫亭镇,30年来首次有八支队伍一起参加赛龙舟比赛,很荣幸,我的哥哥也在其中效力。 人山人...
    叫我梅芳就好阅读 229评论 0 1