JS语法基础--1

1.js基础

1.javascript的组成

• 核心(ECMScript)

  ECMAScript是一个标准

• 文档对象模型（DOM）

  Document Object Model。HTML标签

• 浏览器对象模型（BOM）

  Browser Object Model

2…js引入及书写

• 内部书写

  • 在html文件中直接进行代码书写

• 外部引入

  • 所有的< script>元素放在页面的中

• 直接写在标签内

<p onclick="alert(你好)">点击</p>

3.注释

• 单行注释

  ctrl+/
  // 注释内容 不可换行

• 块级/多行注释

  shift+alt+a
  /*1.块状注释可以用来注释一行中的部分内容
  2.块状注释可以用来注释掉一个函数和大量代码块
  3.块状注释对于函数的注释说明在函数部分讲解 */

• 作用

  • 1.注释可以让不用的代码不执行
  • 2.注释可以用来解释代码的作用

4.调试

• 浏览器调试

  • ctrl+shift+i

5.书写注意事项

• 1.对于HTML来讲，从上向下解释性文件，上面的文件无法调用下面的标签或script。

• 2.对于内部脚本，下面的代码可以调用上面的标签或者script

• 3.如果加载的js中，变量或者函数相同时，就会覆盖，我们叫做污染变量

• 4.外边单引号，里边双引号；外边双引号，里边单引号

• 5.断点用来排错

• 6.js语言每行结束时必须使用;结束，必须是半角

• 7.js代码中大小写必须严格按照规定

• 8.一般首字母都是小写，除了类。都是用驼峰式命名规则

  驼峰式命名：一般首字母都是小写，除了类。都是用驼峰式命名规则。例如setWorkDay

• 9.js 是点语法，表示某个对象的方法和属性

2.常量方法和变量

1.alert（）

• alert(‘弹出内容’)；

  方法一般包括 方法名（参数…)，都必须是英文半角。
  alert(“你好”);//将字符串以弹窗弹出，并且暂停到当前行

• alert(message?:any):void

  提示 message 参数名称 ?可以不写值 :any 这个参数的类型可以是任意的， :void 不返回任何值.

• 将window省略了，window.alert();

2.confirm

var a=confirm("是否继续？");
 console.log(a);

• 弹出确定取消框

3.prompt （）弹出输入框

var s=prompt("你今年多大了?","20");
 console.log(s);

4.document.write（）

document.write(“10”,“20”,“30”);

document.write("<a href='#'>超链接</a>")

• 文档中写入字符

5.document.body.innerHTML=“你好”;

• 赋值，对象的属性需要赋值

  • 对象有两种模式

    • 一种是属性，属性使用=赋值
    • 一种是方法，方法需要()执行

• innerHTML是所有body内（含body）标签的属性，可以给这些标签内局部增加内容和标签

6.write

• write仅属于document的方法，可以给整个文档中增加内容

7.ESS

• 1.ES5之前，

  • 连等，先赋值给=号最左边的元素，再逐级向右。=号左侧是变量名称，=号右侧是值。代码遵从从左至右的执行方式
  • 不需要定义，随手写，不需要类型（弱类型）
  • =号赋值也是有返回值

• 2.ES5不允许直接使用变量的赋值，要定义变量。

  1.如果不使用var声明，那就这个变量就一定是window的属性。
  2.而在函数以外的地方使用var声明也是设置了window的属性

  • 变量命名规则

    • 1、变量必须驼峰式命名法
    • 2、临时变量必须使用_起头，后面接驼峰式命名,有时候也会在函数的参数中使用临时变量命名
    • 3、变量不可以使用关键词和保留字
    • 4、全局的变量名不能与window下的属性和方法同名

  • var

    • 1.一旦使用var是不可以返回的
    • 2.没有使用var会被赋值的结果返回

• 3.ES6

  • let 变量

  • const 常量

    • 常量定义是名称必须全部大写，并且使用_区分单词
    • 使用常量目的是不会被别人修改或者变量污染改变

3.数据类型：数据的分类

数据的分类： 字符类型，数值类型，布尔类型，未定义型，空值，对象型

字符型 string

所有使用 ‘’ “” ``都是字符型

• var a=“a”;
• var b=‘1’;
• var c=true;
• var d=‘你好这个非常"不错"’;
• console.log(a,b,c,d);console.log(typeof a);console.log(typeof(a));

数值型 number

1.小数叫做浮点数。
2.定义的不一定和打印的结果完全相同，全部都会转换为10进制

