js基本语法

js介绍

html:结构
css:样式
js:行为：动态 != 动画
    动态：表单验证（动态验证）
          前后端的数据交互


javascript介绍：
    历史：livescript(网景)(javascript VS java),JScript(IE)
            火狐：开源：
            XXXscript
    开发者：ECMA：ECMAScript
        
javascript组成：
    ECMAScript：(标准/规范)：它规定了语法、类型、语句、关键字、保留子、操作符、对象。（相当于法律）
    BOM（浏览器对象模型）：载体，运行规范的平台。可以访问浏览器窗口的浏览器对象模型，对浏览器窗口进行操作。
    DOM(W3C（文档）)：页面，规范约束的部分。DOM把整个页面映射成一个多层节点结构。HTML页面组成都是某种类型的节点，这些节点又包含着不同类型的数据

    作用：行为

 

第一行js：

写在哪：
    html写在html文件
    css写在css文件（link标签联系html）；写在html文件的style标签内
    js写在js文件（script标签联系html）；js写在html文件的script标签内
   " 注意：外部和内部的js不能共用一个script标签"
写什么：
    打印“hello world”
    打印语句：
    alert('hello world');           在弹出框（BOM）显示
    document.write("hello world")   在页面（DOM）上显示
    console.log("hello world")      在控制台（BOM）显示
怎么执行:
    跟随引入或所在的html文件执行

 

js的引入：一种是外联，一种是内部

外联JS的写法为：
    <script src="相对路径"></script>
    这是一条html语句，原则上可以放在html页面的任意位置，不用和link标签一样非得放在head部分
    相对路径链接的是JavaScript文件，文件的扩展名为.js，如index.js

内部JS的写法为：
    <script>
        //在script标签内写js脚本
    </script>

 

打印相关语句

注：变量除外。打印变量不要加引号，它就是一个变量、容器、名字；因为它是一个变量，需要被 浏览器解析，如要要是加上引号的话会被当成字符型的数据类型

  console.log( )：除了数字可以不加引号外，其余的都要加引号
  document.write( )：可以打印普通的文本之外，还可以打印标签，即在页面上可以解析标签(效果生效了)

  alert( )：不能解析标签

变量

将信息(数据)，保存在一个箱子中，给这个箱子起名

声明变量，存储值(赋值)

 

变量，必须要先声明
关键字：var，声明变量
var a;
  符号：运算符：赋值运算符：=
  左边是变量，被赋值的名字(箱子)
  右边是值

规范写法
    var a;              // 先声明变量
    a = "hello";        // 再赋值
    var a = "hello";    // 声明之后立即赋值

不严谨(在严格模式下会报错)
    var a,b,c;          // 一次性声明多个变量
    var a="hello",b="world",c=10;   // 一次性声明多个变量并且多个赋值
    var a,b,c=30;       // 声明多个变量，有些赋值有些不赋值

 

命名规范：
  1.只能使用字母或_或$，开头
  2.不允许使用关键字和保留字
    关键字:系统有提供功能的单词，不允许开发者使用
    保留字：系统暂时没有提供功能，将来有可能提供功能的单词，不允许开发者使用
  3.尽量语义化
    词必达意,最好使用单词
能体现数据的类型

数据类型

  数据类型：
    字符(string)：只要被引号引起来
    数值(number)：0~9,NaN
    布尔(boolean)：true，false
    undefined：undefined
    对象(object)：将一个具象的事物，使用抽象的描述表示出来的数据组合
      格式：{name:"admin",age:18}
    数组(array)：数据的组合，一组数据
      格式：["hello",123,true,undefined,{},[]]
    函数(function)：功能，代码段   （可认为函数是一种包装，变量是小包装，函数是大包装）       格式：function fn(){}   （这里的function就相当于var的功能）     ...

检测数据类型

  关键字：typeof：检测数据类型

console.log(typeof date);
console.log(typeof(dete));

 

帮助变量语义化
  建议使用数据类型的缩写，在变量名上体现数据类型

var sData1 = "123";
var nData2 = 123;
var bData3 = true;
var uData4 = undefined;
var oData5 = {name:"admin",age:18};
var aData6 = ["hello",123,true,undefined,{},[]];
function fRandom(){}

 

驼峰式：
  大：从第一个单词的首字母开始大写
  小：从第二个单词的首字母开始大写

运算符

