JAVAScrpt入门

最新推荐文章于 2024-04-26 16:47:03 发布

jiaohuang2442

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量396

点赞数

分类专栏：入门文章标签： javascript

本文链接：https://blog.csdn.net/jiaohuang2442/article/details/106358349

版权

入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.编程语言

1.1 编程： 就是让计算机为解决某个问题而使用某种程序设计语言编写代码，并最终得到结果的过程。
1.2 编程语言 与 标记语言 的区别：
a.编程语言有很强的逻辑和行为能力，主动向计算机发送指令
b.标记语言是用来被读取，它是被动的。

2.计算机基础

2.1 计算机的组成：硬件、软件
a.硬件：
鼠标、键盘…（输入设备）；
显示器、打印机…（输出设备）；
cpu（负责处理数据与计算）；
硬盘：永久存储
内存：暂时存储

b.软件：
系统软件： windows、Linux、macOS…
应用软件： QQ、浏览器、Word…

3.学习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)

4.JavaScript语言的组成

在这里插入图片描述

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

4.1-JavaScript的三种写法

a.复习CSS代码的三种写法

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

b.JS代码三种写法

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

**c.细节注意点

1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在
js文件中而不能写在script标签中

例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<!--
    总结：js三种写法
    1.行内写法：不推荐，因为不便于维护
    2.内联写法:写在script标签中
    3.外联写法：写在js中，使用script标签的src属性来导入
    注意点：如果一个script标签有src属性（外联写法），此时内联的js代码不会执行
-->

<!--3.外联-->
<script src="01-js外联写法.js"></script>
<body>
<!--1.行内-->
<div onclick="alert('js行内')">div</div>
<!--2.内联-->
<script>
    alert('js内联')
</script>
</body>
</html>

5. JS注释两种写法

代码注释的作用：
- 1.理清思路，方便自己以后阅读代码
- 2.规范编程，方便以后别人接手代码便于维护
JS注释有两种写法
- // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
- /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下
  例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script>
    //单行注释：注释内容只能是这一行
    /* 多行注释：注释内容可以是多行
    第一行
    第二行
    */
    alert("JS注释");
</script>
</body>
</html>

6.代码运行的原理

程序运行原理：
1.计算机将存储在硬盘中的html文件读取到内存中
2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
3.CPU处理与计算
4.CPU将我们代码在运行时产生的数据保存到内存中

1.js代码报错原因
(1) 编译器做两件事：识别语法，处理(存储与计算)数据
(2) 报错的原因只有两个：
a. 语法不识别 : SyntaxError
b. 数据不识别 : ReferenceError
(3) 一旦代码报错，程序终止运行，后面的代码都不会解析。

2.直接量 : 可以直接使用的数据  （能够被编译器识别的数据）
    * 哪些数据可以被识别 ：  必须要符合js的数据类型

3.数据类型 : js代码在运行时会产生不同的数据，不同的数据存储与处理方式不一样，

所以要对数据进行分类,称之为数据类型。
* JS数据类型一起有7种，分为两大类
a. 基本数据类型(5种)
b. 复杂数据类型(2种)

4.基本数据类型 :
    (1) 字符串类型(String) : 一切以单引号''  或  双引号""  引起来的内容
        * 作用：用于展示文本
    (2) 数值类型(Number) : 一切数学中的数字
        * 作用： 用于数学计算
    (3) 布尔类型(Boolean) : 只有两个值  true(真)   false(假)
        * 作用： 用于表示事物对立面 (条件成立 / 条件不成立)
    小技巧 ： 谷歌控制台， 字符串会显示黑色 ， 数字和布尔会显示蓝色

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

jiaohuang2442

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAScrpt入门

1.编程语言1.1 编程：就是让计算机为解决某个问题而使用某种程序设计语言编写代码，并最终得到结果的过程。1.2 编程语言与标记语言的区别：a.编程语言有很强的逻辑和行为能力，主动向计算机发送指令b.标记语言是用来被读取，它是被动的。2.计算机基础2.1 计算机的组成：硬件、软件a.硬件：鼠标、键盘…（输入设备）；显示器、打印机…（输出设备）；cpu（负责处理数据与计算）；硬盘：永久存储内存：暂时存储b.软件：系统软件： windows、Linux、macOS…应用
复制链接

扫一扫