Javascript基础

JavaScript的组成:

  Javascript基础分为三个部分:

    1,ECMAScript:JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句等。

    2,DOM:操作网页上的元素的API。比如让盒子移动,变色,轮播图等。

    3,BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。

JavaScript的特点:

  1,简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。

  2,解释执行(解释语言):事先不编译,逐行执行,无需进行严格的变量声明。

  3,基于对象:内置大量现成对象,编写少量程序可以完成目标。

第一个JavaScript代码:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        alert("顾清秋")
    </script>
</head>
<body>
    
</body>
</html>
View Code

alert:弹出警告框。

语法规则:

  1,JavaScript对换行,空格,缩进不敏感。末尾一定要加分号。

  2,所有的符号,都是英语的。

  3,JavaScript的注释:单行注释://   。  多行注释:/**/  。

JavaScript在网页中输出信息的写法:

  弹出警告框:alert('')

  控制台输出:console.log(")

console.log(")表示在控制台中输出,console表示“控制台”,log表示"输出"。

控制台在chrome浏览器的F12中。 

用户输入:prompt()语句

  prompt() 就是专门用来弹出能够让用户输入的对话框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        alert("顾清秋")
        var a = prompt('请输入你的姓名:')
        alert(a)
        console.log(a)
    </script>
</head>
<body>

</body>
</html>
prompt

  prompt语句,输入的内容都会转成字符串的方式打印出来。

直接量:数字和字符串

  ”直接量“即常量,也称为“字面量”。

  1,数字。2,字符串。

变量的定义和赋值:

  定义变量:var 变量名。

  变量的赋值:如: var a = 10;

变量的命名规范:

  只能由字母,数字,下划线,美元符号$构成,且不能以数字开头。

下列的是保留字,不允许被当作变量名:

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

变量的类型:

  变量里面能够存储数字,字符串等,变量会自动的根据存储的内容的类型的不同来决定自己的类型。

数值型:number

  存放数字的类型就是数值型。

  typeof():可以查看变量的类型。

  在JavaScript中,只要是数就是数值型。

字符串型:string  

var a = "abcde";
    var b = "路飞";
    var c = "123123";
    var d = "哈哈哈哈哈";
    var e = "";     //空字符串

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);
View Code

连字符和加号的区别

键盘上的+可能是连字符,也可能是数字的加号。如下:

   console.log("我" + "爱" + "你");   //连字符,把三个独立的汉字,连接在一起了
    console.log("我+爱+你");           //原样输出
    console.log(1+2+3);             //输出6

总结:如果加号两边都是数值,此时是加。否则,就是连字符(用来连接字符串)。

变量值的传递(赋值):

语句:

   a = b;

把b的值赋给a,b不变。

将等号右边的值,赋给左边的变量;等号右边的变量,值不变。

举个特殊的例子:

        var a = "3";
        var b = 2;
        console.log(a-b);

效果:(注意,字符串 - 数值 = 数值)

变量格式转换

用户的输入

我们在上面的内容里讲过,prompt()就是专门用来弹出能够让用户输入的对话框。重要的是:用户不管输入什么,都是字符串。

parseInt():字符串转数字

parseInt()可以将字符串转数字。parse表示“转换”,Int表示“整数”(注意Int的拼写)。例如:

字符串转数字的方法:

 parseInt(“5”);

parseInt()还具有以下特性

(1)带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失。例如:

console.log(parseInt("2018你真帅!!");

(2)自动带有截断小数的功能:取整,不四舍五入

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
 var a = parseInt(5.8 + 4.7);
 console.log(a);

数据类型:

基本数据类型:

  number:

var a = 123;
//typeof 检查当前变量是什么数据类型
console.log(typeof a)
//特殊情况
var a1 = 5/0;
console.log(typeof e1) //Infinity 无限大. number类型

  string:

var str  = '123'
console.log(typeof str)

  boolean:

var b1 = false;
console.log(typeof b1)

  null:

var c1 = null;//空对象. object
console.log(c1)

  undefined:

var d1;
//表示变量未定义
console.log(typeof d1)

引用数据类型:

  • Function
  • Object
  • Arrray
  • String
  • Date

赋值运算符:

  以var x = 12, y = 5 示例:

算术运算符:

  var a = 5 , b = 2

 比较运算符:

字符串的拼接:

var  firstName  = '小';
var lastName = '马哥';
var name = '伊拉克';
var am = '美军';
// 字符串拼接
var str = "2003年3月20日,"+name+"战争爆发,以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后,"+am+"又一次取得的大规模压倒性军事胜利。"
var fullStr = str;
console.log(fullStr)

var fullName = firstName +" "+ lastName;
console.log(fullName)
View Code
// 不能对字符串进行+运算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1-a2) //12
var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number类型
console.log(typeof(b1*b2))

数值型转换成字符串类型:

隐式转换:

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换:会将数值型转换成字符串型,然后进行拼接。
console.log(typeof n3);

强制类型转换:

// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

将字符串类型转换成数值类型:

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2); //NaN   Not a Number  不是一个数值,但是NaN是数值类型。  
//类似于遍历 将数值型遍历出来直到遇到非数字。

// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum));  // 789
console.log(parseFloat(stringNum)); // 789.123

任何数据类型都可以转换为boolean类型:

var b1 = '123';
        var b2 = 0;
        var b3 = -123;

        var b4 = Infinity; 
        var b5 = NaN;

        var b6; //undefined
        var b7 = null;

        // 非0既真
        console.log(Boolean(b1)); // true
        console.log(Boolean(b2));  // false   
        console.log(Boolean(b3));  // true
        console.log(Boolean(b4));  // true
        console.log(Boolean(b5));  // false
        console.log(Boolean(b6));  // false
        console.log(Boolean(b7));  // false
View Code

流程控制:

  if            if else            if  else if  else

        var a = 18;
        if (a>=20){
            console.log('恭喜恭喜');
        }
        else if(a<20 && a>=15){
            console.log('不错');
        }
        else if(a<15 && a>=10){
            console.log('很好');
        }
        else{
            console.log('抱歉');
        }

逻辑与&& 逻辑或 ||:

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}

switch:

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break,那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}

while 循环:

var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

do_while:

//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

for 循环:

for(var i = 1;i<=10;i++){
     console.log(i)
 }

  1~100之间所有数的和:

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum)

  双重for循环:

for(var i=1;i<=3;i++){
            
   for(var j=0;j<6;j++){
        document.write('*')
    }
            
   document.write('<br>')
 }

在浏览器中输出直角三角形:

for(var i=1;i<=6;i++){
   for(var j=1;j<=i;j++){
        document.write("*");
   }
                
     document.write('<br>');
}

在浏览器中输出等腰三角形:

          for(var i=1;i<=6;i++){ //行数
                
                //控制我们的空格数
                for(var s=i;s<6;s++){
                    document.write('&nbsp;')
                }
            

                for(var j=1;j<=2*i-1;j++){
                    document.write('*')
                }
                document.write('<br>')
                
            }
原文地址:https://www.cnblogs.com/stfei/p/9101924.html