JavaScript 基础

一.输入输出语句

输出语句

1.用于在浏览器中弹出警告框

alert("")

2.用于在控制台输出信息

console.log("")

3.用于在网页上输出内容

document.write("")

输入语句

在网页中弹出输入框

prompt("")

confirm("")

二.JavaScript引入方式

1.JavaScript行内写法oncilck点击事件

<button onclick="window.alert('别点了再点人傻了')">请点我</button>

2.内部样式嵌入式

<script>window.alert('内部样式')</script>

3.外链式

<script src="./外链式.js"></script>

三.JavaScript基本语法

1.基本数据类型

1.布尔类型

let flag1=true;
let flag2=false;
console.log(flag1);

2.数字型

let age=18;
let date ="0306";
console.log(age);
console.log(date);
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MAX_VALUE*2);//Infinity无穷大
var a=3-"b"
console.log(a);//NaN(Not a Number)NaN也属于数字类型

//isNaN判断是否是一个非数字
//如果是数字类型则为false；
//如果是非数字类型则为true
console.log(isNaN(a));//true
console.log(isNaN(111));//false
console.log(isNaN("abc"));//true
console.log(isNaN(Infinity));//false
console.log(isNaN("false"));//true

3.String字符串

let demo1="字符串";
let demo2='字符串';
let demo3=`字符串`;
let demo4="字符串'字符串'";
console.log("111\'222");

4.未定义型

//[undefined-未定义型]
//表示声明的变量还未赋值
let grade;
console.log(grade);//undefined
//[null-空]
var a=null;
console.log(a);//null

2.数据类型检测

isNaN 检测是否是一个非数字

console.log(typeof("123"));//string
console.log(typeof(false));//boolean
console.log(typeof(NaN));//number
onsole.log(typeof(Infinity));//number
console.log(typeof("true"));//string
console.log(typeof(undefined));//undefined
console.log(typeof(null));//object
console.log(typeof('aaa'*2));//Number
console.log("aaa"*2);//NaN
console.log(2-"true");//NaN
console.log(typeof(2-"true"));//Number
console.log(2-true);//1
console.log(typeof(2-true));//Number
//布尔类型true会在运算中转换为数字1
//布尔类型false会在运算中转换为数字0
console.log(2-true);//1
console.log(typeof(2-true));//Number
//加号遇上字符串，做拼接使用
console.log(2+"true");//2true
console.log(typeof(2+"true"));//string
console.log(2+true);//3
console.log(typeof(2+true));//number

3.数据类型转换

1.将数据转换为字符串类型

使用String()或toString()进行转换

let num=boolean;
console.log(num);//数字类型的1
let num2=String(num);
console.log(num2);//字符串类型1

2.将数据转化为数字类型数据

Number()用于将数据转化为数字型数据

console.log(Number(123));//123
console.log(Number("123"));//123
console.log(Number(""));//0
console.log(Number(" "));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(false));//0
console.log(Number(true));//1
console.log(Number("true"));//NaN
console.log(Number("123.1"));//123.1
console.log(Number("123.a"));//NaN

四.变量的声明与赋值

1.先声明后赋值

var boy;
var girl;
console.log(boy); //undefined(未定义的)
console.log(girl);

2.为变量赋值

boy ="Jack";
girl="Lily";
console.log(boy);
console.log(girl);

3.声明的同时赋值

var myAge=18;
var myHeight=180;
console.log(myAge);
console.log(myHeight);

4.let声明变量

// let是ES6新引入的关键字，用来替代var关键字
// (ES6指2015年推出的ECMAScript语法。)
// 使用var声明的变量，可以多次赋值，但是结果只与最后一次赋值有关
var girlfriend="蔡徐坤";
var girlfriend="牢大";
var girlfriend="马加骑";
console.log(friend);
// let不允许在一个代码块里有变量和他取一样的名字，但是允许修改同一个变量值
// 一个花括号{}就是一个代码块
let girlfriend="宋亚轩";
girlfriend="刘耀文";
console.log(girlfriend);
{let friend="xxx"}

5.const声明变量

// let和var声明的变量可以改变
// const声明的变量不能改变，即常量
const a=3.14
// a=3.15  错误写法❌
console.log(a);
// const b;
// const必须要在声明的时候赋值

变量声明区别

 <!-- 

        (1)初始化要求不同，

        使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化，

        (2)重复声明不同使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，
        而使用const声明的变量,在整个运行过程中不能修改初值，

        (3)对块级作用域的支持不同。
        (使用一对花括号括起来的代码称为一个代码块所谓块级作用域,
        就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。
        使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。)
-->

五.运算符

1.算术运算符

let a = 10;
let b = 20;

//加法运算
console.log(a+b);//30

//减法运算
let c = b - a;
console.log(c);//10
        
//乘法运算
console.log(c*b);//200

//除法运算
b = b / 2;
console.log(b);//2

//取模运算 取余数
console.log(26%5);//1

//幂运算
console.log(2**10);//1024

//自增运算
m=5;
n=++m;
console.log(m);//5
console.log(n);//6

m=5;
n=m++;
console.log(m);//6
console.log(n);//5

//自减运算
m=5;
n=--m;
console.log(m);//5
console.log(n);//4

m=5;
n=m--;
console.log(m);//4
console.log(n);//5

2.字符串运算符

console.log(1+1);//2
console.log(1+null);//1
console.log(1+true);//2
console.log(1+false);//1
console.log("12"-0);//12
console.log(undefined*null);//NaN
console.log(Infinity++);//Infinity
console.log(1+"1");//11
console.log(1+"null");//1null
console.log(null+"undefined");//nullundefined
var name = "张三";
var age = 18;
console.log(name+"的年龄是:"+age);
//隐式转换：当两个数据类型不同时，JS会按照既定的规则进行转换

3.比较运算符

// !不等于
// !==不全等
// ==等于
// ===全等于

4.逻辑运算符

//&&逻辑与运算符 一假则假
//||逻辑或运算符 一真则真
console.log(true && true);//true
console.log(false&& true);//false
console.log(true &&false);//false
console.log(false&&false);//false
console.log(3>2 &&2>1);//true
console.log(3<2 &&2>1);//false
console.log(3<2 &&2<1);//false

5.三元运算符

// 条件表达是？表达式1：表达式2
//如果条件表达式的值为true 则返回表达式1的执行结果
//如果条件表达式的值为false则返回表达式2的执行结果
var age =prompt("请输入你的年龄")
console.log(age);
var res = age>=18?"你已经是一名优秀的成年人啦":"你还是个弟弟"
document.write(res)
var number1=prompt("请输入第一个数字")
var number2=prompt("请输入第二个数字")
var res =number1>number2?number1:number2
document.write(res)        
var number3=prompt("请输入一个数字")
var res=number3>10?number3:"0"+number3
document.write(res)

运算符优先级

小括号>一元运算符>比较运算符>逻辑运算符（逻辑与>逻辑或）>赋值运算符

六.流程控制

选择结构

//1.if语句
//if(条件表达式){代码段}
// let age = prompt(请输入你的年龄)
if(age>=18){
     document.write("你可以进入本网站")
}
//2.if...else语句（双分支）
//if（条件表达式）{代码段}else{代码段}
let age = prompt(请输入你的年龄)
if(age>=18){
      document.write("你可以进入本网站")
}else{
      document.write("非法访问")
}
//3.if...else  if...else语句（多分支）
if(条件表达式1){
   条件表达式1的结果
}else if(条件表达式2){
   条件表达式2的结果
}else if(条件表达式3){
   条件表达式3的结果
}else{除去123之后的结果}