专栏首页萌兔itJavaScript入门(1)

JavaScript入门(1)

Hello小可爱们,今天我们又要回到学习主题咯,前面学习了HTML和CSS的用法,今天我们就要为Web页面注入生命啦,那就是JavaScript,通过JavaScript我们可以让我们的页面动起来,这也是Web开发中的一座大山。

首先我们要了解一下什么是JavaScript,它在Web开发中的作用是什么,然后再去了解它是怎样工作的。JavaScript是一种可插入HTML的轻量级编程语言,并能够由现代浏览器所执行。Web前端的三座大山中,HTML定义了网页的内容,CSS描述了网页的样式,JavaScript则是定义了网页的行为。

为了更好的了解JavaScript的知识,我把JavaScript的知识大体总结成为了一下几个模块,这样子也是方便大家对JavaScript有一个整体的认识。(这个总结的也不是很全,但是最开始我们所需要了解的都在这里了,一步一步迈向更高峰嘛~)后面呢,我们也是按照模块来一一为大家分享~~一定要持续关注哟

我们今天就从JavaScript的创建聊起。后面对JavaScript简称为js,在HTML中,js脚本必须放在<script></script>之间,至于<script>标签对的位置就相对比较随意了,可以放在head中,body中,位置较为随意,保证被<script>包裹就好,因为这样浏览器才知道js从哪里开始哪里结束,要解析哪一部分语言。举个?

这个例子中,js被插入在了body里面,运行的时候会弹出框,写着“萌兔IT”,是不是很有意思呢~

与CSS相同,js也有着不同的引入方式,如上图则是在HTML中直接插入js语言,我们也可以将js语言单独放置在一个文件中,并引入HTML。这时候我们用到的还是<script>标签,<script src="mengtu.js"></script>即可实现将同一级文件夹下的mengtu.js引入html中。有小伙伴一定会奇怪,在不同地方引入js有什么区别呢,这里就涉及到了js的加载顺序问题,因为js是单线程的,所以当没有特殊处理时,会按照页面的引入顺序进行加载,如果前面的js加载时间过长,就会引发阻塞了(这里我们后面会讲到),因此引入js的位置也是很重要的!

下面要开始介绍详细的JS代码咯,准备好了吗?无论什么语言最开始要了解就是变量、数据类型、运算符和表达式了,今天我们就主要介绍这一部分。

1. 变量:大家还记得代数嘛?小学的那个,x=1;没错,这就是这个。JS的变量也是用来存放值和表达式的,但是表达式的命名也有一些限制,为了代码更容易阅读,最好起变量名时与具体情境相关,当然这不是硬性要求,硬性要求是以下几个:(1)变量必须以字母或$符号或_符号开头,变量名称是大小写敏感的。(2)JS的所有变量都是对象,当声明一个变量时,就创建了一个新的对象。

2. 数据类型:JS的数据类型可以分为两大类,即值类型和引用数据类型。按照我的理解来说,值类型就是简单的一个数据,一对一的一个数据关系,包括字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)和Symbol(ES6引入的新原始数据类型);引用类型则是通过值类型组成的复杂数据结构,包括对象(Object)、数组(Array)和函数(Function)

这里有个注意的地方,null类型代表空值,代表一个空对象指针,使用typeof运算得到“object”(说人话就是还没有定义);undefined当一个声明了一个变量未初始化时,就会得到undefined(说人话就是声明了,但是没有赋值)。

3. 运算符:JS中运算符主要分为算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符、其它运算符。

(1)算术运算符主要用来进行计算,包括加法(+)、减法(-)、乘法(*)、除法(/)、取余(%)、自增(++)、自减(--)等;

(2)赋值运算符则用于给JS变量赋值,如x=y, x+=y, x-=y, x*=y, x/=y, x%=y等;一个特殊的地方是,当“+”用于字符串中时,则是将两个字符串进行拼接;当“+”前后是不同类型的时候,输出结果有时也会出乎人的意料,当字符串与数字相加的时候浏览器会将数字自动转化为字符串类型,并输出字符串。

(3)比较运算符:通过比较运算符测试得出true或false

