JavaScript基础

帆船
95 阅读8分钟

JavaScript基础

概述

  • JavaScript（简称JS）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
  • JS在浏览器可以直接被解析，不需要单独安装环境，不在浏览器执行时需要node.js进行运行
JavaScript组成

一个完整的JavaScript是由以下构成

ECMAscript：JavaScript的核心内容
DOM ：负责和浏览器 标签 进行交互
BOM ：负责和 浏览器 交互

JavaScript基础

内嵌JS

方法一：通过时间触发JS
<p onclick="alert(5)">点我</p>   onclick 点击事件 
<p onclick="alert('abc')">点我啊~</p>
<p onclick="alert(/abc/)">点我啊~</p>
闭合 " "  ' '  ` ` / /
双引号 单引 反引 闭合 
双引 和 单引 可能会被过滤

方法二：伪协议 javascript：js 执行代码 a标签 href属性
<a href="javascript:alert(8)">点我</a>
<a href="javascript:alert('8')">点我</a>
<a href="javascript:alert(/8/)">点我</a>
<a href="javascriptL:alert(`8`)">点我</a>

内联JS

内部JS需要写在<script>标签内，<script>可以写在标签内的任何部分

尽量写在下面标签的前面， 防止操作html标签的时候，JS先加载了当时标签还没有加载，报错

<script>
   alert("asd")
</script>

外联JS

<script src="js文件路径"></script>
网络路径
本地相对路径
注意 script标签 不受同源策略影响 支持跨域 别人的网站是可以使用你服务器提供的js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元气满满</title>
		<script src="test.js"></script>
	</head>
	<body>
	</body>
</html>

alert(123)

image-20240904095326349

可以让服务器引用我们写的js做危险操作

JS注释

// 注释内容         单行注释
/* 注释内容 */      多行注释
/* 
* 注释内容          文档注释
*/

输出

document.write 输出

像页面输入指定字符串，也可以是带html标签的字符串

document.write("<h1>666888</h1>") 页面输出

注意
1. 如果要输出的内容是字符串，会将引号中的内容原样输出
2. 如果输出的内容是完整的html标签，浏览器会将该标签解析
标签会被解析

<script>document.write("<script src='http://127.0.0.1:8848/one/test.js'><\/script>")</script> /转义
通过 document.write 执行script标签 进而  执行script代码 进行危险操作
console.log()控制台输出
console.log(123)
不仅可以输出字符串 还可以输出 js api
alert()

弹窗警告，会阻塞后面的代码

alert("");

JS输入

prompt
prompt("提示信息"，"默认值")
let res =  prompt("请输入您的手机号码","13开头")  返回用户输入的数据
console.log(res);

image-20240904101750275

confirm
let res = confirm("确认删除"); 返回 true flase
console.log(res);

JavaScript变量

概念

变量就是在内存中开辟空间，用来存储随时变化的量

在程序中，用于保存数据的一个容器，每个容器中的数据可以在程序中重复使用

定义变量
//定义变量
var 变量名 = 变量值
let 变量名 = 变量值

//定义常量 固定值 一次设置 不在修改
const 大写字母 = 常量值
变量命令
变量名命名规范
1. 变量名是由数字,字母, _ 和 $ 构成
2. 不能以数字开头,不能包含其他的特殊符号
3. 不能使用JavaScript的关键字,比如：var,console等
4. 尽量见词达义,比如：imgSrc,number
驼峰命名法
大驼峰
1. 所有的单词的首字母都大写，其他字母小写
2. 常用于类名命名，比如：FirstName,FirstPage
小驼峰
1. 第一个单词全小写，其他单词首字母大写
2. 常用于变量、函数的命名，比如：firstName，firstPage
蛇形命名
1. 所有单词全小写
2. 单词与单词之间使用 _  比如：first_name，first_page
注意
1. 变量必须先定义，再使用，否则会报错
2. 如果变量只定义，没有保存数据（未赋值），输出得到undefined;

