此文只适用于初学者，大神们就不要看了，嘿嘿~

一、定义变量

　　关键字 var，由此关键字定义变量，例如：var a =21；就把21这个数定义给了变量a

二、基本数据类型

　　1、Number类型　　表示数字，例如：10，3.14；

　　var number = 10；

　　alert（number）；

　　2、String类型　　表示字符串

　　var string = ‘hello’；

　　alert(string);

　　·注意：等号后面必须有单引号或双引号。

　　3、Boolean类型　　布尔类型，用来表示真假　　true　　false

　　var b1 = true；

　　var b2 = false；

　　alert（b1）；

　　4、Object　　对象类型（了解）

　　var obj = new Object();

　　alert（typeof obj）；

三、用户交互&代码调试的5绝杀

　　用户界面交互基本操作是警告，提示和确认。

　代码调试：

　　1、alert(Message);　　消息窗口，也叫作模态窗口

　　var c = 0；

　　alert（c）;

　　这两句JS代码便会在页面刷新时 ，出现提示框，提示框的内容为“0”；

　　2、prompt（提示信息）;　　该提示框会出现用户可以输入的窗口，类似于input中的text属性。

　　var name = prompt('请输入姓名');

　　alert(name);

　　3、confirm　　跟alert差不多，就是多了个取消

　　confirm('下课不？');

　　4、console.log　　这个不是在网页上提示，而是在开发者工具中的控制台中输出

　　var a =100;

　　console.log(a);

　　会在控制台上出现“100”这个数

　　5、document.write　　将内容写入到html文件中

　　document.write('这是一个大千世界，啥货都有')；

四、算数运算符

　　 算数运算
         alert(5+5);
         alert(10-3);
         alert(5*6);
         alert(10/2);
         求余运算： alert(10%3);

+号对字符串的作用
         alert('hello'+' word');//拼接
         alert('2'+1);
         -号对字符串的影响
        alert('5'-3);// 2

自增，自减运算符 ++   --
         var a = 10;
         a++;//相当于a = a + 1;
         ++a;
         alert(a);

var b = 10;
         b--;
        --b;
        alert(b);

当++  -- 不是单独出现的时候
        var a = 10;
        var number = a++;// ++ 在后，先赋值，在自增；++ 在前，先自增，在赋值。
        alert(a);
        alert(number);

复合运算符
       +=  -=  *=  /=  %=
        var a = 10;
        a = a + 5;
        a += 5;
        alert(a);

a = a / 3;
        a /= 3;
        alert(a);
        a = a % 3;
        a %= 3;
        alert(a);
五、元素的获取

　　<body>

　　　　<p id="para">这就是P标签</p>
    　　 <p class="praa">通过类名获取元素</p>
    　　 <p class="praa">通过类名获取元素</p>
    　　 <p class="praa">通过类名获取元素</p>

　　<script type="text/javascript">

　　　　//1.通过id获取元素

　　// var para = document.getElementById('para');
    　　// //修改元素的样式
    　　// para.style.color='red';
    　　// //2.通过类名获取元素

　　var praa = document.getElementsByClassName('praa');
   　　 //修改集合中第一个元素的样式
   　　 praa[0].style.color = 'blue';
    　　praa[1].style.color = 'yellow';
    　　praa[2].style.color = 'orange';
    　　praa[1].style.color = 'green';

　　//3.通过标签名获取元素

　　// var paar = document.getElementsByTagName('p')

　　 // paar[0].style.color = 'green';

六、一些细节：

　　script标签放在底部的好处：
    　　　　虽然理论上放在哪里都是可以的，但是对于前端页面优化来说，放在底部最佳，如果js执行出错，最起码页面中的元素还能加载出来，因为文档是按照从上到下的顺序执行的。

　　变量名：（自定义的，1、不能以数字开头，可以是字母/_/$/。2、不能使用系统保留字。3、大小写敏感，多个单词采用驼峰命名法{var className=21;}。4、见名知意。5、不能出现空格）

JavaScript基础认知的更多相关文章

  1. javascript基础修炼（8）——指向FP世界的箭头函数

    一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...

  2. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  3. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  4. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  5. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  6. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  9. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

随机推荐

  1. （Hibernate进阶）Hibernate映射——一对一双向关联映射（六）

    上一篇博客我们介绍了一对一的单向关联映射,单向是指只能从人(Person)这端加载身份证端(IdCard),但是反过来,不能从身份证端加载人得信息.如图所示: 关键原因在于对象模型具有方向性: 单向: ...

  2. 这些年正Android - 母亲

    记得小时候,在自己写完一篇作文,完成母亲布置的任务后,就会搬走母亲正在使用的大椅子,面朝门前的马路,就这么憧憬的坐着,听着母亲给小孩打针时,小孩哇哇的哭声,努力的幻想着自己以后能做一个顶天立地的男子汉 ...

  3. grub的sol

    http://smcijohnny.blogspot.com/2015/06/linuxsolserial-over-lan.html https://www.hiroom2.com/2016/06/ ...

  4. 第一个ruby程序

    老实说不是很喜欢去讨论ruby和python的对比,似乎总是把两个语言放在对立的位置上,我觉得没有必要,同样是动态语言,同样是解释型脚本语言,很多特性都是互相影响的,语言本身也在不断进化,我们更应该关 ...

  5. jQuery EasyUI CheckBoxTree的级联选中

    :子结点选中,父节点随之选中,父节点取消,子节点随之取消 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

  6. UE4.11新特性：胶囊体阴影

    官方介绍 虚幻引擎现在支持非常柔滑的间接阴影,由代表角色的胶囊体来进行投影. 通常,在受间接光照时,并不会产生阴影,除非是屏幕空间环境遮罩.间接投影需要做的非常柔滑,因为间接光照是来自很多不同的方向, ...

  7. js类式继承模式学习心得

    最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...

  8. btrfs-snapper 实现Linux 文件系统快照回滚

    ###btrfs-snapper 应用 ----------####环境介绍> btrfs文件系统是从ext4过渡而来的被誉为“下一代的文件系统”.该文件系统具有高扩展性(B-tree).数据一 ...

  9. rabbitMQ学习（六）

    请求模式 客户端: import com.rabbitmq.client.ConnectionFactory; import com.rabbitmq.client.Connection; impor ...

  10. 解决低版本chrome浏览器不支持es6 Array.find()

     if (!Array.prototype.find) {  Array.prototype.find = function(predicate) {    'use strict';    if ( ...