HTML中JavaScriipt的基本语法

前言

本章主要是学习JavaScript的基本理论知识以及简单使用,属于入门级别的难度,如果有错误,希望大神们提出来,一起学习.深入研究和扩展学习可以去官网,下面我们正式开始学习JavaScript.

1, 什么是JavaScript

  • 所谓的JavaScript,其实就是一门广泛运用于PC端的脚本语言,是由Netspace公司设计的,当时正是和sun公司合作,所以起的名字和Java很像,但是,它们是两门完全不同的语言.不要混淆了.只是但是Java特别火,JavaScript借助了Java,快速被全世界记住,成为一门热门的语言.在后面的学习我们就将JavaScript简称为JS.
  • JS的具体用途是什么
  • 1,JS的用途很广,比如说:HTML的DOM操作(所谓的dom操作:即节点操作(所谓的节点操作:就是节点的增删改查操作)).
  • 2, JS还可以增加网页的动态功能,比如:动画
  • JS还能处理事件,比如:监听鼠标的点击,滑动以及键盘的输入等.

2, JavaScript的两种书写方式

  • JavaScript有两种编写方式
  • 1,JS的页内编程方式:即在当前网页的script标签中编写内容
   <script type="text/javascript">没错,这样就是JS的页内编写方式</script>
  • 2, 外部JS : 即在外部的script编写诶荣
 只需要在当前网页中导入外部的JS即可
 <script scr="index.js"></script>

3, 下面我们就来做几个例子

  • 输出一个HelloWorld
<!DOCTYPE html>
        <!--注意一点:我第一次使用的时候,弹框一直不出来,主要的原因是alert
        中括号里面需要用单引号引用起来,注意不是双引号.
        我的错误是:忘记添加单引号,后来使用双引号也不对.记住是单引号
        -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript的简单使用</title>
        <!--JavaScript的页内样式-->
        <script type="text/javascript">
            alert('HelloWorld')
        </script>
    </head>
    <body>
        <button type="button" onclick="alert('Alex在学JavaScript')">百度一下,你就知道了</button>
    </body>
</html>
  // 运行效果: 当打开浏览器的时候就会弹出一个弹框:提示"HelloWorld",当点击确定后,再点击按钮,就会弹出一个弹框,提示"Alex在学JavaScript".
  • 2, 如何打印输出
<!DOCTYPE html>
        <!--注意一点:我第一次使用的时候,弹框一直不出来,主要的原因是alert
        中括号里面需要用单引号引用起来,注意不是双引号.
        我的错误是:忘记添加单引号,后来使用双引号也不对.记住是单引号
        -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript的简单使用</title>
        <script type="text/javascript">
//            alert('HelloWorld')
            console.log('Alex正在努力的学习JavaScript');
            console.log('学习是一种乐趣');
            console.log('注意括号里也是需要单引号的');
            console.log('除了单引号,最后还需要一个分号');
            console.log('千万不要忘记这两点了');

        </script>
    </head>
    <body>
        <!--<button type="button" onclick="alert('Alex在学JavaScript')">百度一下,你就知道了</button>-->
    </body>
</html>
// 本例重点 : console.log('需要单引号和分号');输出格式
  • 3, JS中的基本数据类型
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS的基本语法</title>
    </head>
    <body>
        <script>
//            基本数据类型的定义
            var age = 10; // number类型
            var name1 = 'Alex'; // string类型
            var money = 100; // number类型
            var name2 = 'Jane'; // string类型
//          利用typeof来查看真实类型
            console.log(typeof age);
            console.log(typeof name1)
            console.log(typeof name2)
            console.log(typeof money)
//          判断真假性
            var result = true;  // 真为ture, 假为:false 属于boolean类型
//          设置对象为空时
            var num = null;  // object类型
            console.log(result, num);
            console.log(typeof result,typeof num)
        </script>
    </body>
</html>
// 本例重点 :
1, typeof 打印真实类型,
2, 如何定义一个基本数据类型,
  • 4, 如何拼接字符串

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS中如何拼接字符串</title>
    </head>
    <body>
        <script type="text/javascript">
             var name1 = 'Alex';
             var name2 = 'William';
//            拼接字符串
            var newName = name1 + name2;
            console.log(newName)
            console.log(typeof newName); // string
//          面试题 : 写出下面str的值
            var str1 = 8 + 8 + 8 +8; // str1 = 32
            var str2 = 8 + 8 + '8' + '8'; // str2 = 1688
            var str3 = '8' + '8' + 8 + 8; // str3 = 8888
            var str4 = '8' + 8 + 8 + '8'; // str4 = 8888
            var str5 = '8' + 8 + '8' + 8; // str5 = 8888
            console.log(str1, str2, str3, str4, str5);
//          总结 : 运算时从左到右开始运算的,只要是遇到字符串类型,后面的都会被转为string类型
        </script>
    </body>
</html>
// 本例重点 : 当基本数据和string混合运算时的本质是什么?
  • 5, JS中的数组
