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

一、定义变量

  关键字 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. 嵌套 QQ、微博 通讯工具到HTML中

    自己QQ.微博的实例: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

  2. typedef 揭秘

    typedef用来声明一个别名,typedef关键字后面是一个声明.语法上typedef属于存储类声明说明符 一.引言 如果你理解typedef的简单形式: typedef int PARA; 这种形 ...

  3. java多线程处理

    package com.copyFile; import java.io.BufferedReader;import java.io.File;import java.io.FileReader;im ...

  4. cacti应用

    cacti被很多IDC/CDN提供商用来进行带宽计算使用:带宽的95计费(95th Percentile charging) 95计费法是CDN常用计费方法: CDN基本上是每月结一次款.每5分钟取一 ...

  5. linux系统的常用命令

    linux系统中常用的命令如下(以后经常补充): cd ..   返回上一级 cd use  进入use目录

  6. java静态和动态代理原理

    一.代理概念 为某个对象提供一个代理,以控制对这个对象的访问. 代理类和委托类有共同的父类或父接口,这样在任何使用委托类对象的地方都可以用代理对象替代.代理类负责请求的预处理.过滤.将请求分派给委托类 ...

  7. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  8. VUE 入门基础(4)

    四,计算属性 基础例子 <div id='example'> <p>0riginal message: "{{message}}"</p> &l ...

  9. VS SETUP项目更新的问题

    用VS建立了一个SetUp类型的项目,build以后将生成的setup文件在机器上安装,然后再rebuild,再安装新生成的setup文件,会出现如下的提示信息: Another version of ...

  10. Modern Operating Systems(Ⅰ)——2014.12.15

    进程   进程模型     进程就是一个正在执行的程序的实例  值得注意的是,若一个程序运行了两遍,则算作两个进程 创建进程 在通用系统中,有四种主要事件导致进程的创建 ①系统的初始化 ②执行了 正在 ...