国内较好的网站设计公司,广西网络电视,做网站需要切图吗,如何查注册商标是别人注册过的介绍 掌握 JavaScript 的引入方式#xff0c;初步认识 JavaScript 的作用 引入方式
JavaScript 程序不能独立运行#xff0c;它需要被嵌入 HTML 中#xff0c;然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中#xff0c;有两种方式…介绍 掌握 JavaScript 的引入方式初步认识 JavaScript 的作用 引入方式
JavaScript 程序不能独立运行它需要被嵌入 HTML 中然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中有两种方式
内部方式
通过 script 标签包裹 JavaScript 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 引入方式/title
/head
body!-- 内联形式通过 script 标签包裹 JavaScript 代码 --scriptalert(嗨欢迎来传智播学习前端技术)/script
/body
/html
外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中然后通过 script 标签的 src 属性引入
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 引入方式/title
/head
body!-- 外部形式通过 script 的 src 属性引入独立的 .js 文件 --script srcdemo.js/script
/body
/html
如果 script 标签使用 src 属性引入了某 .js 文件那么 标签的代码会被忽略如下代码所示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 引入方式/title
/head
body!-- 外部形式通过 script 的 src 属性引入独立的 .js 文件 --script srcdemo.js// 此处的代码会被忽略掉alert(666); /script
/body
/html
注释和结束符
通过注释可以屏蔽代码被执行或者添加备注信息JavaScript 支持两种形式注释语法
单行注释
使用 // 注释单行代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 注释/title
/head
bodyscript// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释document.write(嗨欢迎来传智播学习前端技术);/script
/body
/html
多行注释
使用 /* */ 注释多行代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 注释/title
/head
bodyscript/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write(嗨欢迎来传智播学习前端技术)/script
/body
/html
注编辑器中单行注释的快捷键为 ctrl /
结束符
在 JavaScript 中 ; 代表一段代码的结束多数情况下可以省略 ; 使用回车enter替代。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 结束符/title
/head
bodyscript alert(1);alert(2);alert(1)alert(2)/script
/body
/html
实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;
输入和输出
输出和输入也可理解为人和计算机的交互用户通过键盘、鼠标等向计算机输入信息计算机处理后再展示结果给用户这便是一次输入和输出的过程。
举例说明如按键盘上的方向键向上/下键可以滚动页面按向上/下键这个动作叫作输入页面发生了滚动了这便叫输出。
输出
JavaScript 可以接收用户的输入然后再将输入的结果输出 alert()、document.wirte() 以数字为例向 alert() 或 document.write()输入任意数字他都会以弹窗形式展示输出给用户。
输入
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中一般提示用户输入一些内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 输入输出/title
/head
bodyscript // 1. 输入的任意数字都会以弹窗形式展示document.write(要输出的内容)alert(要输出的内容);
// 2. 以弹窗形式提示用户输入姓名注意这里的文字使用英文的引号prompt(请输入您的姓名:)/script
/body
/html
变量 理解变量是计算机存储数据的“容器”掌握变量的声明方式 变量是计算机中用来存储数据的“容器”它可以让计算机变得有记忆通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】数据
script// x 符号代表了 5 这个数值x 5// y 符号代表了 6 这个数值y 6//举例 在 JavaScript 中使用变量可以将某个数据数值记录下来
// 将用户输入的内容保存在 num 这个变量容器中num prompt(请输入一数字!)
// 通过 num 变量容器将用户输入的内容输出出来alert(num)document.write(num)
/script
声明
声明(定义)变量有两部分构成声明关键字、变量名标识
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 声明和赋值/title
/head
bodyscript // let 变量名// 声明(定义)变量有两部分构成声明关键字、变量名标识// let 即关键字所谓关键字是系统提供的专门用来声明定义变量的词语// age 即变量的名称也叫标识符let age/script
/body
/html
关键字是 JavaScript 中内置的一些英文词汇单词或缩写它们代表某些特定的含义如 let 的含义是声明变量的看到 let 后就可想到这行代码的意思是在声明变量如 let age;
let 和 var 都是 JavaScript 中的声明变量的关键字推荐使用 let 声明变量
赋值
声明定义变量相当于创造了一个空的“容器”通过赋值向这个容器中添加数据。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 声明和赋值/title
/head
bodyscript // 声明(定义)变量有两部分构成声明关键字、变量名标识// let 即关键字所谓关键字是系统提供的专门用来声明定义变量的词语// age 即变量的名称也叫标识符let age// 赋值将 18 这个数据存入了 age 这个“容器”中age 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str hello world!alert(str);/script
/body
/html
关键字
JavaScript 使用专门的关键字 let 和 var 来声明定义变量在使用时需要注意一些细节
以下是使用 let 时的注意事项 允许声明和赋值同时进行 不允许重复声明 允许同时声明多个变量并赋值 JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时的注意事项 允许声明和赋值同时进行 允许重复声明 允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大但是 let 相较 var 更严谨因此推荐使用 let后期会更进一步介绍二者间的区别。
变量名命名规则
关于变量的名称标识符有一系列的规则需要遵守 只能是字母、数字、下划线、$且不能能数字开头 字母区分大小写如 Age 和 age 是不同的变量 JavaScript 内部已占用于单词关键字或保留字不允许使用 尽量保证变量具有一定的语义见字知义
注所谓关键字是指 JavaScript 内部使用的词语如 let 和var保留字是指 JavaScript 内部目前没有使用的词语但是将来可能会使用词语。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 变量名命名规则/title
/head
bodyscript let age 18 // 正确let age1 18 // 正确let _age 18 // 正确
// let 1age 18; // 错误不可以数字开头let $age 18 // 正确let Age 24 // 正确它与小写的 age 是不同的变量// let let 18; // 错误let 是关键字let int 123 // 不推荐int 是保留字/script
/body
/html
常量
概念使用 const 声明的变量称为“常量”。
使用场景当某个变量永远不会改变的时候就可以使用 const 来声明而不是let。
命名规范和变量一致
const PI 3.14 注意 常量不允许重新赋值,声明的时候必须赋值初始化 数据类型 计算机世界中的万事成物都是数据。 计算机程序可以处理大量的数据为了方便数据的管理将数据分成了不同的类型
注通过 typeof 关键字检测数据类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 数据类型/title
/head
bodyscript // 检测 1 是什么类型数据结果为 numberdocument.write(typeof 1)/script
/body
/html
数值类型
即我们数学中学习到的数字可以是整数、小数、正数、负数
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 数据类型/title
/head
bodyscript let score 100 // 正整数let price 12.345 // 小数let temperature -40 // 负数
document.write(typeof score) // 结果为 numberdocument.write(typeof price) // 结果为 numberdocument.write(typeof temperature) // 结果为 number/script
/body
/html
JavaScript 中的数值类型与数学中的数字是一样的分为正数、负数、小数等。
字符串类型
通过单引号 、双引号 或反引号包裹的数据都叫字符串单引号和双引号没有本质上的区别推荐使用单引号。
注意事项 无论单引号或是双引号必须成对使用 单引号/双引号可以互相嵌套但是不以自已嵌套自已 必要时可以使用转义符 \输出单引号或双引号
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 数据类型/title
/head
bodyscript let user_name 小明 // 使用单引号let gender 男 // 使用双引号let str 123 // 看上去是数字但是用引号包裹了就成了字符串了let str1 // 这种情况叫空字符串documeent.write(typeof user_name) // 结果为 stringdocumeent.write(typeof gender) // 结果为 stringdocumeent.write(typeof str) // 结果为 string/script
/body
/html
布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据它有两个固定的值 true 和 false表示肯定的数据用 true表示否定的数据用 false。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 数据类型/title
/head
bodyscript // pink老师帅不帅回答 是 或 否let isCool true // 是的摔死了isCool false // 不套马杆的汉子
document.write(typeof isCool) // 结果为 boolean/script
/body
/html
undefined
未定义是比较特殊的类型只有一个值 undefined只声明变量不赋值的情况下变量的默认值为 undefined一般很少【直接】为某个变量赋值为 undefined。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 数据类型/title
/head
bodyscript // 只声明了变量并末赋值let tmp;document.write(typeof tmp) // 结果为 undefined/script
/body
/html
注JavaScript 中变量的值决定了变量的数据类型。
类型转换 理解弱类型语言的特征掌握显式类型转换的方法 在 JavaScript 中数据被分成了不同的类型如数值、字符串、布尔值、undefined在实际编程的过程中不同数据类型之间存在着转换的关系。
隐式转换
某些运算符被执行时系统内部自动将数据类型进行转换这种转换称为隐式转换。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 隐式转换/title
/head
bodyscript let num 13 // 数值let num2 2 // 字符串
// 结果为 132// 原因是将数值 num 转换成了字符串相当于 13// 然后 将两个字符串拼接到了一起console.log(num num2)
// 结果为 11// 原因是将字符串 num2 转换成了数值相当于 2// 然后数值 13 减去 数值 2console.log(num - num2)
let a prompt(请输入一个数字)let b prompt(请再输入一个数字)
alert(a b);/script
/body
/html
注数据类型的隐式转换是 JavaScript 的特征后续学习中还会遇到目前先需要理解什么是隐式转换。
补充介绍模板字符串的拼接的使用
显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的因为隐式转换规律并不清晰大多是靠经验总结的规律。为了避免因隐式转换带来的问题通常根逻辑需要对数据进行显示转换。
Number
通过 Number 显示转换成数值类型当转换失败时结果为 NaNNot a Number即不是一个数字。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript 基础 - 隐式转换/title
/head
bodyscriptlet t 12let f 8
// 显式将字符串 12 转换成数值 12t Number(t)
// 检测转换后的类型// console.log(typeof t);console.log(t f) // 结果为 20
// 并不是所有的值都可以被转成数值类型let str hello// 将 hello 转成数值是不现实的当无法转换成// 数值时得到的结果为 NaN Not a Numberconsole.log(Number(str))/script
/body
/html
