JS第二节--初识JavaScript

最新推荐文章于 2024-06-29 11:02:00 发布

小刘的前端之路

最新推荐文章于 2024-06-29 11:02:00 发布

阅读量91

点赞数

分类专栏：我的JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/liuzizhoufaith/article/details/122779372

版权

我的JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

二、初识JavaScript

(一)JavaScript知识导读

初识JavaScript
JavaScript注释
JavaScript输入输出语句

(二)初始JS

历史：
- 1961出生的布兰登艾奇。十天完成了JS的设计
- JavaScript和java，就像雷锋和雷峰塔的关系。
- JS是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
- 脚本语言：不需要编译，运行过程由js解释器（js引擎）逐行来解释并执行
- 现在也可以基于Node.js技术进行服务器端编程

JavaScript的作用
- 表单动态校验（密码强度检测）（JS最初的目的）
- 网页特效
- 服务端开发（Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发（cocos2d-js)
HTML、CSS、JS的关系
- HTML/CSS标记语言--描述类语言
- HTML决定网页的结构和内容
- CSS决定呈现给用户的模样（决定好不好看），相当于给人穿衣服，化妆
- JS是脚本语言--编程类语言
- 实现业务逻辑和页面控制，相当于人的各种动作

(三)浏览器执行JS的过程

浏览器分为两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也叫JS解释器，用来读取网页中的Js代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身不会执行js代码，而是通过内置JS解释器来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转化为机器语言），然后由计算机去执行，所以JS归为脚本语言，会逐行解释执行。

(四)JS的组成

ECMAScript：规定了JS的编程语法和基础核心知识，是左右浏览器厂商共同遵守的一套JS语法工业标准

DOM：文档对象模型

BOM：浏览器对象模型

(五)JS初体验

js有三种书写位置

1. 行内式

直接写在元素的内部,两个body之间

<body>
    <input type="button" value="唐伯虎" οnclick="alert('秋香')">
    <input type="button" value="点我试试" οnclick="alert('Hello World')">
</body>

可以将单行或少量JS代码写在html标签的事件属性(以on开头的属性),如:onclick

注意单双引号的使用:在HTML中我们推荐双引号,JS中推荐单引号

可读性差,在html中编写大量js代码,不方便阅读

引号易错,引号多层嵌套匹配时,非常容易弄混

仅限特殊情况使用

2. 内嵌式

新建两个script,写在这两个之间

<script>
    alert('沙漠骆驼');
</script>

可以写多行JS代码到<script>标签中

内嵌JS是学习时常用的方式

3. 外部js

在另一个.js文件里写文件,如:

新建一个my.js,在里面写

alert('如果我是DJ你会爱我吗')

然后引入到自己的html文件中,注意:script是双标签

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

利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用

引用外部JS文件的script标签中间不可以写代码

适合于JS代码量比较大的情况

(六)JS注释

单行注释
```
//单行注释
//ctrl+/
```

多行注释

/*多行注释
多行注释
*/

/*
shift+alt+a
*/

(七)JS输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框,用户可以输入	浏览器

输入框 prompt();

//这是一个输入框
prompt('请输入您的年龄');

弹出警示框 alert();

输出的,展示给用户的
```
alert('计算的结果是');
```
控制台输出 console();

给程序员测试用的,按F12可以看到
```
console.log('我是程序员能看到的');
```