JavaScript基础学习(一)
本文最后更新于177 天前,其中的信息可能已经过时,如有错误请发送邮件到619701626@qq.com

简介

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript能做的

1.常见的网页效果[表单验证,轮播图。。。
2.与H5配合实现游戏[水果忍者]
3.实现应用级别的程序[http://naotu.baidu.com]
4.实现图表统计效果[https://echarts.apache.org/examples/zh/]
5.js可以实现人工智能[面部识别]
6.后端开发,app开发,桌面端开发……

书写位置

  • css一样,我们的js也可以有多种方式书写在页面上让其生效
  • js也有多种方式书写,分为行内式,内嵌式,外链式(与css相同)
  • 外部脚本不能包含<script>标签。

行内式(不推荐)

<body>
    <button onclick="alert('hello')">点我</button>
    <a href="JavaScript:alert('hello')">点我</a>
</body>

内嵌式(<body><head>中)

	<script>
        document.write("123456")
	</script>

外链式(推荐)

<script src="./xxxxxx.js"></script>

在引入外链式后,<script src="./xxxxxx.js"></script>中写的代码失效 一个页面可以引入多个JavaScript文件

用法

  • 在 HTML 页面中插入 JavaScript,使用 <script> 标签。
  • 放在在<head> 或者<body>
  • 尽量把函数放入<head>部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

输出

JavaScript 没有任何打印或者输出的函数。
而是以不同方式“显示”数据:

  • 使用window.alert()写入警告框
  • 使用document.write()写入 HTML 输出
  • 使用innerHTML写入 HTML 元素
  • 使用console.log()写入浏览器控制台

使用window.alert()写入警告框

	<script>
        window.alert("我的第一个JavaScript")
	</script>

使用document.write()写入 HTML 输出

<script>
       document.write("Hello World")
</script>

使用console.log()写入浏览器控制台

F12>Console 中显示

    <script>
        a = 1;
        b = 2;
        c = a + b;
        console.log(c);
    </script>

prompt输入框

    <script>
        let uname = prompt("请输入你的名字");
        document.write(uname)
    </script>

注释与规范

注释

快捷键:Ctrl+/
// console.log(c);

快捷键:Shift+Alt+A
/* 
a = 1;
b = 2;
c = a + b;
console.log(c); 
*/

规范

每句后面分号可有可无,写在同一行必须加分号,不然报错

a = 1;
b = 2;
c = a + b;
console.log(c);

变量(重点)

  • 变量指的是在程序中保存数据的一个容器
  • 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
  • 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
  • 语法: var/let 变量名 =值
  • let不允许多次声明,var是全局声明

定义变量及赋值

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;

// 定义三个变量的同时给其赋值
var x = 1, y = 2, z = 3

注意:
1.一个变量名只能存储一个值
2.当再次给一个变量赋值的时候,前面一次的值就没有了
3.变量名称区分大小写 (JS严格区分大小写)

变量的命名规则和命名规范

  • 规则:必须遵守的,不遵守就是错

1.一个变量名称可以由数字字母英文下划线 (_)美元符号($)
2.严格区分大小写
3.不能由数字开头
4.不能是保留字或者关键字
5.不要出现空格
  • 规范:建议遵守的 (开发者默认),不遵守不会报错

1.变量名尽量有意义 (语义化)
2.遵循驼峰命名规则,由多个单词组成的时候,从第二个单词开始首字母大写
3.不要使用中文

变量扩展-数组

数组(Array):一组数据存储在单个变量名下

//定义
let 数组名 = [数据1,数据2,···,数据n];
let name = ['小明','小红','小李'];
// arr[索引号]; 从零开始
let arr = ['张三','李四','王五'];
document.write(arr[0]);   //输出张三

let arr = ['周一','周二','周三','周四','周五','周六','周日']; //元素
console.log(arr[6]);  //下标
console.log(arr.length);  //数组长度

常量

使用const声明的变量
命名规范与变量一致
常量不允许重新赋值,声明的时候必须赋值(初始化)
不需要重复赋值的数据使用const

const a = 10;
console.log(a);

数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
(其中未定义(Undefined)就是声明了但是未赋值)不知道未来用作存什么值
空(Null)知道未来存什么类型的值

极大或极小的数字可以通过科学(指数)计数法来书写:

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

完成进制转换:

var x = 0x99     //153   16*9+9
var x = 0xff     //255   16*15+15
var y = 0b11     //3     1*2+1

算术运算符

+  //求和
-  //求差
*  //求积
/  //求商
%  //取余

运算符优先级

//先乘除后加减,有括号先算括号里面的
console.log(1 + 2 * 3)
console.log(10 - 8 / 2)
console.log(2 % 5 + 4 * 2)

判断数据类型

var x1
console.log(typeof x1)     //undefined

var x2 = null
console.log(typeof x2)     //object

var x3 = 123
console.log(typeof x3)     //number

var x4 = "你好"
console.log(typeof x4)     //string

数据类型转换

转数值

两种方法,Number()比较严格,parseInt()比较松散

Number(变量)

如果string类型中有非数值,在转换后会显示NaN,意为”Not a Number”
TureFalse则会变成1和0
Null会变成0
Undefined会变成NaN

var a = "100"
var b = Number(a)
console.log(a,b)                  //100 100
console.log(typeof a,typeof b)    //string number

parseInt(变量)

意思为”解析为整型”

var a = "100a"        //如果是小数,点后面的会舍掉
var b = parseInt(a)
console.log(a,b)      //100a 100

parseFloat(变量)

意思为”解析为浮点型”

var a = "100.12a"
var b = parseFloat(a)
console.log(a,b)      //100.12a 100.12

非加号

var a = "100"
var b = a - 0       //有三种:-0  /1  *1
console.log(b)      //100

转字符串

模板字符串:

//使用反引号``,类似python中的f""
let age = 18;
document.write(`我今年${age}岁了`);
document.write('我今年${age}岁了');

String(变量)

所有类型都能转换

var a = 100
var b = String(a)
console.log(b,typeof b)    //100 string

.toString()

NullUndefined不能转换

var a = 100
var b = a.toString()
console.log(b,typeof b)    //100 string

加号

字符串拼接: 只要+任意一边是字符串,就会进行字符串拼接
加法运算:只有两边都是数字的时候,才会进行数学运算

var a = 100
var b = a + ""
console.log(b, typeof b)      //100 string
console.log(a, b)             //100 '100'

转布尔

Boolean(变量)

在JavaScript中,只有""0NullundefinedNaN,这些是False
其余都是True

var a = 100
var b = Boolean(a)
console.log(b, typeof b)     //true 'boolean'
console.log(a, b)            //100 true
var a1 
var  b1=Boolean(a1)
console.log(b1, typeof b1)   //false 'boolean'
console.log(a1, b1)          //undefined false

隐式转换

隐式转换:系统内部自动将数据类型进行转换

//+号两边只要有一个是字符串,都i会把另外一个给转成字符串
console.log('Hello' + 1)
结果:Hello1
//除了+以外的算数运算符,比如- * / 等都会把数据转成数字类型
console.log('Hello' - 1)   //结果:NaN
console.log('1' - 1)   //结果:0,进行了隐式转换
console.log(+ '123')   //结果:123,转换为了数字型

显式转换

显式转换:自己写代码告诉系统该转成什么类型

let str = '123'
console.log(Number(str))
//123
let num = +prompt('请输入一个数字')
console.log(num)
//123

console.log(parseInt('12px'))   //12
console.log(parseInt('12.34px'))   //12
console.log(parseInt('12.94px'))   //12
console.log(parseFloat('12px'))   //12
console.log(parseFloat('12.34px'))   //12.34
console.log(parseFloat('12.94px'))   //12.94

运算符

赋值运算符

对变量进行赋值的运算符

//=  将等号右边的值赋予给左边,要求左边必须是一个容器
a = 1

//+=
let num = 1
num = num + 1
num1 += 1   //赋值运算符
console.log(num)     //结果:2

一元运算符

能够使一元运算符做自增运算
使用场景:计数,进行10次操作,计算进行了多少次

//二元运算符
let num = 10 + 20

//一元运算符 自增 ++
"""
自增相当于num = num + 1
1.前置自增
let num = 1
++num
document.write(num)
2.后置自增
let num = 1
num++
document.write(num)
"""
前置自增和后置自增如果参与运算就有区别

let i = 1
console.log(++i + 2)  //结果:4
let i = 1
console.log(i++ + 2)  //结果:3

比较运算符

比较两个数据的大小、是否相等

> //大于
<  //小于
>=   //大于等于
<=   //小于等于
==   //值相等
===   //类型和值相等
!==   //不全等
-------------------------------------------
其中有隐式转换
2 == '2'   //True
-------------------------------------------
2 === '2'   //False
Nan === Nan  //False
-------------------------------------------
字符串比较ascii码,从左往右依次比较
涉及'Nan'都是False
不要比较小数,有精度问题

逻辑运算符

符号 名称 含义 特点 口诀
&& 逻辑与 并且 符号两边都为True
结果才为True
一假则假
|| 逻辑或 或者 符号两边有一个为True
就为True
一真则真
! 逻辑非 取反 True变False
False变True
真变假,假变真

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ — !
3 算数运算符 先*/后+-
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&&后||
7 赋值运算符 =
8 逗号运算符 ,

语句

程序三大流程控制语句:顺序结构,分支结构,循环结构
顺序结构:按照上往下的顺序运行
分支结构:根据条件选择执行代码
循环结构:一段代码重复执行

表达式和语句

区别:表达式可以被求值,语句不一定有值

//表达式
num = 1 + 2
//语句
docment.write() & console.log()  & alert() & break

分支语句

有选择地执行代码

if分支语句

三种使用:单分支、双分支、多分支

//单分支
if (条件) {
    满足条件要执行的代码
}
注意:
1.括号内的条件为true时,进入大括号里执行代码
2.小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
3.如果大括号只有一个语句,大括号可以省略(不建议)
//双分支
if (条件) {
    满足条件要执行的代码
}else {
    不满足条件要执行的代码
}
//多分支,多选一        使用场景:学生评分 优、良、合、不合
if (条件1) {           先判断条件1,若满足条件1就执行代码1,其他不执行
    代码1
} else if (代码2) {    若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
    代码2
} else if (代码3) {    若依然不满足继续往下判断,依次类推
    代码3
} else {               若以上条件都不满足,执行else里的代码n
    代码n
}

案例:
        // 1.输入成绩
        let score = +prompt('请输入成绩')
        // 2.判断
        if (score >= 90) {
            alert('优秀')
        } else if (score >= 70) {
            alert('良好')
        } else if (score >= 60) {
            alert('合格')
        } else {
            alert('不合格')
        }

三元运算符

一般用来取值,场景适用于简单的if else

语法:条件 ? 满足条件执行的代码 :  不满足条件执行的代码
console.log(5 > 13 ? '真' : '假')

switch语句

1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case一般需要配合break关键字使用 没有break会造成case穿透

语法:
switch (数据){   //找到跟小括号里数据全等的case值,并执行里面对应的代码
    case 值1:
        代码1
        break
    case 值2:   //例:数据若跟值2全等,则执行代码2
        代码2
        break
    default:    //若没有全等 ===的则执行default里的代码
        代码n
        break
}

案例:
switch (1){   
    case 1:
        console.log('选择的是1')
        break
    case 2:  
        console.log('选择的是2')
        break
    default:  
        console.log('没有符合的')
        break
}
=======================================================================
        let num1 = +prompt('输入第一个数')
        let num2 = +prompt('输入第二个数')
        let operator = prompt('请输入运算符')
        switch (operator) {
            case '+':
                alert(`您选择了加法,结果是${num1 + num2}`)
                break
            case '-':
                alert(`您选择了减法,结果是${num1 - num2}`)
                break
            case '*':
                alert(`您选择了乘法,结果是${num1 * num2}`)
                break
            case '/':
                alert(`您选择了除法,结果是${num1 / num2}`)
                break
            default:
                alert('请选择运算符')
        }

循环语句

断点调试:F12 -> sources(源代码)

while循环

//while循环语法:
while (循环条件){
    要重复执行的代码(循环体)
}

while循环具备三要素:
1.变量起始值
2.终止条件(没有终止条件,循环会一直执行,造成死循环)
3.变量变化量(用自增或者自减)

let i=1         //变量起始值
while(i<=3){    //终止条件
    document.write('循环3次<br>')
    i++         //变量变化量
}

// 死循环
while(true){}

for循环

觉得有帮助可以鼓励下博主哦~感谢!
作者:rainy
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~
上一篇
下一篇