数据类型转换：
  隐示类型转换：
    场景：算术运算符，关系运算符
  显示（强制）类型转换：

算数运算符：+ - * / %

+ ：只要出现字符，则都转字符
-、*、/、%：直接作为数值处理

var n1 = 7;
var n2 = 3;
console.log(n1 + n2);       // 10
console.log("n1 + n2");     // n1 + n2
console.log(n1 - n2);       // 4
console.log(n1 * n2);       // 21
console.log(n1 / n2);       // 2.3333333333333335
console.log(n1 % n2);       // 1    // 取余也叫求模

var n1 = "7";
var n2 = 3;
// 对于 + 来说，当两边出现一个字符时，会将字符作为字符处理
console.log(n1 + n2);           // "73"
// 对于 -、*、/、% 来说，当两边出现一个字符时，会将字符作为数值处理
console.log(n1 - n2);           // 4
console.log(n1 * n2);           // 21
console.log(n1 / n2);           // 2.3333333333333335
console.log(n1 % n2);           // 1

var n1 = "7";
var n2 = "3";
// 当两边出现一个字符时，会将字符作为字符处理
console.log(n1 + n2);           // "73"                             
// 会将字符作为数值处理
console.log(n1 - n2);           // 4               
console.log(n1 * n2);           // 21
console.log(n1 / n2);           // 2.3333333333333335
console.log(n1 % n2);           // 1

var n1 = "hello";
var n2 = "3";
// 当两边出现一个字符时，会将字符作为字符处理
console.log(n1 + n2);           // "hello3"
// 会将字符作为数值处理
console.log(n1 - n2);           // NaN
console.log(n1 * n2);           // NaN
console.log(n1 / n2);           // NaN
console.log(n1 % n2);           // NaN
console.log(typeof(n1 % n2));   // number

 

NaN：非法的数值运算
  not a number -----> 不是一个数字的数值型数据

关系运算符： >、<、>=、<=、!=、== 、===

当有一个数值一个字符时，会转成数值

var n1 = "7";
var n2 = 32;
// 当有一个数值一个字符时，会转成数值
console.log(n1 > n2);       // f
console.log(n1 >= n2);      // f
console.log(n1 < n2);       // t
console.log(n1 <= n2);      // t
console.log(n1 != n2);      // t

 

都是字符时，按照字符的比较规则：逐位比较，得到结果，停止比较

var n1 = "7";
var n2 = "32";
// 按照字符的比较规则：逐位比较，得到结果，停止比较
console.log(n1 > n2);       // t
console.log(n1 >= n2);      // t
console.log(n1 < n2);       // f
console.log(n1 <= n2);      // f
console.log(n1 != n2);      // t

 

== 和 ===

var n1 = 10;
var n2 = "10";
// 转换，字符转数值
console.log(n1 == n2);      // t
// 没有转换，全等于，值和类型都相等
console.log(n1 === n2);     // f


var n1 = "7";
var n2 = "700";
// 逐位比较，你没有，它还有，它大
console.log(n1 == n2);      // f
console.log(n1 === n2);     // f
console.log(n1 > n2);       // f
console.log(n1 < n2);       // t

 

赋值运算符： = 、 += 、 -= 、 *= 、 /= 、 %=

 

逻辑运算符：||  &&  !

或：只要出现true，即为true
console.log( true || true );         //t
console.log( true || false );        //t
console.log( false || true );        //t
console.log( false || false );       //f

且：只要出现false，即为false
console.log( true && true );         //t
console.log( true && false );        //f
console.log( false && true );        //f
console.log( false && false );       //f

非：取反面
console.log( !true );       //f
console.log( !false );      //t

 

 

自增自减

++ --

a++：表示在a原有的基础上增加1 a/--：表示在a原有的基础上减小1

前自增与后自增有本质的区别，他们相同点都是为自身加了1，不同点是
    "前自增是先加1，再使用操作数的值"
    "后自增是先使用操作数的值，再加1"

前自减和后自减同上。

 

js的特殊值

undefined

undefined:变量声明了，但未赋值

    var a = undefined; 
    console.log(a);     // undefined
    var b;
    console.log(b);     // undefined
    console.log(a == b);    // true
    "a,b都为undefined的来源不一样，相同的原因是发生隐式类型转换"
    console.log(a === b);   // true

 

NaN