等于(==)、绝对等于(===)这大概是JS独有的吧,这个保证数据不会被自动转换格式而得出相等的结论、不等于(!=)、不绝对等于(!==)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)

(4)逻辑运算符:用于测定变量或值之间的逻辑:和(&&)、或(||)、非(!)

(5)条件运算符:类似于Java中的三目运算:

variablename=(condition)?value1:value2

(6)typeof运算符:用来判断变量类型,但是不能明确的判断出对象是什么对象,问题来了怎么判断对象是不是数组,用的是instanceof

(7)delete运算符:删除对象属性或数组元素

(8)void运算符:出现在操作数之前,忽略计算结果并返回undefined

4. 表达式:表达式也可以理解为包含运算符,表达式分为很多类型:

(1)原始表达式:包含直接量、常量、关键字和变量

(2)对象和数组的初始表达式:var arr = [];

(3)函数定义表达式:var func = function(){...}

(4)属性访问表达式:运算得到一个对象属性或一个数组元素的值:expression.identifier; expression[expression]

(5)调用表达式:f(0), a.sort()

(6)对象创建表达式:创建一个对象并调用一个函数初始化新对象的属性。new Object()

(7)运算符表达式:如算术表达式、关系表达式、逻辑表达式、赋值表达式等

今天就写到这里吧,JS是个大工程还要慢慢吸收。另外,CSS也是个水很深的东西,但是考虑到首先是能够快速上手开发项目,我们前面讲到的也只是怎样简单使用,它还有更加强大的作用,还有待我们后面慢慢解锁。另外不知道有没有细心的小伙伴们发现我们的公众号变样子了,是的,因为小编发福利了,为大家提供了免费的书籍资源。后台回复html和css有惊喜哟,后面我们也会逐渐发出更多书籍的~~喜欢兔妞的文章请点击好看让更多人看到哟~~么么哒!

本文分享自微信公众号 - 萌兔it(mengtu_it),作者:萌兔IT

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端面试宝典(五)—— Vue

    MVVM是Model-View-ViewModel的简写,Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI...

    萌兔IT
  • JavaScript第九弹——探究跨域

    Hello小可爱们~~我又来了,还记得昨天说的今天要说什么吗???是滴,今天要说的就是跨域!

    萌兔IT
  • 数据结构于JS也可以成为CP(六)字典

    Hello小伙伴们大家好,今天我们继续下一个数据结构,前面的数据结构所存储的数据都是单元素,但是如果我们想对一对数据进行存储该用什么呢?这时候就要请出字典了,字...

    萌兔IT
  • C语言零基础入门难发愁,那就快来看看这篇基础整理资料吧

    用一个简单的c程序例子,介绍c语言的基本构成、格式、以及良好的书写风格,使小伙伴对c语言有个初步认识。

    用户6754675
  • 有人@我,你有一份C语言基础大全手册要领取,快来拿!

    前两天,有网友问了我一个关于C语言的问题,本着认真装逼的态度,我把大学时学过的C语言课本翻了一遍,终于找到了答案。整理后,现分享给大家!

    猫咪爱分享
  • 【必读】超全的C语言基础知识大全

    我们用一个简单的c程序例子,介绍c语言的基本构成、格式、以及良好的书写风格,加深小伙伴们对C语言的认识。

    老九君
  • 【必读】C语言基础知识大全

    C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成、格式、以及良好的书写风格,使小伙伴对c语言有个初步认识。 例1:计算两个整数之和的c程...

    老九君
  • Java编程思想第五版精粹(四)-运算符

    接受参数并生成新值。与普通方法调用殊途同归。所有运算符都能根据自己的运算对象生成一个值。

    JavaEdge
  • MySQL数据库应用总结(八)—MySQL数据库的数据类型和运算符(下)

    SQL语法预览: 创建表字段数据类型:【createtable 表名(字段名称 数据类型); 】 插入字段值:【insert into表名 values(值1,...

    企鹅号小编
  • C语言中的运算符

    C语言运算符是说明特定操作的符号,它是构造C语言表达式的工具。C语言的运算异常丰富,除了控制语句和输入输出以外的几乎所有的基本操作都作为运算符处理。除了常见的三...

    老九学堂-小师弟

扫码关注云+社区

领取腾讯云代金券