数据类型

image-20240904111312703

基础类型
number：表示数字，比如10，200，3，3.4等

string:表示字符串，比如：”中国”，”张三”，”hello world”，’1234’等

字符串类型除了简单的单引号货色双引号外还有反引号``
反引号引起的字符串称之为模版字符串，可以进行变量直接输出
字符串拼接 +

注意点 ``  + 拼接

let name = "张三";
let info = `你好-${name}`;
console.log(info);

boolean：表示布尔类型，表示程序中正确或错误，只有两个值

true：表示正确（真）
false：表示错误（假）
undefined：特殊值，表示未定义，同时也是每个变量的默认值

未声明变量：变量未声明直接使用，那么程序会报错
未定义变量：变量声明了但是没有保存数据（未赋值），它的默认值是undefined
null：特殊值，表示空 注意 0、undefined、null在布尔值中表示false

typeof null得到的是object，浏览器在检测时会将二进制中前三位为0的解析为object类型，而null的二进制全为0。


注意点 undefined null 0 ""在布尔值中表示 false

let n = undefined;
if (n) {
  console.log(true)
} else {
  console.log(false)
}

image-20240904112825466

symbol：表示唯一值 bigint：表示超大数，一般用于科学计数

引用类型

object：表示引用数据类型，表示对象，对象是一种复合数据类型，比如对象、数组等等

let arr = [123,3453,567,89799,true,"dlrb",123.123]
arr[20] = 20
arr["bf"] = "hello" // 关联数组
console.log(arr,arr["bf"]);
let obj = {
   id : 110110,
   name : "保靖"
}
console.log(obj,obj["id"],obj.name);

image-20240904113519109

image-20240904113033101

查看类型
typeof 数据/变量;
console.log(typeof obj);

image-20240904113646638

JavaScript语句

分支语句 / 条件语句
if
方式一
if(条件){
  条件为true时需要执行的代码
}
方式二
if(条件){
  条件为true时需要执行的代码
}else{
  条件为false时需要执行的代码
}
方式三
if(条件1){
  条件1为true时需要执行的代码
}else if(条件2){
  条件1为false，条件2为true时执行的代码
}else if(条件3){
  条件1，条件2为false，条件3为true时执行的代码
}else if(条件n){
  以上所有条件都不满足时，条件n为true执行的代码
}else{
  以上所有条件都不满足执行的代码
}

let age = 19
if (age > 18) {
     console.log("欢迎大爷来玩~");
} else {
    console.log("来走后门 进入~");
}
let soure = 600
if (soure >=0 && soure < 60){ // [0,60)
    console.log("不及格");
}else if (soure >=60 && soure < 75) {
    console.log("及格");
}else if (soure >=75 && soure < 85) {
    console.log("良好");
}else if (soure >=85 && soure <= 100) {
    console.log("优秀");
}else {
    console.log("成绩异常请联系教务处");
}
switch
switch(要判断的数据){
  case 值1: 当数据为值1时执行的代码; break;
  case 值2: 当数据为值2时执行的代码; break;
  case 值3: 当数据为值3时执行的代码; break;
  case 值n: 当数据为值n时执行的代码; break;
  default: 
    以上所有的值都不满足时执行的代码;break;
}

let phone = "红米"
switch(phone){
    case "华为": console.log("华为手机");break;
    case "小米": 
    case "红米": console.log("小米手机");break;
    case "OPPO": 
    case "真我": console.log("OPPO手机");break;
    case "VIVO": 
    case "IQOO": console.log("VIVO手机");break;
    default:
        console.log("其他手机");break;
    }

循环语句

while
while(继续循环的条件){
  条件为true时执行的代码--循环体
}

let i = 0
while (i<10){
    console.log(i);
    i++
}
do…while
do {
  循环体---先执行一次循环体的代码，再判断是否进行下一次循环
}while(继续循环条件)

