JS基础教学

保底不不不不歪真君

已于 2024-06-20 10:18:32 修改

阅读量1.8k

点赞数 20

文章标签： javascript 前端 html

于 2024-04-20 18:25:50 首次发布

本文链接：https://blog.youkuaiyun.com/Gwy001/article/details/137047323

版权

第一章 —— 认识javascript

01 —javascript的简介

javaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

02—JavaScript用途

浏览器控制: JavaScript可以通过浏览器提供的API来控制和操作浏览器的行为。它可以操作浏览器的历史记录、管理Cookie、获取用户地理位置信息等。这使得开发者可以根据需要控制和优化用户与网页的交互体验。

交互性: JavaScript使得网页能够与用户进行交互。它可以处理用户的点击、鼠标移动、键盘输入等事件，并根据这些事件来改变页面的内容、样式和行为。例如，通过JavaScript可以实现表单验证、菜单下拉、图片轮播等交互效果。

动态内容: JavaScript可以通过DOM（文档对象模型）操作来动态改变网页的内容。它可以通过添加、删除或修改HTML元素、文本内容和样式来实现动态更新页面。这使得开发者可以根据用户的行为或其他条件来动态展示内容，提升用户体验等等。

综上，学好javascript就有可能在浏览器上有恒大的作为。

第二章——JS基础

01 —JavaScript.html

JS中最重要的标签为script标签，差不多都将以script标签来写

02 —5个简单的出入输出语句.html

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

window.alert标签其中window可省

window.alert("未满18岁禁止访问");

（2）用于在网页中输入内容

document.write标签

