js简介组成

最新推荐文章于 2023-03-19 15:46:31 发布

kjs--

最新推荐文章于 2023-03-19 15:46:31 发布

阅读量802

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43157612/article/details/112687607

版权

前端专栏收录该内容

147 篇文章 3 订阅

订阅专栏

1.什么是Javascript？

javascript是一种编程语言
在浏览器上运行
js是可以嵌入到html中到一种脚本语言

2.学习Javascript的意义

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系

HTML：确定网页的结构
CSS：确定网页的样式
JavaScript：确定网页的行为(交互)
- 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
JavaScript应用场景
- 1.网页特效
- 2.游戏开发(cocos2d-js)
- 3.服务端开发(Node.js)
- 4.命令行工具(Node.js)
- 5.桌面程序(Electron)
- 6.App(Cordova)
- 7.控制硬件-物联网(Ruff)
js作者有一句经典名言：凡是能用js实现的功能，最终都会用js来实现

3.JavaScript语言的组成

在这里插入图片描述

ECMAScript - JavaScript的核心（JS基础要学的）
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型(WebAPI)
- 一套操作页面元素的API（别人提供好的一套方法）
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型(WebAPI)
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.2-JavaScript的三种写法（了解）

1-复习CSS代码的三种写法

1.外联样式：写在css文件中，使用link导入
- <link rel="stylesheet" href="路径/01-css外联样式.css">
  - css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码
2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
- <style>.div{background: green;}</style>
3.行内样式：不推荐，因为不便于维护
- <h1 style="background: green">你认真学习的样子真帅</h1>

2-JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.外联样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>
2.内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('马云')">点我就告诉你黑马谁最帅</button>

3-细节注意点

1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的

2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在
js文件中而不能写在script标签中

<!doctype html>

Document

  <!--2.内联，可以在需要位置书写，但是通常是做head中或者body的最后-->
  <script>
      alert('js内联')
  </script>

div

  <!--
  总结：js三种写法
  1.外联写法：写在js中，使用script标签的src属性来导入
  2.内联写法:写在script标签中
  3.行内写法：不推荐，因为不便于维护

  注意事项：
  1.如果一个script标签有src属性（外联写法），此时内联的js代码不会执行
  2.src是js文件所在的路径，相对于当前html文件的路径，如js/01-js外联写法.js
  3.外联路径不一定是自己服务器上的相对路径，可以是外部服务器提供：如src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"
  4.外联写法、内联写法、行内写法，互不干扰，可以在一个html中使用多次（不同的内容）

–>

1.3-JS注释两种写法（了解）

代码注释的作用：
- 1.理清思路，方便自己以后阅读代码
- 2.规范编程，方便以后别人接手代码便于维护
- 3.新手阶段，建立自己的整体思维逻辑，通过注释将思路先完成，后指导写代码
JS注释有两种写法
- // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
- /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下

<!doctype html>

Document

1.4-JS常用五句话（了解）

JS中常用的五句话主要功能是用于调试以及浏览器简单的交互
- JS是一门面向对象高级编程语言，它对于逻辑思想的要求较高，所以在编写JS程序时我们很难做到一次性编写就可以完成所有功能
- 通常的做法是，我们逐步的去实现功能，每敲几行代码我们来打印一下检查代码是否有问题，如果没有就继续编写
  - 类似于我们使用HTML和CSS写静态界面时，并不是写完所有的代码才运行而是写一部分就看一下界面效果
  Title
  千万别点，少年
  点我啊

1.5-js代码执行原理（了解）

1-计算机组成

1.软件
- 系统软件：windows，Linux，unix，OSX，iOS，android
- 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、VSCode
2.硬件
- 三大件：CPU（运算），内存（临时存储），硬盘（永久存储）
- 输入设备：鼠标，键盘，摄像头等
- 输出设备：显示器，打印机，投影仪等

2-代码运行的原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--

        程序运行原理：
        1.计算机将存储在硬盘中的html文件读取到内存中
        2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
        3.CPU处理与计算
        4.CPU将我们代码在运行时产生的数据保存到内存中
		5.系统将内存中的数据转换成人可识别的符号展示给用户（显示、存储等）

    -->

</body>

</html>

02-变量（重点）

1.1-变量声明/赋值/取值

1.实际开发因为数据是动态变化，不可能写死数据，因此需要使用变量来进行保存
2.变量（variable）：内存中用来保存数据的一块空间
3.变量作用：在内存中存储数据
4.语法:
- 1.声明变量:let 变量名
- 2.赋值：变量名 = 值
- 3.取值：直接写变量名即可
  Title

图解变量工作原理

1.2-变量补充说明

本小节知识点
- 1.变量的初始化
- 2.变量的批量声明
- 3.变量批量声明赋值
- 4.变量的重复声明
- 5.变量的重复赋值
- 6.变量的值是另一个变量的值
- 7.JS老版本var声明变量
- 8.let和var的区别
  Title

图解变量补充说明

1.3-变量命名规则与规范

规则：必须要遵守，否则会报错
- 规则是由语法决定的，无法更改
  - 1.变量只能以下划线、字母、 $开头，后面接任意的数字、下划线、字母、$
  - 2.不能以JS的关键字作为变量名
    - 尽量不要使用关键字和保留字作为变量名，也不需要死记硬背，孰能生巧
    - 关键字：JS内置的一些关键字，代表着特殊的语法含义，不允许程序员擅自声明
    - 保留字：有可能在将来会成为关键字，现在可以用，但是并不能保证以后一直可以用
规范：程序员们在遵守规则时养成的一种习惯
- 规范是程序员的一种编码习惯，主要目的就是为了提高代码的易读性
  - 1.起名要有意义，最好用名词作为变量名
  - 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果有其他单词则每一个单词的首字母大写
  Title