• var a=3
• var b=3.1;
• var c=-5;
• var d=-5.6;
• var e=0xFF;//16进制
• var f=065;//8进制
• var g=3.1e+5;//科学计数法 3.1*10(5)5次幂
• var h=3.5e-5;//科学计数法 3.5*10(-5) -5次幂

布尔类型 boolean

/* var div0=document.getElementById(“div0”); var bool=true;//这就是布尔值;
div0.οnclick=function(){
bool=!bool;//将bool取反，因为这个bool值的值域只有true和false div0.style.backgroundColor=bool ? “red” : “blue”; } */ // var a=true; // var b=false;

• true,false 对和错，是和否，还可以认为是任何事情的两面

未定义值 undefined

• 仅定义变量未设置值

  • var a;

    用于全局定义，然后根据需要时赋值，初始是没有值的

• 定义变量并且设置值为undefined;

  • var b=undefined;

    用于初始值必须是undefined，或者将原有有值的变量修改为undefined

空值 null

var a=null;
console.log(typeof a);
console.log(a===undefined);

• 空值是将所有引用地址标记清空，用于清理内存 垃圾回收
• 字符类型，数值类型，布尔类型，未定义型都不需要null清除

对象类型 object

var d="names";
  obj={  
     a:1,
     b:"ab",
     "c":true,
    [d]:"xietian"

  }  
  console.log(obj.a);  
  console.log(obj.b); 
   console.log(obj.names); 
    console.log(obj[d]);  console.log(obj["a"]);

• 空对象

  • var obj={};

• 设值为空

  • obj=null;

• key

  • key:value//关键词和值

  • 对象不能出现重复的key

  • key不需要加""

  • 变量作为key必须在外层增加[]

  • 获取对象中key的值时有两种方法

    • 一种是点语法，点语法使用范畴仅限于key属性固定，并且明确
    • 另一种是[]语法，如果是固定的key，就使用字符串方式来设定，如果不固定，直接[变量]就可以

4.数据类型转换

数据类型转换分为强制转换和隐式转换两种

1、数值转字符串

• 类型强制转换

  var a=15.452;
  var b=String(a);将a转换为字符串覆盖原有变量a

• 隐式转换

  a=a+"";
  利用隐式转换方式，没有强制转换，根据运算特征自动转换为字符串，隐式转换所使用的的转换方法是自动执行String(a);

• toString()

  • 实际上是Object对象的方法，任何类型都可以调用这个方法
  • 参数必须是2-36之间，否则报错,转换为指定的进制数

• toFixed(小数点位数)

  a=a.toFixed(2);  
   console.log(a);

//小数点后两位

• 转换为字符串，并且保留小数点位数，自动四舍五入

• toExponential();

  • 转换为指数计数法

• toPrecision();

  • 把数字格式化为指定的长度

2、数值转换为布尔值

var a=0;  
 a=Boolean(a);  
 console.log(a);//结果为flase

• 除了0以外所有的数值转换为布尔值都是true
• 0转换为布尔值是false

3、数值转换为对象

var a=0; 
  a=Object(a);  
  console.log(typeof a);

数值型对象，存储在堆中

4、字符串转换为数值

• 强制转换为数值类型

var a="a";  
   var a="3.2"  
  a=Number(a);

• a=parseInt(a);// 转换为整数

• a=parseFloat(a);// 转换为浮点数

• a=parseInt(a,2);//将字符串转换为2进制

• 不能转换进制

         var color="FF0000";
         color=parseInt(color,16);
         console.log(color);
         a=parseFloat();

• 隐式转换遵从Number()转换方法
• NaN 数值类型中的非数值

 var b="32 1"; //32
   var b="32 ";//NaN
   b=Number(b);  
   b=parseInt(b);  
   b=parseFloat(b);  
   console.log(b);//NaN

5、字符串转换为布尔值

var str="";  
 str=Boolean(str); 
 console.log(str);//flase

• 仅空字符串转换为布尔值时，是false，除此之外全部是true

6、字符串转换为对象

var str="aaa"; 
 str=Object(str); //转换为字符串对象    console.log(str);

 str=str.trim();//清除字符串前后空格

  var str=" a a ";  
   str=str.trim();//清除字符串前后空格  console.log(str);

7、布尔转换为数值

var b=true;  
 b=Number(b);  
 console.log(b);//1

• true转换为1
• false转换为0

8、布尔转换为字符

• 转换后就是字符串true和false

9、布尔转换为对象

• 转换后就是布尔值对象