document.write("我今年刚满18岁”）;

（3）用于在控制栏输出信息

console.log标签 (右击鼠标，点击检查，控制台)

console.log("123456")

（4）在浏览器中弹出输入框，用户可填写信息

prompt标签

prompt("请输入年龄");

(5) 在浏览器中弹出确认框

confirm标签

confirm("你真的18岁吗？");

03 —JS代码引入方式

（1）行内式

<button onclick="window.alert('别点啦')">点我呀</button>

（2）嵌入式

 <script>
        document.write('我要点你')
 </script>

（3）外联式

外联式就需要新建一个js代码文件，再通过代码连接在一起

<script src="./03-外联式.js"></script>

第三章——JS基本语法

01 —变量

（1）变量声明与赋值

先声明后赋值

//声明变量
var tom;
 var lily;
//为变量赋值
 tom ='boy';
 lily ='girl';
 //输出变量的值
 console.log(tom);

在声明的同时直接赋值

var height =188;
console.log(height);

（2）let声明变量

let用于声明变量，是ES6新语法

ES6语法树2015年推出的ECNAScript新规范

let在声明变量时，在一个代码内，不允许有变量取一样的名字，以一个花括号{}括起来，为一个代码原

变量值可以更改，以最后一次为准

console.log(boyfriend);
{let boyfriend=“徐良”;
console.log(boyfriend)}

（3）const声明变量

const和let一样，也是ES6的新语法

const一般声明的是不能改变的变量，也就是常量

cost是不允许将一个变量反复声明

也不允许在运行的过程中变量的值

const pi=3.14;
    console.log(pi);
    const r=5;
    c=2*pi*r;
    s=pi*r*r;
    console.log(s);
    console.log(c);

（4）声明变量的区别

1.初始化要求不同

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

2.重复声明不同

使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致，而使用

const声明的变量，在整个运行过程中不能修改初始值

3.对块级作用域的支持不同

（使用一对花括号括起来的代码陈伟一个代码块所谓块级作用域

就是指变量起作用的范围是当前代码块，离开当前代码块，变脸就失效了）

使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域

02—数据类型

（1）数据类型分类

简单数据类型储存再栈内存中

复杂数据类型储存再堆内存中

（2）基本数据类型

Boolean-布尔型; // true-成功或成立；false-失败或不成立

String-字符串类型；

Number-数字类型；

Boolean-布尔类型；

Null-空类型；

Undefined-未定义类型；//表明变量未被赋值

等等

（3）数据类型检测

当不确定一个变量或值是什么类型的数据时，使用typeof操作符进行数据检查

console.log(typeof "111");   //string

console.log(typeof NaN);     //number

console.log(typeof false);   //boolean

console.log(typeof "true");  //string

console.log(typeof undefined);//undefined

console.log(typeof null);     //object

(4)数据类型转化

1.将数据类型转换为布尔类型

转换时，代表空或者否定的值(空字符串、数字0、NaN、null和undefined)会转换成false

其他转换成true

let a=Boolean("");

console.log(a);               //false

console.log(Boolean("  "));   //true

console.log(Boolean("false"));//true

console.log(Boolean(0));      //false

console.log(Boolean(undefined));//false

2.将数据类型转换为数字型数据 Number()

console.log(Number(true));     //1

console.log(Number(false));    //0

console.log(Number(undefined));//NaN

console.log(Number("123"));   //123

console.log(Number("123.a")); //NaN

3.将数据转换成字符串类型

利用String()和toString()进行转换

var num1 = 12;

console.log(num1);     //12

var num2 = String(num1);

console.log(num2);     //12

03—运算符

（1）算术运算符

算术运算符共分为加法运算，减法运算，取模运算，幂运算，自增运算（前自增和后自增），自减运算（前自减和后自减）

加法运算（减法同理）

let a = 10;
let b = 20;
let c = a + b;
console.log(c);  //30

取模运算

let c =30;
let b =20;
console.log(c % b); //10

幂运算

console.log(2**10);   //1024

自增运算（前）

let m = 10;
let n = 20;
m = ++n;
console.log(m);//21
console.log(n);//21

自增运算（后）

let m =10;
let n =20;
m = n++;
console.log(m);//20
console.log(n);//21

自减运算（前）

let m =10;
let n =20;
 m = --n;
console.log(m); //19
console.log(n); //19

自减运算（后）

let m =10;
let n =20; 
m = n--;
console.log(m); //20
console.log(n); //19

(2)字符串运算

隐式转换

当两个数据不同时，JS会按照规定的规则进行转换

字符串运算

当加号遇见，字符串，加号做拼接使用

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(Infinity++);//infinity
console.log(null*999);  //0
console.log(null*undefined);//NaN

console.log(12+"0");   //120
console.log(1+"1");    //11
console.log(null+"999");//null999

（3）赋值运算符

加并运算

var a=10;
var b=20;
a+=b;           //a=a+b
console.log(a); //30
console.log(b); //20

减并运算

var a=20;
var b=10;
a-=b;           //a=a-b
console.log(a); //10
console.log(b); //10

乘并运算

var a=10;
var b=20;
a*=b;           //a=a*b
console.log(a); //200
console.log(b); //20

除并运算

var a=20;
var b=10;
a/=b;           //a=a/b
console.log(a); //2
console.log(b); //10

取模赋值

var a=10;
var b=20;
a%=b;           //a=a%b
console.log(a); //10
console.log(b); //20

（4）比较运算符

比较运算符一般有>、<、>=、<=、=

但有几个比较特殊

var s;

==相等运算符

console.log( s == "s");   //false

===全等运算符

console.log( s === "s");    //false

!=不相等

console.log( s != "s");     //true

!==不全等

console.log( s !== "s");     //true

==在比较不同数据时，会将比较的数据转换为同一类型

===则不会转换

（5）逻辑运算符

&& 一假则假

console.log(true&&true); //true
console.log(true&&false);//false

|| 一真则真

console.log(true||true);//true
console.log(true||false);//true

! 逻辑非运算符/取反运算符真作假来假亦真

console.log(!(100<0)); //true

(6)三元表达式

三元表达式的模板：条件表达式 ? 表达式1 : 表达式2

如果条件表达式的值为true,则返回表达式1的执行结果

如果条件表达式的值为false,则返回表达式2的执行结果

例

//用户输入年龄，判断用户是成年还是未成年
 var year= prompt('请输入年龄');
 year >=16 ? console.log('成年') : console.log('未成年')

（7）运算符优先级

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

let c=!b||a&&b
console.log(c);//false

let d=a&&(c||b);
console.log(d);//false

04—控制流程

（1）选择结构

if选择结构 if(条件表达式){代码段}

let age= prompt("请输入年龄")
 console.log(age);
   if(age>=18){
      document.write("恭喜你成年啦")
    }

if...else语句（双分支语句） if(条件表达式){代码段1}else{代码段2}

let year=prompt("输入年份");
         if(year%100==0&&year%100 !==0||year%4==0){
             document.write("闰年");
         }else{
                 document.write("平年");
               }

if...else if...else语句

if(条件表达式){代码段1}else if(条件表达式){代码段2}else if(条件表达式){代码段3}else if{代码段4}...else{代码段n}

 let boss=prompt("月薪")
        if(boss<4000){
             document.write("自身难保")
         }else if(boss<6000){
             document.write("请喝奶茶")
         }else if(boss<8000){
             document.write("请客吃塔塔基")
         }else{
             document.write("下馆子")
         }

switch语句 switch(条件){case:代码段}

let subject=+prompt("请选择想要的专业：1-区块链；2-ui专业；3-土木工程；4-农业专业")
     switch(subject){
          case 1:
              document.write("恭喜你选择了好专业");
             break
          case 2:
              document.write("恭喜你要和人工智能抢饭碗") ;
             break;
          case 3:
               document.write("工地两年") ;
             default:
               document.write("输入专业")                
         }

(2)循环结构

for语句 for(初始化变量;条件表达式;操作表达式){循环体}

//计算1~100的和
let sum=0;
for(let i=1;i<=100;i++){
     sum=sum+i;
   }
 console.log(i);  //5050

while语句 while (条件表达式){循环体}

//打印1~100的数
var i=0;
while(i<=100){
console.log(i);
   i++;
 }

do...while语句 do{循环体)} while {条件表达式}

//打印1~100的数
var i=0;
 do{
   console.log(i);
     i++
  }while(
      i<=100
  )

注：循环条件和循环体要合适，不要陷入死循环当中

（3）跳转语句

break跳出循环

//白雪公主吃到第三个苹果为毒苹果 
for(var i=1;i<=5;i++){
             if(i==3){
                 console.log('白雪公主吃到了毒苹果');
                 break;
             }
             console.log("白雪公主吃了"+i+"苹果");
         }

continue跳出当前循环

 //白雪公主吃到第三个为有虫子的苹果，接着继续吃
for(var i=1;i<=5;i++){
            if(i==3){
                console.log('白雪公主吃到了有虫子苹果');
                continue;
            }
            console.log("白雪公主吃了"+i+"苹果");
        }

（4）嵌套循环

嵌套循环，顾名思义，循环里面还有一个循环

//需求“⭐⭐⭐⭐  ⭐⭐⭐⭐  ⭐⭐⭐⭐  ⭐⭐⭐⭐”
     var str="";
     for(let i=1;i<=5;i++){
        for(let j=1;j<=5;j++){
        str +="⭐";
       }
        str +='\n';
     }
        console.log(str);

var str=""
for(var i=0;i<=5;i++){
for(var j=0;j<=i;j++){
str+="⭐"
}
str+="\n"
}