1.4-练习：交换两个变量的值

<script>
    /*变量赋值的原理： 变量名 = 值
    1.先将变量内存空间中原本存储的数据销毁
    2.然后将等号右边的数据放入这个内存空间中
     */

    //需求：交换两个变量的值 让n2变成20，n1变成10
    let n1 = 10;
    let n2 = 20;

    //不能直接交换
    // n1 = n2;//将n2的值赋值给n1的时候，会变把n1原本的值销毁
    // n2 = n1;
    // console.log ( n1, n2 );//20 20

    //使用第三方变量来交换
    let temp = n1;				//先把n1的值存到变量temp中
    n1 = n2;					//将n2的值赋值给n1
    n2 = temp;					//将templ的值赋值给n2
    console.log ( n1, n2 );		//20,10
</script>

03-数据类型与直接量

1.1-数据类型与直接量介绍

1.在js中，只有符合数据类型的数据才能被识别
2.数据类型：软件在运行时，会产生数据，数据有很多种，不同的数据CPU的处理方式不同
所以需要对数据进行分类，不同的数据对应不同的类型
3.直接量（字面量）：只要是符合数据类型的数据都叫做直接量
- 顾名思义：让你从字面上理解这个数据
4.如果某行js代码报错，原因只有两个
- 第一：语法错误
- 第二：数据不识别
  Title

1.2-基本数据类型

String类型

String：字符串
- 例如：“张三”,‘abc’
- 范围：一切用双引号或者单引号包围起来的内容都是字符串
  - 作用：展示文本内容

Number类型

Number：数字
- 例如： 10 0.1
- 范围：数学中的一切数字，包含整数和小数
  - 作用：用于数学计算

Boolean类型

boolean：布尔类型
- 只有两个值：true、false
  - 作用：表示现实世界中事物的两种对立面真假、长短、开关、男女等
    - true表示真
    - false表示假

Undefined类型

undefined：变量只有声明，没有赋值
- null是一种空对象，只是目前没有具体内容

null类型

null：变量赋值为null
- 作用：不确定未来是什么数据类型
  Title

1.3- typeof关键字

作用：检测一个数据所属的类型

语法：typeof 数据或者 typeof (数据)

会得到改属性所属类型的字符串: string number boolean

Title

<script>
    /*     
        1. 检测数据类型
            (1)语法
                a.  typeof 数据
                b.  typeof (数据)
            (2)结果 ： 得到该数据所属类型的字符串
                typeof ('123')  ->  'string'
                typeof (123)    ->  'number'
                typeof (true)   ->  'boolean'
    */

    //1. typeof ：检测一个数据所属的类型,返回一个数据所属类型的字符串
    //语法 ： （1） typeof 数据   （2）typeof (数据)
    //关键字：具有特殊含义的英语单词

    console.log(typeof 123);	// "number"
    console.log(typeof '123');	// "string"
    console.log(typeof true);	// "boolean"
    console.log(typeof null);	// "object"：一类特殊对象
    console.log(typeof undefined);	// "undefined"

</script>

课堂小彩蛋：请说出下列代码的运行结果

typeof true;
typeof “true”;
typeof (typeof true);
typeof (typeof “true”);

04-运算符与表达式

1.运算符只是一种运算的符号，单独使用无意义，通常与需要计算的数据在一起组成表达式
2.表达式一定有结果，要么直接打印要么存入变量中

1.1-js中+号的作用

1.字符串连接符：连接字符串
* 条件： +号两边只要有一边是string类型
* 算术加法
条件 : +号两边都是number类型
Title

1.2-算术运算符与算术表达式

运算符只是一种运算的符号，由运算符参与的式子称之为表达式
表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存

1.3-复合算术运算符

符合算术运算符是算术运算符的一种简写形式
- num += 5 只是 num = num + 5的简写形式，他们之间完全等价
+=: 在自身值的基础上再加多少
-=：在自身值的基础上减多少
*=: 在自身值的基础上乘多少
/=: 在自身值的基础上除多少
%=：在自身值的基础上模多少
Title

1.4-自增/自减运算符

1.自增/自减都称之为自操作运算
- ++：自增，自己+1
- –：自减，自己-1
2.自操作运算都是一元表达式，即只有一个变量参与运算
3.自操作运算不能用于直接量
Title

课堂小菜单: 请说出以下代码的结果

let a = 10;
let b = a++ + a++;
console.log(b);

1.5-Math高级数学计算

内置的内容要懂得记重点：当前重点Math，其他的不用特别记
- MDN官网：https://developer.mozilla.org/zh-CN/
  Title

1.6-常量const关键字【ES6】

1.let关键字定义的叫做变量，变量的值可以随时随地随便改变
2.有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字
- const是ES6的语法规范（为大型项目而生）
- const声明的叫做常量（固定量）
- 常量在声明的时候就必须赋值，且后续不再可以改变（只能使用）
  Title

1.7-模板字符串【ES6】

ES6提供了一种新的写描述字符串的方式：反引号（数字键1旁边的英文状态下的符号）
作用
- 和引号标记字符串的效果一样
- 可以解决引号字符串过长不能换行的问题
- 可以解决字符串连接需要使用+号的问题
  ${数据}
  Title

kjs--

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简介组成

1.什么是Javascript？javascript是一种编程语言在浏览器上运行js是可以嵌入到html中到一种脚本语言2.学习Javascript的意义一个前端网页主要由三门语言组成，他们之间是缺一不可的关系HTML：确定网页的结构CSS：确定网页的样式JavaScript：确定网页的行为(交互)众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的
复制链接

扫一扫