// 数组例子1:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS中的数组相关知识</title>
    </head>
    <body>
        <script type="text/javascript">
            var name ='William';
//            数组的简单定义
            var informations = [name, 'Alex', 25, 177, 'IT', 'iOS'];
//            如何获取数组中的元素
            console.log(informations[0]); // Williame
//            如何计算数组的长度
            console.log(informations.length); // 6
//            判断类型
            console.log(typeof informations); // object
//            遍历数组中的每个元素,判断每个元素的类型是什么
            for(var i = 0; i < informations.length; i++){
//                打印出每个元素
                console.log(informations[i]);
//                打印出每个元素的类型
                console.log(typeof informations[i]);
            }
        </script>

    </body>
</html>
注意:本例重点 :
1, 数组中的元素是以什么形式存在的?
2, 对象需要用单引号引用起来, 如果没有用单引号引用的,说明在数组外边已经定义过了,剩余的就是基本数据类型.
3, 如何动态获取到数组的长度.
(关于JS中的数组与OC中的数组的区别下面会介绍)
  • 运行结果 :
Snip20160318_3.png
// 数组例子2:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS中的数组相关知识</title>
    </head>
    <body>
        <script type="text/javascript">
            var name = 'William';
//           定义一个数组(注意这个数组,数组中还有数组)
            var names = ['Alex', name, 25, 177, ['JL', 23]];
//            获取数组中的元素
//            console.log(names[1]);
//            console.log(names[3]);
//            console.log(names[4]);
//            console.log(names[4][0]);
            for(var i = 0; i < names.length; i++){
                console.log(names[i]);
                console.log(typeof names[i]);
            }
        </script>

    </body>
</html>

  • 运行结果 :


    Snip20160318_7.png
Snip20160318_16.png

  • JS中的数组与OC中的数组的区别 ?

  • 1, JS中的数组:元素可以是无序的,可以存储所有类型,但是OC中的数组:是有序的,只能存储相同类型的数据

  • 2, JS中的数组:数组中还可以嵌套数组, 但是OC中的数组不能再嵌套数组

  • 3, 动态计算数组的长度时,使用的属性不一样,JS中使用的是length,而OC中使用的是count.

  • 4, JS中的对象是用单引号,而OC中的对象是双引号还有@符号

  • 6, JS中的点语法

 var handsomeBoy = {
                name : 'Alex',
                age : 25
            }
            console.log(handsomeBoy.name);
            console.log(handsomeBoy.name + '#' + handsomeBoy.age);
  • 7, JS中函数的定义
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JS中函数的定义</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
             函数的定义 :
             function 函数名 (参数列表){  // 函数列表不需要表明参数类型
             函数体
             }
            */
//            例子1 : 加法运算
            function sum (sum1,sum2)
            {
               return sum1 + sum2;
            }
            console.log(sum(12,12));
//            方式2
            function sum (sum1, sum2){
                console.log(sum1 + sum2);
            }
            var  result = sum(10, 10);
//            方式3
            function sum (sum1, sum2){
                console.log(sum1 + sum2);
            }
            var result = sum(8,8); // 16
            console.log(result);  // undefined
//            sum(18, 18);  // 36

//            要求写一个万能的加法运算公式
            function sum(numbers){
                var  count = 0;
                for(var i = 0; i < numbers.length; i++){
                    count = count + numbers[i];
                }
                return count;
            }
            var  arr = [13, 12, 24, 55, 'Alex', 25, 'William'];
            var  result = sum(arr);
            console.log(result);
//            JS提供了一个属性,我们可以不用传参数
              function sum() {
                  var  count = 0;
                  for(var i = 0; i < arguments.length; i++ ) {
                      count = count + arguments[i];
                  }
                  return count;
              }
//            var arr = [13, 24, 25, 'William', 168, 'Alex'];  // 只会将数组全部打印出来
            var result = sum(13,14,14,15);  // 56
            console.log(result);
//            匿名函数
            var  result = function (){
                console.log("Alex William");
            }
//            匿名函数的调用
            result();
        </script>
    </body>
</html>
  • 运行结果 :
Snip20160318_17.png
  • 注意点 : 特别要注意匿名函数,不要忘记调用函数
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350

推荐阅读更多精彩内容

  • 少年，你慢点，春在萌发
    少年，望着你小小的背影，我知道，自己永远只能在你的身后。我想就这样陪着你，脚步不会匆匆，距离不会遥远。当你呼唤时，...
    简遐思阅读 599评论 2赞 3
  • swift中函数可变参数的使用
    情景回顾（OC篇）在使用oc开发的时候就接触了函数可变参数的概念，用的最多的当然是在创建UIAlertView和A...
    TyroneTang阅读 2,680评论 0赞 3
  • 提线人偶
    我是一个提线木偶，一根细线，决定了所有…… 我不会哭也不会笑，我不会痛苦也不会哀嚎…… 我...
    虔罗阅读 192评论 0赞 0
  • 无标题文章
    少年觉得这张网是吊床，其实是个网
    二货纯纯阅读 135评论 0赞 0