JavaScript基础知识

JavaScript会带你进入新境界。你已经了解了HTML标记(结构),而且知道了CSS样式(表示),剩下的就是JavaScript(行为)。如果你只知道结构和表示,当然创建一个漂亮的页面时没有问题的,不过它们只是页面而已。用JavaScript增加行为时,你就能创建一种交互式体验。

JavaScript能做什么

一旦有一个包含< script >元素的页面(或者包含引用,指向一个单独的JavaScript文件),你就已经开始编写代码了。JavaScript是一种完备的编程语言,用其他语言能做的事情用JavaScript同样能够做到,甚至还能做得更多,因为我们就在Web页面内部编程。

你可以要求JavaScript:

1.建立一个语句

创建一个变量并赋值、让变量相加、完成计算,还可以使用一个JavaScript库的内置功能。

var temp  = 98.6;
var beanCounter = 4;
var reallyCool = true;
var motto = "I rule";

temp = (temp - 32) * 5 / 9;
motto = motto + " and so do you!";
var pos = Math.random();

2.重复做事情

循环完成语句,次数可以根据你的需要来定

while (beanCounter > 0) {

    processBeans();
    beanCounter = beanCounter - 1;
}

3.做出判断

编写根据应用的状态并按条件执行的代码

if (isReallyCool) {

    invite = "You are invited!"

} else {

    invite = "Sorry, we are at capacity.";

}

JavaScript变量

利用JavaScript,变量可以用来保存各种不同的东西。下面来声明一些变量:

var winners = 2; //整数值
var money = 212.2; //浮点数
var name = "liuguoquan"; //字符串
var isExist = false;  //布尔值

说明

  • JavaScript不需要为变量指定一个类型,它只是创建一个通用容器,其中可以存放多种东西,所有任何变量都可以存放数字、字符串或者布尔值。因为JavaScript采用的动态类型,也就是说,JavaScript解析器会在代码运行时确定要使用说明类型。
  • var scoops = null;表示“没有值”;
  • var winner;如果不赋值给变量,那么执行这个语句之后,变量winner会赋值为undefined。

JavaScript变量命名

  • 规则1:变量要以一个字母、下划线或者美元符开头。
  • 规则2:然后变量后面的可以使用任意多个字母、数字、下划线或者美元符
  • 规则3:一定要避开JavaScript的所有保留字。

JavaScript的保留字如下图所示:

Javas保留字.png

JavaScript表达式

  • 数值表达式:Math.random() * 10 + 32 - 11.0
  • 布尔表达式:level == 4
  • 串表达式:"I" + " am " + " hero!"
  • 其他表达式:function() {...},document.getElementById('cows'),new Array(10)

JavaScript自动类型转换

  • message = 2 + " if by sea,值为2 if by sea,JavaScript会将2转换为串“2”;
  • value = 2 * 3.1, 值为6.2,JavaScript会把整数2转换为一个浮点数。

JavaScript计算下面的语句会得到什么?

  • numORString1 = "3" + "4"; 值为:"34"
  • numORString2 = "3" * "4"; 值为:12

JavaScript循环

  • while循环
<script>

  var scoop = 5;

  while(scoop > 0) {

      alert("More icecream!");
      scoop = scoop - 1;
  }

  alert("life without ice cream is not the same!");

</script>
  • for循环
<script>

  var scoop;

  for(scoop = 5; scoop > 0; scoop--) {

      alert("More icecream!");
      
  }

  alert("life without ice cream is not the same!");

</script>

HTML5页面增加JavaScript

要使用JavaScript,必须把它增加到一个Web页面中。不过在哪里加呢?下面介绍向页面增加JavaScript代码的三种方式

  • 联机脚本放在<head>元素中

向页面增加代码时,最常用的方式就是在页面的head部分放置一个script元素。在head元素中增加JavaScript部分就会最先执行这个代码,然后才解析页面的其余部分。

<head>

    <script>
        ...语句
    </script>

</head>
  • 通过引用一个单独的JavaScript文件夹来增加脚本

还可以链接一个包含了JavaScript代码的单独的文件。将这个文件的URL放在开始script表计的src属性中,另外一定要用< /script>结束这个脚本元素。如果链接到同一目录的某个文件,可以不提供该文件夹的完整路径。

<script src="mycode.js" >
</script>
  • 将代码增加到文档体中,可以作为内联代码,也可以作为一个单独文件的链接

也可以把代码直接放在HTML5的body中。同样的,将JavaScript代码包围在script元素中(或者在src属性中引用一个单独的文件)。浏览器解析体时就会执行页面体重的JavaScript(而且通常会从上向下执行)。

<body>

    <script>
        ...语句
    </sript>

</body>

JavaScript与HTML5页面交互

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

推荐阅读更多精彩内容