NAN:非法的运算得到的不是数字的数值型数据,是一种特殊的Number类型，代表意外转换的数字，与任何值（包括自己）都不相等

非法的运算会得到NAN

    var a = "hello" - 1;
    console.log(a);     // NaN，(通过运算得到的NaN)
    var b = NaN;
    console.log(b);     // NaN，(直接赋值的NaN)
    console.log(a == b);    // false
   " // 不相等原因：来源不相等"
    
    console.log(NaN == NaN);    // false
    "就算来源相等，依然是false，原因是NaN与任何值（包括自己）都不相等"
    "虽然来源相等，但是在计算机的执行过程中，左边NaN的执行位置和右边NaN执行位置不相等，在内存中的存储位置依然不相等"
    
    
    var a;
    var b = a + 1;  
    console.log(a);         // undefined
    console.log(b);          // NaN
    
    console.log(isNaN(b));          // true
    "不是数字， 是NaN"
    console.log(isNaN(123));        // false
    "是数字， 不是NaN"
    
    console.log(isNaN("hello"));    // true
    "hello转不了"
    console.log(isNaN("123"));      // false
    "发生了隐示类型转换，把字符型型的123转化为数值型的123"
    
    判断数字？相反结果
    判断NaN？结果
    isNaN(n);

    是不是  不是 一个数字？ 是
    是不是NaN？true
    请问是不是数字？不是

 

null

 null:空
  var a = null;
  var b = null;
  console.log(typeof null);   // object
  console.log(a == b);        // true
  "相等原因：特殊的一个点，记住即可
  （在js中任何两个对象都不相等）"
  console.log(a === b);       // true
      
 
  
              //0         //0
  console.log(null == undefined);     // true
  "相等原因：两等于有隐式类型转换，在这里null和undefined都转换成了一个共同的值0"
  console.log(null === undefined);    // false
  "此时就是false了，因为没有隐式类型转换"
  
  console.log(null == NaN);           // false
  console.log(undefined == NaN);      // false
  // NaN和任何值都不相等
  
  
  "注意：在js中表达 空 时，除了null，一定要加描述"
  var a = undefined;      // 未赋值
  var b = "";     // 空字符   
  " // 任何情况下，只要加了 "" 号，必然是一个字符，哪怕是一个空"
  var c = {};     // 空对象
  var d = [];     // 空数组
  var f = function(){}    // 空函数

  var a = {};
  var b = {};
  console.log(a == b)     // false

  "在js中，任何两个对象都不相等"

 

特殊的点：undefined等于undefined，NaN不等于NaN

isNaN()函数，该函数判断括号内的值是否是NaN，是就返回true，不是就返回false

进制

进制的介绍

概念：只有十进制是数值，其它进制都是字符

n进制：逢n进1

计算机中存在其他进制：
"计算机的本质：电器，用的是电，电可以控制开关，开关有两种状态：开1，关0"
"计算机的运算就是利用计算机的电来控制开关的开和关，来进入各个数据来进行运算。"

二进制：计算机只能识别二进制
计算机接受的数据如：
    "hello"     // 字符
    456         // 数值
    true        // 布尔
    #aa3386     // 颜色值

 

计算机根据不同的数据类型提供了不同的过渡进制（如8、16进制等，最终都会被转换为2进制）

    只有十进制是数值：
    十进制25：0123456789,10,19,20,25

    其余进制都是字符：
    二进制8：01,10,11,100,101,110,111,1000
    八进制13：01234567,10,11,12,13,14,15
    十六进制25：0123456789abcdef,10,11,12,13,14,15,16,17,18,19

    "写：只有十进制是数值，其他进制都是字符"
    var a = 100;    // 只能是10进制，因为这是数值
    var b = "100";  // 可能为8或者16进制
   " 读：只有十进制才是日常所读，个十百千万；其他进制，逐位读"

 

隐式类型转换

运算中的隐式类型转换

+号有两种含义：数学中的＋号运算符；字符串的拼接。优先字符串拼接，所以在检测到＋号左右两边存在字符串的时候，会自动将另一边不是字符串的数据，转成字符串，再进行操作