10、任何类型转换为布尔值

•      var a="";
     var b=0;
     var c=NaN;
     var d=false;
     var e=null;
     var f=undefined;
     以上6种转换布尔值是false，其他都是true
  

• undefined null转换为字符串和数值

  var a;
        var b=null;
         a=String(a);
         b=String(b);
        console.log(b);

       a=Number(a);//转换为数值是NaN
         b=Number(b);//转换为数值是0

        a=parseInt(a);//NaN
         b=parseInt(b);//NaN
         console.log(a,b);

• 尽量不要使用连等赋值

5.算术运算符

+（加 ），-（减）， *（乘）， / （除）， %(取模运算符)

  var s=a+b;
  var s=a-b;
  var s=a*b;
  var s=a/b;
  var s=b%a;

• 运算浮点数运算是会有误差
• 先计算=号右边，完成后的结果赋值给等候左边

 var bn0=document.getElementById("bn0"); 
 var sum=1; 
 bn0.onclick=function(){ 
 sum=sum+1;//先计算=号右边，完成后的结果赋值给等候左边 
 if(sum%2){  
 bn0.innerHTML="开";  
 }else{ 
 bn0.innerHTML="关";  } 
 }

• 如果在算术运算符中前后出现字符串，并且使用+，必须使用字符串首尾相连的方式将内容连接

 var a=3;//因为a不是字符串，所以就会隐式转换为字符串  
 var a="bbb";//结果为3bbb

• tring()， Number() ，Boolean()， Object();
• 如果运算过程中没有使用字符串，使用+符号，其他类型都会转换为数值，并且相加

   var a = 3;
   var b = true;
   console.log(a + b); //4

• 所有类型遇到 - * / %都会隐式转换为数值，然后运算

 var a="5";  
 var b=2;  
 console.log(a*b); //10

6.一元运算符和赋值运算符

逻辑运算符

• +=，-=，*=，/=，%=

  • var a=3;
    a+=7;//a=a+7; 7就是步长 step
    console.log(a+=7);//10

• 赋值运算符的优先级最低

 - >>右移（最后一位丢失）

   var a=5;  
   a>>=1;  
   console.log(a);//5转换为二进制为110，向左移一位为11，最后结果为3

• <<左移（扩大2的n次幂）

  var a=3; 
  a<<=2;  
  console.log(a);//12
  
  var a=1; 
   for(var i=0;i<5;i++){ 
   a<<=1; 
   console.log(a);//2，4，8，16，32

一元运算符

• a++;++a;

  对于a来说，这两个公式运算结果都是相同。
  如果将a++或者++a作为返回值参与运算或者赋值时

  ++a 是+1以后的结果先参与运算或者赋值
  a++ 是将a先参与运算或者赋值

   var a=3;  
   var b= (a=a+1) *3; 
   var b=(a++)*3;//先把a返回  
   var b=(++a)*3;//把a运算的结果返回

• 对于++ 和 – 通常都会直接使用算术运算来处理，也就是说我们会将内容先隐式转换为数值，然后再运算

7.关系运算符

• 关系运算是返回布尔值的一种运算表达式

• 运算符 < > <= >=

• == 判断值是否相等

var a=0;
  if(a==false){  
console.log("aa");  // a-> 0  false  "" 
 }

 if(a==null){  // a-->undefined null  }

• === 判断值和类型是否相等（一般都使用这个）

if(a===false)
{  console.log("aa");  // a-->false 
 }

if(a===undefined){ 
console.log("aa")//a-->undefined 
 }

• 优先隐式转换为数值，并且比较

   var a=3; 
   var b="3";  
   console.log(a==b);//自动隐式转换，结果为true

NaN

• isNaN 将这个字符串转换为数值后判断是否是NaN非数值
• console.log(NaN==NaN);//false
• console.log(undefined==null);//因为两者都不是数据,结果为NaN

!= !==

• ！

if(!a)
{  console.log("aa");  
// a-->0 null undefined false "" NaN 
 }

8.逻辑运算

&& 与

• true && true = (第二个值)
• true && false = （第二个值）
• false && true = （第一个值）
• false && false = （第一个值）

|| 或

• true || true = (第一个值)
• true || false = （第一个值）
• false || true = （第二个值）
• false || false = （第二个值）

! 取反

var bool=false;
var bn=document.getElementById(“bn”);
bn.οnclick=function(){
bool=!bool;
取反运算
bn.innerHTML=bool ? “开” : “关”;
}

XMind - Trial Version