javascript入门基础知识

最新推荐文章于 2024-06-24 14:30:19 发布

icon猿

最新推荐文章于 2024-06-24 14:30:19 发布

阅读量447

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/busuib/article/details/121910676

版权

一：JavaScript入门知识

1.概念：

javascript是一门运行在’客户端‘，面向对象的，事件驱动的，单线程的编程语言。

2.javascript的作用：

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效（webAPI）
服务端开发(Node.js)
桌面程序(Electron)
App(flutter)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

网站开发：vue.js 微信小程序 react.js

3.js的组成

分为三部分：ECMAScript 与 DOM,BOM

1.ECMAScript(欧州机算机标准协会): 制定js的语法规范

2.DOM与BOM: 可以做浏览器上网页特效（webAPI）

4.js代码的书写位置

1.行内式：

<div οnclick="alert(123)">点我</div> //当点击时触发点击事件

2.内嵌式：

<script>
这里写js代码
</script>

3.外联式：

<script src='xxx.js'>不要在这里写js代码</script>

5.js中的注释

1.行内注释：Ctrl+/

2.多行注释：Ctrl + shift + c

二：JS基础知识

编程的三大要素：数据流程控制函数

1.数据

1.1:变量

作用：是一个存放数据的空间，这个空间只能存放一个数据

变量的使用：

// 变量分为两个部分:   变量名   变量值
// 1.声明变量名 var === variable
   var age;
// 2.赋值
   age = 18;

// 重点:一般连起来写
   var age = 18

变量的语法注意点：

//1.变量是可以更新的
var myname = "jack"
myname = "rose"
console.log(myname)   //rose

//2.一次可以声明多个变量
var myname='tom',age=4,gender="公";
console.log(myname,age,gender) 

//3.变量只声明不赋值 结果为undefined
var gender
console.log(gender)   //undefined

//4.变量不声明直接打印会报错,除了name和一些特殊的名字
console.log(tel)   //报错 age is not defined

变量的定义规范:

 规则                                                         
 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name 
 严格区分大小写。var app; 和 var App; 是两个变量              
 不能 以数字开头。  18age   是错误的                         
 不能 是关键字、保留字。例如：var、for、while                 
 变量名必须有意义。 MMD   BBD        nl   →     age

1.2：数据类型

在javascript中数据分为两大类，8小类

1.基本数据类型（值类型）：数值型Number 字符串型String 布尔型Boolean 未定义型undefined 空型Null

2.复杂数据类型（引用类型）：对象型Object 数组Array(但是数组也是对象) 函数型 function(){}（但是函数也是对象)

变量的数据类型是由变量的值决定的，它是可变的

2.流程控制

1：分支分类

1.1单分支

//语法
if(条件表达式  => boolean){
    ...业务逻辑代码
}

// 当单分支的业务逻辑代码只有一行时，{}可以省略

//案例
var year = 3
if(year >= 1){
    console.log("有年终奖")
}
console.log("加油,好好干")

1.2双分支

//语法
if(条件表达式  => boolean){
    如果为真：...执行业务逻辑代码1
}else {
    如果为假：...执行业务逻辑代码2
}

//案例：判断是否是闰年
//算法: 年份能被4整除但不能被100整除 或  年份能被400整除
var year  = prompt('请输入年份')
if(year%4==0 && year %100 !=0 || year % 400 ==0){
    console.log("闰年")
}else {
    console.log('平年')
}

1.3多分支

//语法
if(条件表达式  => boolean){
    如果为真：...执行业务逻辑代码1
}else if(条件表达式) {
    如果为假：...执行业务逻辑代码2
}else if(条件表达式){
    ...
}...else {
    ...
}

1.4switch case

语法：

	switch(条件表达式){

       case value1:

           表达式1;

           break

        case value2:

           表达式2;

           break

		...

        default:

          表达式

          break

   }

注意事项：1.case后面的break不能丢,除了default外   2.条件表达式的值与case后的value必须  全等

2：循环

2.1 for 一般跟计数相关

语法：

语法：

for(初始化变量;条件表达式;操作表达式){

...循环业务代码

}

//案例
for (var i = 1; i <= 3; i++) {
    console.log(i);  //1 2 3
}

console.log(i);// 4   全局变量

2.2双重for循环

语法：

语法：

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {

for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {

// 执行语句;

}

}

//案例：
//打印五行五列的小星星
var str = ""
for(var i=1; i<=5; i++){   //行
    for(var j = 1; j<=5; j++){  //列
        str  = str + "☆"    
    }
    str +=  '\n'
}

console.log(str);

//打印10行的倒三角形
// 算法1:
var str = ""
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= 10 - i + 1; j++) {
        str += "☆"
    }
    str += "\n"
}
console.log(str);

2.3 while循环

语法：

语法：

while(条件表达式){

循环体

}

注意点：在循环体中要有修改条件表达式的操作，否则就可以成为死循环

//案例 求1~100所有整数的和
var sum = 0
var j=1;
while(j <= 100){
    sum += j
    j++
}
console.log(sum)

2.4 do.....while循环

语法：

do {

循环体

} while(条件表达式)

注意点：在循环体中要有修改条件表达式的操作，否则就可以成为死循环了。do至少会执行一次

//案例 
do {
    var message = prompt('你爱我吗')
} while( message !== '我爱你')
alert('我也爱你')

3.函数

概念：将相同的业务逻辑封装起来，重复使用

语法：

分为两部分: 函数的声明函数的调用

函数声明：

function 函数名 ([形参列表]) {

函数体

[return 返回值]

}

函数调用

函数名 ([实参列表])

function getSum(a,b){   //a,b是形参
    console.log(a+b)
}
getSum(1,2)   // 1,2是实参


//形参与实参的个数不匹配的情况
function getSum(a,b){
    console.log(a+b)
}

getSum(1,2)    //形参与实参个数一至
getSum(1,2,3)  //把3传给函数，但是在函数中没有形参来接收，就不接收
getSum(4)      //相当于b接收是undefined

注意事项：

1.return 可以终止函数的执行，return后面可以不跟数据

2.如果函数没有return 默认返回就是undefine