JavaScript基础

大力推荐一门好的网站:www.w3school.com.cn

概念

  • 一门客户端脚本语言。
    • 运行在客户端浏览器中。每一个浏览器都有JavaScrip的解析引擎。
    • 脚本语言:不需要编译,直接就可以被浏览器解析执行了。
功能:
  • 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
JavaScript发展史:
  1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
  2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
  3. 1996年,微软抄袭JavaScript开发出JScript语言
  4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript:客户端脚本语言的标准

1.基本语法

1.与HTML结合方式:
  • 内部JS:定义<script>,标签体内容就是js代码
  • 外部JS:定义<script>,通过src属性引入外部的js文件
  • 注意:
    1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
    2. <script>可以定义多个。
2.注释:
  • 单行注释://注释内容
  • 多行注释:/* 注释内容 */
3.数据类型 :
  • 数据类型分为原始数据类型和引用数据类型。
  • 原始数据类型(基本数据类型相似):
    • number :数字。-->整数/小数/NaN(not a number 一个不是数字的数字类型)
    • string : 字符串。 字符串:"abc" "a" 'abc'
    • boolean : true和false。
    • null :一个对象为空的占位符。
    • undefined :未定义。如果一个变量没有给初始值,则会被默认赋值为undefined。
  • 引用数据类型:对象。
4.变量
  • 变量:一小块存储数据的存储空间
  • Java语言是强类型语言,而JavaScript是弱类型语言。
    • 强类型:在开辟存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
    • 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
  • 语法:var 变量名 = 初始值;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--变量类型-->
    <script>
        //定义number类型
        var num1 = 1;
        var num2 = 1.12;
        var num3 = NaN;
        document.write(num1+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");
        //定义string类型
        var str1 = "abc";
        var str2 = 'def';
        document.write(str1+"<br>");
        document.write(str2+"<br>");
        //定义boolean类型
        var flag = true;
        document.write(flag+"<br>");
        //定义null,undefined
        var obj = null;
        var obi1 = undefined;
        var obj2;
        document.write(obj+"<br>");
        document.write(obi1+"<br>");
        document.write(obj2+"<br>");
    </script>

</head>
<body>

</body>
</html>

页面显示:


  • typeof运算符:获取变量的类型。
    • 注:null运算后得到的是object。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--变量类型-->
    <script>
        //定义number类型
        var num1 = 1;
        var num2 = 1.12;
        var num3 = NaN;
        document.write(num1+"----"+typeof(num1)+"<br>");
        document.write(num2+"----"+typeof(num2)+"<br>");
        document.write(num3+"----"+typeof(num3)+"<br>");
        //定义string类型
        var str1 = "abc";
        var str2 = 'def';
        document.write(str1+"----"+typeof(str1)+"<br>");
        document.write(str2+"----"+typeof(str2)+"<br>");
        //定义boolean类型
        var flag = true;
        document.write(flag+"----"+typeof(flag)+"<br>");
        //定义null,undefined
        var obj = null;
        var obi1 = undefined;
        var obj2;
        document.write(obj+"----"+typeof(obj)+"<br>");
        document.write(obi1+"----"+typeof(obi1)+"<br>");
        document.write(obj2+"----"+typeof(obj2)+"<br>");
    </script>

</head>
<body>

</body>
</html>

页面显示:


typeof不是太重要,了解就行,不需要知道变量的类型
注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
ECMAScript 原始类型 (w3school.com.cn)

5.运算符
  • 一元运算符:一元运算符只有一个参数,即要操作的对象或值。它们是 ECMAScript 中最简单的运算符。
  • ++ --: 自增(自减)
    • ++(--) 在前,先自增(自减),再运算
    • ++(--) 在后,先运算,再自增(自减)
    • +(-):正负号
  • 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换。
  • 其他类型转number:例如string类型转number:按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)
var a = +"abc";
alert(typeof (a));
alert(a);

页面窗口弹出的是:



  • boolean转number:ture转为1,flase转为0.

ECMAScript 一元运算符 (w3school.com.cn)


  • 算数运算符

(乘性运算符:* / %)
ECMAScript 的乘性运算符与 Java、C、Perl 等于语言中的同类运算符的运算方式相似。
需要注意的是,乘性运算符还具有一些自动转换功能。
乘法运算符由星号(*)表示,用于两数相乘。
ECMAScript 乘性运算符 (w3school.com.cn)
特殊行为看上面的网址查找

JS特殊语法:
1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字,也可以不使用
用: 定义的变量是局部变量
不用:定义的变量是全局变量(不建议)

练习:99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习:九九乘法表+边框</title>

    <style>
        td{
            border: 1px solid;
        }
    </style>

    <script>
        document.write("<table align='center'>");
        //1.完成基本的for循环嵌套,展示乘法表
        for (var i = 1; i < 10; i++) {
            document.write("<tr>")
            for (var j = 1; j <= i ; j++) {
                document.write("<td>")
                document.write(i +"*"+j +"= "+ i*j+"&nbsp"+"&nbsp");
                document.write("</td>")

            }
                document.write("<br>");
                document.write("</tr>")
        }
        //2.创建表格
        document.write("</table>");

    </script>

</head>
<body>

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

推荐阅读更多精彩内容

  • JavaScirpt变量 JavaScript 变量名称的规则: 应该起一些具有意义的,描述性的,让人望文生义的变...
    zyh9212阅读 356评论 0 0
  • 概述 简介   JavaScript是一种轻量级的脚本语言,是可插入HTML页面的编程代码。JavaScript插...
    java大数据编程阅读 668评论 0 0
  • 1 - 编程语言 1.1 编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果...
    Scincyc阅读 273评论 0 0
  • --- 学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: ...
    YFBigHeart阅读 1,049评论 0 2
  • # JavaScript基础第01天 ## 1 - 编程语言 ### 1.1 编程 -编程: -就是让计算机为解...
    私心呢阅读 226评论 0 0