JS入门第一课-概念-变量-数据类型-js使用方式-运算符-附作业

一、什么是JS

  • 全称叫JavaScript

  • 是一门脚本语言,也是一门真正的编程语言。

  • 最初用来解决表单验证的问题。

  • 脚本语言:可以将JS代码嵌入到HTML中去使用。

  • 是我们前端吃饭用的工具。

  • 是网页三要素之一(HTML+CSS+JS)

二、为什么要学习,能够做什么

CSS口号-化腐朽为神器的力量!

JS口号-只有想不到的,没有做不到的!

  • -修改网页内容和样式(动态的修改HTML或css)
  • -客户端数据计算
  • -表单输入验证
  • -浏览器事件的触发和处理
  • -网页特殊显示效果制作(特效,轮播图、tab切换页、放大镜效果、滑动星星评分、弹出框、手风琴、、、)
  • -服务器的异步数据提交(ajax)
  • -现代前端的基础,前端工程化、构建化、模块化的基础

三、如何使用JS

跟css一样,也有3种方式

  1. 行内

    <标签 onclick="JS代码">内容
  2. 页面

    在页面任意的地方,写script标签,包裹JS代码
    
  3. 外部

    <script src="JS文件路径" > </script>

四、JS的注释

  1. 单行注释

    //注释内容
  2. 多行注释(同CSS的)

    /*
    这里是注释
    换行也没关系
    */
  3. 注释的作用:

    a. 给人看的

    b. 不让代码执行

五、JS的变量

变量是一切编程语言的基石,无变量,不编程,不但JS有,其他任何编程语言都会有。

变量占据的是内存的空间,变量在理论上会让内存变少,将网页关闭后会释放空间。

内存比喻成酒店,里面的每一个房间号即为变量容器。

开房间需要用一个特别的关键字:var;

  1. 声明变量(怎么订房)

    var 房间号;
    var a;
    var A;
    var var;
  2. 保存数据(入住)

    1. 直接定+入住
    var a="张三";
    2. 先定再入住
    var a;
    a="张三"
  3. 访问数据(使用)

    var a="张三";
    alert(a);//
    //做计算
    var a=1;
    var b=2;
    var c=a+b;//3
    alert(c);//3
  4. 改写数据

    var a=1;
    a=2;
    alert(a);//2
  5. 重复声明,后面的会覆盖前面的

    var a=1;
    var a=2;
  6. 批量声明变量和赋值

    
    var a=1;
    var b=2;
    var c=1;
    var d=2;
    //以上可以改为下面的
    var a=1,b=2,c=3,d=2;
    
    //如果值一样,可以直接用等于号连接
    var a=1
    var b=1;
    //可以写成下面的
    var a=b=1;
  7. 变量的命名规则:

    1、区分大小写
    2、变量首字母必须是以英文字母、$、_下划线
    3、不能用关键字、保留字做变量名

六、变量的数据类型

数据类型:字符串类型、数字类型、布尔、undefined、null、对象。

变量的数据的类型取决于它的值是什么,即看看等于号右边放的是什么数据。

  1. 字符串 string

    //只要添加了引号(单双引号都行)的都是字符串类型
    var a="1";//字符串数字
    var b="你好";
    var c="true";
  2. 数字 number

    //跟数学中的数字一个意思
    var a=1;
    var b=1.5;//小数
    var c=10000;//整数
    //还有个很特别的数字,叫NaN
    var d=NaN; //它叫非数字,not a number
    
    //什么情况下会得到NaN,当一个数字与另一个非数字进行运算时,可能会得到NaN;
    var a=4;
    var b={};//对象
    var d="你好"
    var c=a*b;//NaN;  a和b相乘
    var e=a+d;//"4你好"  
  3. 布尔 Boolean

    //该类型只有2个值,即true或false
    //true表示 真,开,是
    //false 表示假、关、否
    var a=true;
    var b=false;
    var c="true";//字符串
    一般用于判断语句中(明天学)
  4. 未定义 undefined

    //该类型也只有一个值,即它本身,一个变量只是声明,没有赋值默认值就是未定义类型
    var a;//undefined
    var age;//undefined
    var name;//undefined
  5. 空类型 null

    //也只有一个值,即它本身,也表示空
    var a=null;//null;
    //undefined 跟 null(面试题)
    1.共同点都表示空
    2.不同点:类型不一样
  6. 对象 object

    //第9次课以后要讲的(今天只做了解)
    var name="杯子";
    var price=49;
    var isKeepWarm=true;
    //以上写法用了3行代码,看起来像一盘散沙,不像是在描述一个杯子,可以用更集中的方式来描述,就可以用对象包裹起来描述
    var cup={
      name:"杯子",
      price:49,
      isKeepWarm:true
    }

七、使用typeof鉴定数据类型

var a=1;
    a=true;//
    a="哈哈";//
//变量的类型取决于右边的值,值不同,类型也不同
//用法:
typeof 变量的名字;  或
typeof (变量的名字);
typeof a;//"string"

//使用typeof鉴定数据总共有7种结果,比上面的数据类型多一种
"string"、"number"、"boolean"、"undefined"、"null"、"object","function"

function其实也是对象,只是typeof将函数单独列出来了

八、算术运算符

算术运算符同数学中的一样。(+-*/%,++,–)

  1. 加法

    var a=1;
    var b=2;
    var c=a+b;//3
    var d=1+2+3+54;
    var e=1.2;
    var sum=a+e+c;//1+1.2+3;//5.2
  2. 减法

    var a=100;
    var b=1000;
    var c=a-b;//-900
  3. 乘法

    var a=1;
    var b=2;
    var c=a*b;//2
  4. 除法

    var a=1;
    var b=3'
    var c=a/b;//0.33333
    var d=5/5;//1
  5. 取余(求余数)

    var a=10;
    var b=3;
    var c=a%b;//1
    //有什么用: 如何知道2是偶数,或者如何知道任意一个是是奇数还是偶数。电脑是不知道2是奇数还是偶数的。
    规则:如果该数与2相除,如果能相除,即余数为0,则是偶数,否则是奇数
    var a=10;
    var c=10%2;//0 ,证明a是偶数
    //比如如何证明一个数可以同时被3,5,7整除。
    学习的目的:为后面的编程做准备
  6. ++ 自增

    var a=1;
    var b=a++; //b=1; a=2;因为++在后面,所以先忽略++,将把a的值给b,给完后,a再加1;
    var c=++a;//a+1=2,即a=2,然后再将a的值给c;所以a,c都为2
    注意:++表示+1.如果加号在变量的前面,则表示先自己+1,再与其他变量做计算,如果加号在变量的后面,则表示先与其他变量做计算,自己再+1;
    -----分割线----
    var a=1;
    var d=1+ ++a//a=2 d=3
    -----
    var a=3;
    var b=2;
    var c=(a++)+(++b);//c,3+3=6, a=4,b=3;
    var c=++a + ++b;//c=7, a=4,b=3;
    
    a++ ==> a+1
    
  7. — 自减

    自减,和自增一样的规则,只是是-1
    var a=3;
    var b=2;
    //var c=a--;//c=3?  a=2?
    //var d=--a + b--;//d=4, a=2,b=1
    var e=a++ + --b;//e=4,a=4,b=1
  8. 运算符的优先级同数学一样

    //常见的如下:
    
    1、()优先级最高
    2、++,--
    3、*,/,%
    4、+,-
    5、=

相关单词

  1. script 脚本
  2. onclick 点击事件
  3. var(全称:variable) 变量
  4. console 控制台(浏览器的面板)
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 850
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top