除了+号有两层意义为外，-/%号只有数学意义，所以当进行-/%的时候，默认将运算符两边的数据类型隐式转换成数字类型再进行运算

    数值转字符
    var n = 123;
    var s = n + "";
    console.log(s);         // "123"
    
    字符转数值
    var s = "123";
    var n = s - 0;          // 减0、乘1都行
    console.log(n);         // 123
    
    =========================================
    
    其他转数值
   " true为1，false为0"
    console.log(1 + true);       // 2
    console.log(1 + false);      // 1
    
    console.log(1 + undefined);  // NaN（因为undefined无法转数值）
    console.log(1 + NaN);        // NaN
    console.log(1 + null);       // 1
    "null被转化为0"

 

if的小括号内的隐式类型转化

if()的小括号中只需要布尔值，那么在if判断中，会把括号内所有的数据类型，都隐式转换成布尔型。 在if()中，非零数字都会转成true，非空字符串都会转成true；这是两条基础规则

隐式类型转换：（改转换发生在if后面的小括号内，即其它类型转布尔类型）
    场景：if()
    "小括号带了一个执行的功能，当在里面写了其它类型的值时，会把这种类型解析成布尔值类型，即所谓的隐式类型转换"
    
    其他转布尔
    
    规则：
        数值型：非0为true，0为false
        字符型：非空为true，空为false
            "当写入空字符(什么都不写，空格也没有)时，为false"
        对象：除了null，所有对象为true
            "数组、函数都是特殊的对象"
        undefined，NaN，null：为false

 

强制类型转换

字符转数值

parseInt()：取整，从左向右一次转换，能转则转，不能转停止；如果第一位就不能转，直接NaN；不识别小数点。
parseFloat()：等同于parseInt，同时可以识别小数点
Math.round()：严格转换，不允许出现任何非数字的字符，否则NaN；取最接近的整数
Number()：严格转换，不允许出现任何非数字的字符，否则NaN；直接转换

"parseInt()：取整，从左向右依次转换，能转则转，不能转停止；如果第一位就不能转，直接NaN；不识别小数点。"
    var str = "123";
    var str = "123abc";
    var str = "123abc456";
    var str = "a123";
    var str = "adasd";
    var str = "123.45";
    var n = parseInt(str);  
    console.log(str);           // "123"、   "123abc"、  " 123abc456"、  " a123"、   "adasd"、   "123.45"
    console.log(typeof str);    // string、string、   string、      string、 string、  string
    console.log(n);             // 123、   123、      123、         NaN、    NaN、     123
    console.log(typeof n);      // number、number、   number、      number、 number、  number

"parseFloat()：可以转浮点型数据(小数)，等同于parseInt，同时可以识别小数点 "
    var str = "a567.892";
    var n = parseFloat(str);    
    console.log(str);           // "a567.892"
    console.log(typeof str);    // string
    console.log(n);             // NaN
    console.log(typeof n);      // number
    
"Math.round()：严格转换，不允许出现任何非数字的字符，否则NaN；取最接近的整数"
    var str = "123456a";
    var str = "456.789";
    var str = "-456.789";
    var n = Math.round(str);
    console.log(str);           // "123456a"、"456.789"、"-456.789"
    console.log(typeof str);    // string、 string、 string
    console.log(n);             // NaN、    457、    -457
    console.log(typeof n);      // number、 number、 number

"Number()：严格转换，不允许出现任何非数字的字符，否则NaN；直接转换"
    var str = "-456.789a";
    var n = Number(str); 
    console.log(str);           // "-456.789a"
    console.log(typeof str);    // string
    console.log(n);             // NaN
    console.log(typeof n);      // number

 

数值转字符

toString()：直接转换，相当于给要转换的数值，加引号
保留n为小数
toFixed()：加引号的同时，四舍五入保留n位小数，不够，补零

  var n = 10.3543;
    var s = n.toString();
    console.log(n);             // 10.3543
    console.log(typeof n);      // number
    console.log(s);             // "10.3543"
    console.log(typeof s);      // string



    var n = 10.3543;
    var s = n.toFixed(2);       // 保留2位小数
    console.log(n);             // 10.3543
    console.log(typeof n);      // number
    console.log(s);             // "10.35"
    console.log(typeof s);      // string

    var s = n.toFixed(6);       // 保留6位小数，当不够时，补0
    console.log(n);             // 10.3543
    console.log(typeof n);      // number
    console.log(s);             // "10.354300"
    console.log(typeof s);      // string

    console.log(123.567000000)  // 123.567
    "在数值型中，计算机会忽略没有意义的0，"
    "字符却不会，因为字符是按位数来"