如何引入JS

1.内部的js

直接写在html文档中

    <script type="text/javascript" >
        //要写的JS代码
    </script>

2.外接的js

     <script type="text/javascript" src='文件路径'></script>

代码的执行顺序是从上到下的所以下面的js的内容会覆盖与上面js相冲突的地方。

JS的变量

声明关键字 `var`


    var name = '核桃' //变量初始化
    var age; //创建空容器 声明变量
    age = 21; //可以这样再赋值 变量赋值
    //变量名要求
    // 1.必须使用字母、下划线（_） $开始
    // 2.多个英文字母 驼峰！！ myName
    // 3.不能使用js中关键字和保留字来进行命名
    // 4.严格区分大小写

变量的类型

基本的数据类型 Number String Boolean undefined null
引用的数据类型 Object Array Function

    var a = 3;
    var b = 3.14;
    var c = -5;
    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    //都是 number 不区分int 等
    
    
    //----------------------------------------------
    //字符串 一般用单引号或双引号 括起来
    
    var name = '核桃';
    var sex = "男";
    console.log(typeof name) //string
    console.log(typeof sex)
    
   //----------------------------------------
   //boolean 类型 0(假false)  1（真ture）
   
   var x = 5 < 9;
   console.log(x); //true
   console.log(typeof x); //boolean
   
   //------------------------------------------
   var x ; //只声明 为赋值 undefined
   //-------------------------------------------
   var x = null;
   console.log(x);//null
   console.log(typeof x);//object

字符串

    var world = "hello";
    console.log(world);  //hello
    console.log(typeof world); //string
    var name = " my name is hetao"
    console.log(name); //输出上面
    //----------------
    //字符拼接
    var one = 'hello';
    var two = 'world';
    var three = one + '' + two; //中间的''拼接时就是一个空格

获取字符串的长度 字符串名.length
获取指定的字符 字符串名.charAt(索引值)
获取指定的字符对应的编码 字符串名.charCodeAt(索引值)
拼接字符串 字符串名.concat('内容1','内容2')
字符串的切片

    // slice  substring  substr
    var str = 'hetao';
    console.log(str.slice(1)); //etao 都是从1开始剪切
    console.log(str.substring(1)); //etao
    console.log(str.substr(1)); //etao
    //------------------------
    console.log(str.slice(1,3)); // et从索引值1到索引值3
    console.log(str.substring(1,3));// et 从索引值1到索引值3
    console.log(str.substr(1,3));// eta 从索引值1取3个，这个3使要剪切的个数

数值和字符串的转换

    var name = 'hetao' + 21; //hetao21
    console.log(name);
    //当我们输出后发现数值和字符串完美的拼接上了
    //---------------------------
    var a = '52' + '0';//输出结果为520 而不是52 这是两个字符串的拼接
    //--------------------
    // 隐式转换
    var a = 5;
    var b = a + ''; //数值转字符串
    // ----------
    var c = Number(b);//字符串转数值
    // -------------
    var d = c.toString(); //数值转为字符转
    //---------------------------------
     // parseInt();
    var str = '3.1415926';
    console.log(parseInt(str));//z转换为int型 那就是 3
    //parseFloat()
    console.log(parseFloat(str));//转换为浮点类型
    //toFixed()
    var pai = Number(str);
    console.log(pai.toFixed(2));//值为要保留的小数位数

数组 Array

    var arr = ['香蕉'，'苹果','梨子','桃子'];
    var arr2 = ['西瓜','521',arr]; //二维数组 嵌套
    
    //----------------------------------
    
    //访问 很简单通过数组的索引来进行访问
    //比如我们要访问arr2里的arr
    var ht = arr2[2];
    console.log(ht);
    //------------------------------
    //数组的长度
    console.log('ht数组的长度是:' + ht.length );

对象 object

    var person = {
        name:'hetao',
        age:21,
        sex:'男',
        fav:function(){
            console.log("play basketball")
            }
    }
    console.log(person.name); //hetao
    console.log(person.age); //21
    console.log(person.fav()); //play basketball

运算符

算数运算符

var x = 17;
var y = 5;
var sum = x + y;//加
var en = x - y;//减
var or = x * y;//乘
var chu = x / y;//除
var op = x % y;//取余
//优先级和我们学的数学一样先乘除后加减

赋值运算符

    var x = 0;
    x++ //就是+1   x = x + 1
    x-- //就是-1   x = x - 1
    //---------------------------
    var a = 5;
    var b = 6;
    a=b; //把b的值给a 后给前
    //------------------------------
    var c = 10
    c = c + 5;
    c += 5; //这俩意思一样
    c = c - 5;
    c -= 5; //一样
    c *= 2;
    c /= 3;

比较运算符

    ===(等同于) 和 !==(不等同于)
    var a = 5;
    var b = '5'
    consolelog(a === b);//false 严格比较，还比较数据类型
    consolelog(a !== b);//true
    consolelog(a == b); //true 只比较数值
    // 还有常见的  >   <   >=   <=

逻辑运算符

&&（逻辑与并且两边都满足）
||（逻辑或或者两边有一边满足即可）
！(取反)

三元运算符

语法格式：条件?真的:假的


    var sanyuan = 1>2?'真的':'假的';
    console.log(sanyuan);

条件判断

if()判断

    if(判断的条件){
        //符合条件要执行的程序
    }else{
        //不符合条件要执行的程序
    }
    //例
    var age = 10;
    if(age <= 18){
        console.log("我是小孩")
    }else{
        console.log("我是大人了")
    }

switch分支

   
var day = 7;
switch (day){
  case 1:
    console.log("星期一")
    break;
  case 2:
    console.log("星期二")
    break;
  case 3:
    console.log("星期三")
    break;
  case 4:
    console.log("星期四")
    break;
  case 5:
    console.log("星期五")
    break;
  case 6:
    console.log("星期六")
    break;
  case 7:
    console.log("星期日")
    break;
  default :
    console.log("星期八");
}

循环

for循环

    for(初始化条件;结束条件;递增条件){
    
    }
    
    var sum = 0;
    for(var i=1;i <= 10000;i++){
        sum += i;
        
    };
    console.log(sum);

while循环

先判断后执行

    while(判断循环结束条件){
            //循环运行程序
    }
    var sum = 0;
    var n = 99;
    while(n > 0){
        sum += n;
        n = n -2
    }
    console.log(sum);

do while

先执行一次在判断

    var sum = 0;
    var i = 1;
    do{
        sum = sum + i;
        i++;
    }while(i <= 100);

break和continue

break 终止当前循环
continue 跳出当前次循环


for (var i = 1;i <= 10 ;i++){
  if(i==5){
      break;  // 1 2 3 4
      

  }
  console.log(i)}
  
  for (var i = 1;i <= 10 ;i++){
  if(i==5){
   
    continue; //1 2 3 4 6 7 8 9 10
    
  }
  console.log(i)}

函数的定义

function 函数名（）{
函数内容
}

直接用函数名使用函数 函数名()

函数的传参

function age(a){
    console.log(a);
}
age(18);//调用函数并传递参数

JS初识