独闯JavaScript
了解JavaScript
为什么学习JavaScript
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
我们学习 JavaScript，以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。
JavaScript简介
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏和显示 HTML 元素
JavaScript / ECMAScript
ECMA是“European Computer Manufacturers Association”的缩写，中文称欧洲计算机制造联合会。这个组织的目标是评估，开发和认可电信和计算机标准。
ECMA是标准， JavaScript是实现
类似HTML5是标准， IE10、Chrome、FF都是实现
目的是让所有前端脚本都实现ECMA
目前只有JavaScript实现ECMA标准， ECMAScript ≈ JS
ECMAScript简称ECMA或ES（ES6）
目前版本
高级浏览器支持ES6
低级浏览器主要支持ES3.1
JavaScript使用方式
在 HTML 中，JavaScript 代码必须位于 标签之间。
<script>
//书写javascript代码
</script>
在HTMl标签中使用
<a href="javascript:alert('this is a test')">去百度</a>
<p οnclick="alert(‘诶呦，我被点了一下’)">加个事件</p>
独立外部脚本使用
<script src="./demo.js"></script>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script src="two.js"></script>
<link rel="stylesheet" href="">
<script>
alert('1111111111111')
</script>
</head>
<body>
<!--第一种方式-->
<script>
window.alert('弹弹弹，弹走鱼尾纹~~~')
</script>
<!--第二种方式-->
<a href="https://www.baidu.com">我想问度娘</a>
<!--一般只写一句javascript代码时会使用-->
<a href="javascript:alert('我是度娘')">我想问度娘1</a>
<h2 οnclick="alert('欸有，我被点击了')">使用事件的方式运行js</h2>
</body>
</html>
<script>
alert('2222222222222222')
</script>
<!--第三种方式-->
<script src="one.js"></script>
one.js文件
alert('我是one.js里面的内容')
two.js文件
alert('我是two.js文件内容')
JavaScript输出
JavaScript 不提供任何内建的打印或显示函数
使用 window.alert() 写入警告框
alert('this is a test')
window.alert('this is a test')
使用 document.write() 写入 HTML 输出
document.write('写入内容到浏览器')
document.write(1 + 1)
使用 innerHTML 写入 HTML 元素
<div id="box"></div>
<script>
document.getElementById('#box').innerHTML = '<b>跟我学前端</b>'
</script>
使用 console.log() 写入浏览器控制台
console.log('this is a test')
console.log(1 + 1)
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv">#########3</div>
<p οnclick="document.write('111111')">this is a p</p>
<script>
// 输出方式一
alert('这是要输出的数据')
window.alert('这是要输出的数据的第二条')
alert(1 + 190)
// 输出方式二
document.write('我是第二种输出数据的方式')
document.write(100 + 55)
// 输出数据方式三
document.getElementById('dv').innerHTML = '<b>我是第三种输出数据的方式</b>'
document.getElementById('dv').innerHTML = '我不使用标签'
// 输出数据方式四 输出到控制台
console.log('输出到控制台')
console.log(10 * 4)
</script>
</body>
</html>
JavaScript语句
JavaScript 语句是由 web 浏览器“执行”的“指令”
值、运算符、表达式、关键词和注释等构成JavaScript语句
英文状态下的分号（;）分隔 JavaScript 语句
JavaScript 空白字符
JavaScript 行长度和折行
JavaScript 代码块
JavaScript 关键词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 10
//这是一个注释
var b = 20
var c = a + b
console.log(c)
//； 命令执行符 指令分割符 或者 回车
var d = 100;
var e = 101;
console.log(d + e)
//换行可以是一个语句的结束，分号也可以是一个语句的介绍
var a = 5; var b = 10;console.log(a + b)
//结构定义语句不能加分号，程序执行语句一定要加分号或者换行(回车)
if(true){
if(true){
}
}
//行的长度和折行 最多写80个字符
var a = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
'aaaaaaaaaaaaaaaaaaaaaaa'
var b = 'aaa' + 'bbbb'
console.log(b)
//代码块
function demo(a, b, c) {
}
//关键词 不要使用JS保留的关键词
// var var = 'a'
// Javascript 字面量
console.log(19.2 + 5)
//单引号中不能包含单引号 双引号中不能包含双引号
var name = "hello\"World"
var name1 = 'hello\'World'
</script>
</body>
</html>
JavaScript注释
注释被 JavaScript 忽略
JavaScript 注释用于解释 JavaScript 代码，增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释 //
多行注释以 / 开头，以 / 结尾
注：多行注释不要嵌套多行注释
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//写的内容不会被浏览器执行
//写的是单行注释
//var a = 10
//console.log(a)
/*
这是多行注释
1.写过的代码不要急于删除
2.可以用于调试程序
3.注释后程序结构一定要完整
4.编写文档
1. 写在程序的上面
2. 要么写在程序的右边 不要写在下面
*/
//100行代码
if(true){
// if(true){
// if(true){
//
// }
//}
}
//声明一个变量name
var name = 'zhangsan'
var name1 = 'lisi'; //这是声明一个变量name
/*
方法：demo() 运算两个数的和
参数a:第一个运算元
参数b：第二个运算元
*/
function demo(a,b){
return a + b
}
</script>
</body>
</html>
JavaScript变量及常量
什么是变量
可以改变的量
JavaScript 变量是存储数据值的容器
变量命名
JS中声明变量必须使用var或者let进行声明
变量名不允许使用中文，必须使用英文或者拼音
变量名中可以使用数字，但是数字不能开头
变量名中不允许使用特殊字符，下划线(_)除外
变量名要有意义
变量名严格区分大小写
变量名推荐使用小写
如果变量名是多个单词建议使用驼峰命名法 (number one)=>(NumberOne)
变量赋值
= （等号） 将等号右边的值赋值给等号左边的变量
数据类型
变量里面能装的就是JS所支持的数据类型
变量声明
使用var 或者 let
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/********js中的变量********/
//变量是一个容器 或者 你的一只手
//声明变量
var a
//输出到控制台 未赋值的变量 默认时undefined
console.log(a)
//赋值 = 将等号右边的内容赋值给等号左边的变量
a = 10
//输出到控制台
console.log(a)
//声明变量时 进行赋值
var b = 20
console.log(b)
//尝试改变变量的值
b = 50
console.log(b)
b = '你好js'
console.log(b)
//变量的明明规则
//1.变量名中可以有数字，但是不允许以数字开头
// var 1a = 10
// console.log(1a)
//2.变量中不可以使用特殊符号，下划线(_)除外
var a_b = 10
console.log(a_b)
//3.变量名尽量使用英文或者拼音，(我)不允许使用汉字
var 你好 = '我是汉字变量名'
console.log(你好)
//4. 变量名要有意义
//5.严格区分大小写
//会报错 hello is not defined （hello是未被定义的
var Hello = '你好'
console.log(hello)
//6. 声明变量 需要使用var 或者 后面学习的let 关键字来进行声明
</script>
</body>
</html>
ES6声明变量
ES6 引入了两个重要的 JavaScript 新关键词：let 和 const。
JavaScript 块作用域
重新声明变量的问题
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//使用var关键字可以重复声明变量
var a = 10
var a = 20
console.log(a)
//使用var声明的变量属于全局作用域
if(true){
var b = 10
}
console.log(b)
//es6中提供的新关键字let
//不可以重复声明
let x = 10
console.log(x)
//报错：X已经被定义
// let x = 11
// console.log(x)
//作用域的问题：let只能在自己的作用域中使用
if(true){
let y = 20
console.log(y)
}
//会报错，因为let声明的变量只在当前作用域下有效
console.log(y)
</script>
</body>
</html>
什么是常量
通常不会改变的量
变量就好比在黑板上写字，而常量就相当于在墓碑上刻字，一次刻印终身受用
ES6声明常量
通过 const 定义的常量与 let 变量类似，但不能重新赋值
在声明时必须赋值
常量对象或数组内容可以更改
常量名推荐大写，用于与变量名的区分，命名规则跟变量一样
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//声明常量
// const PI = 3.1415926
// console.log(PI)
//不能重新赋值
// PI = 3.88
// console.log(PI)
//不能重新声明
// const PI = 4.88
// console.log(PI)
//常量声明必须有值
// const PI
// PI = 3.99
//声明一个常量数组 就是一组数据
const arr = ['小明','小红','小白','小黑']
//无法更改
// arr = [1,2,3,4]
console.log(arr)
//查看某一个值
console.log(arr[2]);
//单独更改内容
arr[2] = '最帅的人是我'
console.log(arr)
</script>
</body>
</html>
JavaScript数据类型
JavaScript 中有五种可包含值的数据类型：
字符串（string）
声明字符串使用单引号或者双引号均可
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*******1.字符串类型*******/
//声明字符串
let str = '你是我的优乐美'
//输出内容
console.log(str)
//查看类型 typeof
console.log(typeof(str))
let str1 = "我是双引号声明"
console.log(str1)
console.log(typeof str1)
</script>
</body>
</html>
数值（number）
正数(包含小数)、负数(包含小数)、0
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/********2.数值类型声明************/
//1.声明正整数
let num1 = 10
console.log(num1)
console.log(typeof num1)
//2.声明负整数
let num2 = -10
console.log(num2)
console.log(typeof num2)
//3.声明0
let num3 = 0
console.log(num3)
console.log(typeof num3)
//4.声明小数
let num4 = 3.14
console.log(num4)
console.log(typeof num4)
let num5 = -3.14
console.log(num5)
console.log(typeof num5)
// 二进制声明 0101
let b = 0b1010
console.log(b)
console.log(typeof b)
// 八进制声明 01234567
let ba = 010
console.log(ba)
console.log(typeof ba)
// 十六进制声明 0123456789abcdef
let sl = 0xff
console.log(sl)
console.log(typeof sl)
//使用科学计数法声明浮点数(小数)
let num6 = 3.14e2
console.log(num6)
console.log(typeof num6)
</script>
</body>
</html>
布尔（boolean）
布尔类型只有两个值，一个是true（真）,一个是false(假)
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/********3.声明布尔类型**********/
let bool = true
console.log(bool)
console.log(typeof bool)
//声明布尔值的值 不需要使用引号，使用引号就是字符串类型了
let bool1 = 'true'
console.log(bool1)
console.log(typeof bool1)
let bool2 = false
console.log(bool2)
console.log(typeof bool2)
</script>
</body>
</html>
对象（object）
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/****4.声明对象*********/
let obj = {'name':'zhangsan','sex':'男','age':30}
console.log(obj)
console.log(typeof obj)
</script>
</body>
</html>
函数（function）
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*******5.函数类型*******/
//声明一个函数 将函数赋值给变量
let func = function () {
}
//打印出函数的声明结构
console.log(func)
//查看类型
console.log(typeof func)
</script>
</body>
</html>
同时有两种不能包含值的数据类型：
null
undefined
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/********6.不包含数据的值**********/
//null
let nu = null
console.log(nu)
console.log(typeof nu)
var nu1 = null
console.log(null)
console.log(typeof nu1)
let nu2 = ''
console.log(typeof nu2)
let unde = undefined
console.log(unde)
console.log(typeof unde)
//未声明的变量
console.log(typeof hhxi)
//声明变量未赋值
let unde1
console.log(typeof unde1)
</script>
</body>
</html>
JavaScript类型转换
如何查看数据类型
typeof检测数据类型
typeof 数据变量
typeof(数据变量)
通过使用 JavaScript 函数 （强制类型转换 | 显性类型转换）
Number()
parseInt()
parseFloat()
变量.toString() 或 String()
Boolean()
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/********1.转数值类型 *******/
/*
转换后的数据变量 = Number(数据变量)
*/
let str = '100'
str = '-100'
str = '3.1415'
str = '-3.1415'
// NaN not a number
str = '10a'
// 科学计数法的方式声明浮点数 3e2 3*10的2次方
str = '3e2'
//NaN
str = '3a2'
// str = '-10a'
str = true
str = false
str = ''
//注意 在使用Number转换时，字符串中如果出现非数值内容 转换后将得到NaN 不是一个数
console.log('原类型:'+typeof str)
//进行Number
let num = Number(str)
console.log(num)
console.log('转换后:'+typeof num)
/********2.parseInt Int************/
let str1 = '10'
str1 = '-10'
str1 = '100a'
str1 = 'abc100'
str1 = '555abc'
str1 = '-5555abc'
str1 = '+3333abnc'
str1 = '10.1234abc'
str1 = true
str1 = false
//在使用parseInt转换整型时，如果是纯数字字符串 直接改变类型
//如果字符串以数字开头，数字后面跟非数字内容，那么转换时将提取开头的数值部分
//在字符串开头只允许出现正负符号(+ - ) 转换后代表正数或者负数
let num1 = parseInt(str1)
console.log('原类型:'+typeof str1)
console.log(num1)
console.log('转换后:'+typeof num1)
/*********3.parseFloat ***********/
let str2 = '10'
str2 = '100a'
str2 = '100-a'
str2 = '10.1234abc'
str2 = true
str2 = false
let num2 = parseFloat(str2)
console.log('原类型:'+typeof str2)
console.log(num2)
console.log('转换后:'+typeof num2)
/*******4. 转字符串 变量.toString() 或 String()*********/
let num3 = 10
//方式1
let str3 = num3.toString()
//方式2
let str4 = String(num3)
num3 = true
num3 = 10.333
str3 = num3.toString()
console.log('原类型:'+typeof num3)
console.log(str3)
console.log('转换后:'+typeof str3)
/*******5.转布尔值 Boolean()*******/
let num4 = 1
num4 = 0
num4 = ''
num4 = '0'
num4 = 0.0
let bool = Boolean(num4)
console.log('原类型:'+typeof num4)
console.log(bool)
console.log('转换后:'+typeof bool)
</script>
</body>
</html>
通过 JavaScript 本身自动转换 (自动数据类型转换 | 隐性类型转换)
在运算或者判断的过程中会发生自动数据类型转换
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let a = 10
let b = 'a'
//会发生自动数据类型转换
let result = a + b
console.log(result)
console.log(typeof result)
//+ 在字符串中是相连的作用
result = 1 + '2' + 3 + '4'
console.log(result); //? 1234
console.log(typeof result); //? string
result = 1 + 2 + '3' + '4'
console.log(result); //? 334
console.log(typeof result); //string
//判断
if(Infinity){
console.log('aaa')
}
</script>
</body>
</html>
不同值转换结果：
1678961167768
严格模式
“use strict” 指令定义 JavaScript 代码应该以“严格模式”执行。
为什么使用严格模式
严格模式中不允许的事项
对未来的保障
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
1.严格模式放到script标签顶部 代表真个区域是严格模式的，放到代码块中，代表代码块是严格模式
2.在严格模式下 变量（对象，数组） 不声明就使用，不允许
3.删除对象或者变量是不行的，delete 不让用
4.严格模式下不能使用8进制声明
5.有一些转译字符不能使用
6.未将来保留一些关键字不能用
*/
"use strict"
x = 100
console.log(x)
var x;
var y
y = 100
console.log(y)
var a = 100
console.log(a)
//定义函数
function demo(){
// "use strict"
// b = 12345
// console.log(b)
}
//调用函数
demo()
//不能在严格模式下使用
// delete a
//声明8进制
// var c = 077
// var c = 0xff
// console.log(c)
// var demo = '\0mo\nk\ey\r\taaa'
// var demo = '\010'
// console.log(demo)
var public = 'aa'
console.log(public)
</script>
</body>
</html>
JavaScript提升
JavaScript 声明会被提升
用 let 或 const 声明的变量和常量不会被提升
JavaScript 初始化不会被提升
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
"use strict"
x = 100
console.log(x)
// let x
// const x = 'a'
// var x
//var 声明的变量可以提升，let const 不可以提升
let a
a = 10
console.log(a)
var b = 10
</script>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 【前端从入门到精通：第十一课： JS基本语法】
发表评论 取消回复