JS入门

javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

虽然分号 “ ; ” 也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。

定义变量使用关键字var,语法如下:
var 变量名

注意:

  • 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。
  • 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

如何定义一个函数呢?基本语法如下:

function 函数名()
{
     函数代码;
}

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

JS中如何输出空格
无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格。这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成1个空格。

解决方法:

  • 使用输出html标签 来解决
    document.write(" "+"1"+" "+"23");
    结果: 1 23
  • 使用CSS样式来解决
    document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
    结果: 1 2 3
    在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

JavaScript-警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。

语法:
alert(字符串或变量);

注意:

  1. 在点击对话框"确定"按钮前,不能进行任何其它操作。
  2. 消息对话框通常可以用于调试程序。
  3. alert输出内容,可以是字符串或变量,与document.write 相似。

JavaScript-确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法:
confirm(str);

参数说明:

  • str:在消息对话框中要显示的文本
  • 返回值: Boolean值

返回值:

  • 当用户点击"确定"按钮时,返回true
  • 当用户点击"取消"按钮时,返回false
    注: 通过返回值可以判断用户点击了什么按钮

注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。

JavaScript-提问(prompt 消息对话框)
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

语法:
prompt(str1, str2);

参数说明:

  • str1: 要显示在消息对话框中的文本,不可修改
  • str2:文本框中的内容,可以修改

返回值:

  1. 点击确定按钮,文本框中的内容将作为函数返回值
  2. 点击取消按钮,将返回null

注:在用户点击对话框的按钮前,不能进行任何其它操作。

JavaScript-打开新窗口(window.open)
open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法:
window.open([URL], [窗口名称], [参数字符串])

参数说明:

  • URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
  • 窗口名称:可选参数,被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2.`"_top"、"_blank"、"_self"具有特殊意义的名称
    _blank:在新窗口显示目标网页
    _self:在当前窗口显示目标网页
    _top:框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
    4.name 不能包含有空格。
  • 参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。`

参数表:


参数表

注意:运行结果考虑浏览器兼容问题。

JavaScript-关闭窗口(window.close)
close()关闭窗口

用法:
window.close(); //关闭本窗口

<窗口对象>.close(); //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象,存储在变量mywin中
   mywin.close();
</script>

注意:上面代码在打开新窗口的同时,关闭该窗口,看不到被打开的窗口。

认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

先来看看下面代码:


示例

将HTML代码分解为DOM节点层次图:


示例

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

  1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

通过ID获取元素
学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:
document.getElementById(“id”)

看看下面代码:


示例

结果:null或[object HTMLParagraphElement]


示例

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

document.getElementById('con')获取的只是P标签,返回的是[object HTMLParagraphElement],document.getElementById('con').innerHTML获取的才是P标签里的内容,返回的是JavaScript

innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:
Object.innerHTML

注意:

  1. Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
  2. 注意书写,innerHTML区分大小写。

改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:
Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):


基本属性表

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:
Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:


value取值

控制类名(className 属性)
className 属性设置或返回元素的class 属性。

语法:
object.className = classname

作用:

  1. 获取元素的class 属性
  2. 为网页内的某个元素指定一个css样式来更改该元素的外观
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 简介 表示在 之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScri...
    wq04200阅读 500评论 0 0
  • 如何插入JS 我们来看看如何写入JS代码?你只需一步操作,使用 标签在HTML网页中插入JavaScript代码。...
    0o冻僵的企鹅o0阅读 536评论 0 4
  • 变量 什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量...
    张子轩xuan阅读 182评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,752评论 0 8
  • 中午回家一进门看到一张家委会成员空白表,桌上饭菜也摆好了,但人呢?打手机给我妈,电话里听着老人有些生气,说...
    温温温温渔阅读 361评论 0 1