js入门篇

变量

什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。


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

变量名可以任意取名,但要遵循命名规则:
1.变量必须使用字母、下划线()或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(
)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
变量要先声明再赋值,如下:

var mychar;
mychar="javascript";
var mynum = 6;

变量可以重复赋值,如下:

var mychar;
mychar="javascript";
mychar="hello";

注意:

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

判断语句(if...else)

if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法

if(条件){ 
条件成立时执行的代码
 }  else  {
 条件不成立时执行的代码 
}

假设我们通过年龄来判断是否为成年人,如年龄大于等于18岁,是成年人,否则不是成年人。
代码表示如下

<script type="text/javascript">
      var myage = 18;
      if(myage>=18) //myage>=18是判断条件 {
         document.write("你是成年人。");
          }  else //否则年龄小于18 { 
          document.write("未满18岁,你不是成年人。");
            }
</script>

函数

函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。
如何定义一个函数呢?基本语法如下:

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

说明:

  1. function定义函数的关键字。
  2. "函数名"你为函数取的名字。
  3. "函数代码"替换为完成特定功能的代码。
    我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字:“add2”,代码如下:
    function add2(){ var sum = 3 + 2; alert(sum);}

函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:

输出内容(document.write)

document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用“”括起,直接输出""号内的内容。

<script type="text/javascript">
   document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>

第二种:通过变量,输出内容

<script type="text/javascript"> 
   var mystr="hello world!";
   document.write(mystr);  //直接写变量名,输出变量存储的内容。
</script>

第三种:****输出多项内容,内容之间用****+号连接。

<script type="text/javascript"> 
    var mystr="hello"; 
    document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种:输出HTML标签,并起作用,标签使用“”括起来。

<script type="text/javascript"> 
    var mystr="hello";
    document.write(mystr+"<br>");//输出hello后,输出一个换行符
</script>

警告(alert 消息对话框)

我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法:
**alert(字符串或变量); **
看下面的代码:

<script type="text/javascript"> 
    var mynum = 30; alert("hello!"); alert(mynum);
</script>

注:alert弹出消息对话框(包含一个确定按钮)。
结果:按顺序弹出消息框



注意:

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

确认(confirm 消息对话框)

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

confirm(str);

参数说明:
str:在消息对话框中要显示的文本**返回值: **Boolean值
返回值:
当用户点击"确定"按钮时,返回true当用户点击"取消"按钮时,返回false

注: 通过返回值可以判断用户点击了什么按钮
看下面的代码:

<script type="text/javascript"> 
    var mymessage=confirm("你喜欢JavaScript吗?"); 
    if(mymessage==true) { 
      document.write("很好,加油!"); 
     } else { 
      document.write("JS功能强大,要学习噢!");
     }
</script>

结果:


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

提问(prompt 消息对话框)

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

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

返回值:

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

看看下面代码:

var myname=prompt("请输入你的姓名:");
if(myname!=null) {
     alert("你好"+myname);
 }else { 
    alert("你好 my friend."); 
 }

结果:


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

打开新窗口(window.open)

open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法:
window.open([URL], [窗口名称], [参数字符串])

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

例如:打开https://www.badu.com 网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:

<script type="text/javascript">
  window.open('https://www.baidu.com/','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

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

关闭窗口(window.close)

close()关闭窗口
用法:

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

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

例如:关闭新建的窗口。

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

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

认识DOM

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


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

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

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

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

推荐阅读更多精彩内容

  • 一、输出内容 第一种:输出内容用""括起,直接输出""号内的内容。 document.write("I love ...
    sophies阅读 191评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,746评论 0 8
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,697评论 2 17
  • 说我不喊她跑步的报应!还有她们宿舍的烦心事!还有火车上的猥琐男
    栖惶阅读 265评论 0 0
  • 大自然馈赠给我们太多太多,在闲暇之余,人们总是变着花样的享受自然的一切。 当我们还在蓝莓园流连忘返的时候,酒...
    莫莫虫阅读 245评论 0 0