let i = 0
do{
    console.log(i);
    i++
}while (i<10)
for
for(循环变量初始化语句;继续循环条件语句;控制条件语句){
  每次循环执行的代码（循环体）
}
循环变量初始化语句：在循环开始之前，循环变量初始化语句对变量进行赋值，这个表达式只在循环开始前执行一次
继续循环条件语句：当条件为true时，执行循环体的代码，当条件为false时，停止循环
控制条件语句：每次执行完循环体后，都会对变量进行操作（变量自增或自减），再继续循环条件的判断
for (let i = 0; i < 10; i++) {   [0,10)
    console.log(i);
}

image-20240904114733989

for循环的特殊形式
let arr = [1,2,4,5,6,71,7,8,78,9,8,78]
for (let i = 0; i < arr.length; i++) {             //.length
    console.log(arr[i]);
}
for(let index in arr){ // index是数组的索引          // in  遍历数组的索引
    console.log(arr[index]);                       // arr[index] 通过索引取元素
}
for (let item of arr){ // item就是数组的元素         // of   遍历数组的元素
    console.log(item);                            // 直接输出 item
}
实战 -遍历数组对象
let news_list = [
    {
        id:101001,
        title : "花季少女竟然这样...",
        author:"花季少女",
        buildtime :"2024/05/15"
    },
    {
        id:101002,
        title : "新入职的员工竟然这样说,老板表示...",
        author:"花季少女",
        buildtime :"2024/05/15"
    },
    {
        id:101003,
        title : "可乐真的好喝...",
        author:"可乐少年",
        buildtime :"2024/05/15"
    }
]
for (let item of news_list){
    console.log(item.id,item.title,item.author,item.buildtime); //通过 .属性 进行获取属性值
}

JavaScript函数

函数基础

函数是一大段代码的容器，一个函数里面包含了一大段代码，代码可以在页面中任何地方进行调用。

可以多次使用函数，调用其中的代码

1. 定义函数
   1.1 函数声明式
        function 函数名(){
          被执行的一段代码——函数体       
        }
   1.2 函数表达式
        let 函数名 = function(){
          被执行的一段代码——函数体       
        }
2. 调用函数
   函数名();
注意
    每调用一次函数，函数里面的代码（函数体）就会执行一次
    函数声明式在定义之前可以调用函数，函数表达式在定义函数之前不能调用，只能在定义函数之后使用函数
形式参数和实际参数之间的关系

在函数调用时，我们会把需要处理的数据通过实际参数传递给函数中，在函数中通过形式参数接收实际参数传递过去的数据，那么在函数中可以使用形式参数来处理数据

参数的使用

多个形式参数和实际参数是从左到右一一对应

function sum(num1, num2，num3) {
  console.log(num1);
  console.log(num2);
  console.log(num3);
}
sum(2, 3,5);// 2,3

返回值

通过函数传递不同的实际参数，我们可以在函数内部得到不同的结果，但是这个结果需要在函数体外部使用，就必须将这个结果返回到函数调用的地方

返回值是函数允许在调用后，通过return语句将函数内的某个数据输出到函数外部。

function juicing(fruit) {
  let juice = `${fruit}果汁`;
  return juice;
}
let result = juicing("苹果");
console.log(result);//"苹果果汁"
注意
    如果函数有return语句，会将return后的数据返回到函数调用的地方，如果执行过程中没有执行return，函数调用时接收到的结果是undefined;
    当函数执行return时，会立即终止函数的执行并返回数据。
    return一般书写在函数的最后一行，但是如果有分支结构等可能不是在最后一行，需要保证任何情况下，函数最终只能执行一个return

箭头函数

是JS新增用于快速定义函数的语法，用于辅助函数的定义，比普通的语法更加简洁

let 函数名 = (形参列表) => {
  // 函数体
}
函数名(实参列表);
avatar
文章
阅读
粉丝