JavaScript学习笔记|青训营

prefli
96 阅读7分钟

JavaScript基础

和CSS一样，JS代码也可以通过行内式、内嵌式、外部式的方式嵌入到HTML代码中~

HTML 中的 Javascript 脚本代码必须位于 <script>与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<body>中的JavaScript

<!DOCTYPE html>
<html>
<body>

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>

</body>
</html>

<head>中的JavaScript函数

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

运行结果：

屏幕截图 2023-08-01 193511.png

<body>y中的JavaScript函数

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

结果展示：

屏幕截图 2023-08-01 193652.png

外部的JavaScript

把脚本保存到外部文件中，外部文件通常包含多个网页使用的代码。

外部JavaScript文件的文件扩展名是.js

使用外部文件，要在<script>标签的“src”属性中设置该.js文件

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

也可以将脚本放置在或中，放在置在<head>或<script>中，放在<script>标签中的脚本与外部引用的脚本运行效果完全一致。

外部脚本不能包含

注意细节：

  1. 在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()
  2. 外部JavaScript文件不使用<script>标签，直接写 javascript 代码。
  3. HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

JavaScript输出

JavaScript没有任何打印或者输出的函数

JavaScript显示数据

JavaScript可以通过不同的方式来输出数据：

  • 使用windo.alert()弹出警告框

  • 使用document.write()方法将内容写到HTML文档中

  • 使用innerHTML写入到HTML元素

  • 使用console.log写入到浏览器的控制台内

使用window.alert()

可以弹出警告框来显示数据：

<script>
window.alert(5 + 6);
</script>

屏幕截图 2023-08-02 151034.png

操作HTML元素

从JavaScript访问某个HTML元素，使用document.getElementByld(*id*)的方法

<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>

id属性用来标识HTML元素，innerHTML来获取或插入元素内容

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到HTML文档

出于测试目的，可以将JavaScript直接写入HTML文档中：使用document.write()

写到控制台

当浏览器支持调试时，可使用console.log()方法在浏览器中显示JavaScript值

【浏览器中使用F12来启动调试模式，在调试窗口中点击“Console”菜单】

JavaScript语法

1.js中的变量

  • ~变量必须以字母开头
  • ~变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • ~变量名称对大小写敏感（y 和 Y 是不同的变量）

变量的创建

关键字：var、let

<script>
  var name ="小七"
  let age = 19
</script>

注意

  1. var、let并非是变量的类型，只是用来声明name和age是一个变量；
  2. 变量的类型并没有显示写出来，具体的类型根据=后面的值来区分的；
  3. var写法是老式写法，坑比较多；而let是新式写法

【在 2015 后的 JavaScript 版本 (ES6) 允许使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。】

动态类型

在js中，变量的类型可以在运行过程中发生改变，也意味着相同的变量可用作不同的类型：

var x; // x 为 undefined
var x = 5;// 现在 x 为数字
var x = "John";// 现在 x 为字符串

变量的数据类型可以使用typeof操作符来查看

2.基本数据类型

number数字类型

在JS中，不区分整数和浮点数，统一使用number类型来表示

几个特殊的数字值：
  1. Indinity：无穷大，大于任何数字，表示数字已超过了JS能表示的范围；
  2. -Infinity：负无穷大小于任何数字，表示数字已经超过了JS能表示的范围
<script>
    //使用一个正小数除0得到无穷大
    console.log(1.5/0);
    //使用一个负小数除0得到负无穷大
    console.log(-1.5/0);
</script>
NaN：Not a number，表示当前的结果不是一个合法的数字

string 字符串类型

JS中，字符串既可以使用单引号，也可以使用双引号引起来。

⭐如果要表示字符串中含有单引号，就可以用双引号引起来

⭐如果要表示的字符串中含有双引号，就可以使用单引号引起来

⭐否则需要使用转义字符

字符串拼接：使用+来拼接，就会生成一个新的字符串

string的length属性可求字符串长度

属性描述
constructor返回创建字符串属性的函数
length返回字符串的长度
prototype允许您向对象添加属性和方法

boolean布尔类型

在JS中，布尔类型也只有两个值：true和false【0表示false，非0表示true】

⭐当布尔类型参与运算时，会进行隐式类型转换，true转为1，false转为0进行运算

//eg：
<script>
  let a = true
  console.log(a+1)
</script>

undefined未定义数据类型

⭐undefined未定义数据类型中只有一个值：undefined。

如果一个变量没有被初始化，结果就是undefined

undefined和字符串相加，会进行字符串拼接；和数字相加，结果为NaN

null控制类型

null控制类型也只有一个值：null，表示当前变量是一个“空值”

⭐注意：undefined表示当前的变量未定义，null表示当前变量的值为空

数组

1.使用new关键字创建

<script>
  let arr = new Array()
</script>

2.使用[ ]创建

<script>
  let arr = [1,2,3,4,true,"hello",undefined]
</script>

JS中，同一个数组里的元素可以是不同类型（因为JS是动态类型的语言）

获取数组元素：使用下标的方式访问数组元素，数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

⭐如果访问的下标超出数组范围，则结果为undefined

3.JS语句

条件语句

  • if语句 -只有当指定条件为true时，使用该语句来执行代码
  • if...else语句 -当条件为true时，执行代码，当条件为false时执行其他代码
  • if...else if....else语句 -使用该语句来选择多个代码块之一来执行
  • switch语句 -使用该语句来选择多个代码之一来执行
switch语法
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

循环语句

  • for -循环代码块一定的次数
  • for/in -循环遍历对象的属性
  • while -当指定的条件为true时循环指定的代码块
  • do/while -同样当指定的条件为true时循环指定的代码块

break和continue语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

4.函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

//定义函数//声明函数//创建函数

function 函数名(形参列表) {

       函数体;

       return 返回值;

}

★ 由于JS是动态类型的语言，所以函数不需要写返回值，传入的参数也可以是任意类型。

注意：形参和实参的个数可以不匹配，但实际写代码的时候尽量保持匹配。

如何写好JavaScript

写好JS的一些原则：

  • 各司其职
  • 组件封装
  • 过程抽象

写代码应该关注：

  • 效率

  • 风格

  • 使用场景

  • 约定

  • 设计

各司其职

· 让HTML、CSS和JavaScript职能分离

~HTML -> Structural ; CSS -> Presentational ; JavaScript -> Behavioral

· 应当避免不必要的由JS直接操作样式

· 可以用class来表示状态

· 纯展示类交互应寻求零JS方案

组件封装

· 好的UI组件具备正确性、扩展性、复用性

组件是指Web页面上抽出来的一个个包含模块（HTML）、样式（CSS）和功能（JS）的单元。好的组件具备封装性、正确性、扩展性、复用性。实现组件的步骤：结构设计、展现效果、行为设计，三次重构：插件化重构、模板化重构、抽象化重构。

  • 结构设计：HTML

  • 展现效果：CSS

  • 行为设计：JS

    API（功能），API设计应保证原子操作，指责单一，满足灵活性

    Event（控制流），使用自定义事件来解耦

  • 插件化重构，及解耦

    将控制元素抽取成插件

    插件与组件之间通过依赖注入方式建立联系

  • 模板化重构

    将HTML模板化，更易于扩展

  • 抽象化重构（组件框架）

    将通用的组件模型抽象出来

过程抽象

· 应用函数编程思想

过程抽象是指用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。

高阶函数： ~以函数作为参数 ~以函数作为返回值 ~常用于函数装饰器

avatar
文章
阅读
粉丝