目录
JavaScript概述
1.什么是JS
是一种专门运行于JS解释器/引擎中的解释型脚本语言
2.JS发展史
1.1992年CMM(C--),更名为 ScriptEase
2.1995年LiveScript,更名为 JavaScript
3.1996年JScript
4.1997年网景找到了ECMA(欧洲计算机制造商联合会),网景将JS的核心模块交给了ECMA,从此JS的核心更名为ECMA Script,简称 ES
JS的组成:
1.核心 - ECMA Script
包含了JS中最基本的语法规范
2.浏览器对象模型 - BOM
Browser Objict Model
允许JS操作浏览器
3.文档对象模型 -DOM
Document Objict Model
允许JS操作HTML中的内容
2.JS的使用方式(重点)
1.浏览器控制台中输入代码并执行(测试时使用)
console.log("要输出的内容");
2.JS的使用方式
1.在元素事件中编写JS代码
事件:是用户在元素上所激发的一些操作
onclick:当用户点击元素时要做的操作
语法:
<ANY οnclick="JS执行代码">
<button οnclick="console.log('点你咋的')">点我试试</button>
2.将代码嵌入在网页的 <script></script>标记中
在网页的任意位置处,都可以嵌入一个<script></script>标记
语法:
<script>
JS可执行代码
</script>
注意:
1.一个网页中允许有若干多对 script
2.script 标记有顺序之分,先写的先被执行
3.网页加载时就执行
document.write("<h1>向网页中输出的一句话</h1>")
3.在网页中,引入外部的JS文件
1.创建一个js文件(xxx.js),并编写js代码
2.在网页上对js文件进行引入
<script src="js文件路径"></script>
注意:
1.script标记必须成对
2.在引入的标记中不允许编写其他的js脚本
<body>
<!-- 在元素事件中执行JS代码 -->
<button onclick="console.log('点你咋的');">点我试试</button>
<!-- 2.通过script标记完成JS代码的编写 -->
<script>
document.write("向网页中输出的内容")
document.write("<h1>带标记的内容</h1>")
</script>
<!-- 3.引入外部的js文件 -->
<script src="01-jsBase.js"></script>
</body>
3.JS的基础语法
1.JS都是由语句组成的
1.由运算符,关键字 或 表达式组成
2.JS总严格区分大小写
console.log('xxx');正确的
Console.log('xxx');错误的 C 不能大写
3.每条语句必须以 ; 表示结束
2.注释
单行: //
多行: /* */
4.JS中的变量和常量
1.声明变量
声明:var 变量名;
赋值:变量名=值;
声明并赋值: var 变量名=值
ex:
var uname="王小明";
console.log(uname);
var uname="隔壁老王",uage=35,ugender;
注意:
1.声明变量时,尽量使用var关键字,如果省略,也可以,单容易出问题
2.声明变量如果未赋值的话,默认值为 undefined
3.使用未声明过的变量的话,则为语法错误
2.变量名的命名规范
1.变量名不能是JS中的关键字或保留关键字
2.由字符,数字,下划线(_)以及$组成
var $ = 35;
var _age = 46;
3.变量中不能以数字开头
4.尽量不要重复
5.尽量要见名知意
6.如无特殊需求的话,尽量使用小驼峰命名法
var userName;
强调:
不能使用 name 作为变量名
3.变量的使用
1.为变量赋值
只要变量出现在赋值符号的左边,一律是赋值操作
2.获取变量的值
只要变量没出现在赋值符号的左边一律是取值
var age=35; //赋值
console.log(age); // 取值
var newAge = age; // newAge:赋值,age:取值
age = age + 35;
4.常量
1.什么是常量
一经声明就不允许被修改的数据就是常量
2.语法
const 常量名=值;
注意:
1.常量声明好之后是不允许修改的,所以一定要赋初始值
2.常量通常采用全大写形式
练习:
1.创建一个网页,名称随意
2.声明一个常量PI,值为3.14
3.声明一个常量r,表示一个圆的半径,随意赋值
4.通过PI和r计算该圆的周长,并将结果保存在变量l中
l=2*PI*r
5.通过PI和r计算该圆的面积,并将结果保存在变量s中
s=PI*r*r
6.输出 周长 和 面积
半径...的圆的周长为...
半径...的圆的面积为...
精度丢失:保留到n位小数
var 1=3.1415926
l=l.toFixed(n);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的使用方式</title>
</head>
<body>
<script>
const PI=3.14;
var r=20;
var l=2*PI*r;
// 将l保留到两位
l=l.toFixed(2);
var s=PI*r*r;
console.log("半径为",r,"的圆的周长为:",l);
console.log("半径为",r,"的圆的面积为:",s);
</script>
</body>
</html>
5.数据类型
JS中的数据类型可以分为两大类
1.基本数据类型
1.number 类型
数字类型,可以表示32位的整数以及64位的浮点数
整数:
十进制:var num=30;
八进制:var num=010;
十六进制:var num=0x21;
注意:以上数字再打印的时候都是按照十进制值进行打印输出的
小数:
小数点技术法:var num = 123.456;
指数计数法:var num = 1.4e10;
2.string 类型
字符串类型
注意:使用时,必须使用 " " 或 ' ' 引起来
JS中的字符串由Unicode字符,数字,标点组成
1.查看字符的Unicode码
var str = "张三丰";
var uCide = str.charCodeAt(0).toString(16); //5f20
var uCide = str.charCodeAt(1).toString(16); //4e09
2.如何将Unicode码转换成对应的字符
已知Unicode码:5f20
var str = "\u5f20";
console.log(str); //张
3.中文范围
"\u4e00" ~ "\u9fa5"
4.转义字符
\n: 换行
\t: 一个制表符
\": "
\': '
\\: \
document.write("Hello<br/>world"); //换行要用<br/>
3.boolean 类型
布尔类型,只用于表示真(true)或假(false)
注意:boolean类型可以参与到数字运算的,true当成1运算,false当成0去运算
var r = true + 1; // 2
var r = 3358 * false; // 0
4.查看数据类型
使用 typeof()或typeof查看变量的数据类型
var str = "Hello Word";
console.log(typeof(str)); // string
console.log(typeof str); // string
2.引用数据类型
6.数据类型转换
1.隐式转换
大部分加法运算时,如果数据类型不一致的话可以进行隐式转换
1.数字 + 字符串 : 将数字转换为字符串
var num = 15; // number
var str = "18"; // string
var r = num + str; // 1518
var r = "15" + 18 + 15; // "151815"
var r = 15 + 18 + "15"; // "3315"
2.数字 + 布尔 : 将布尔类型转换为 number
var r = 35 + true; // 36
3.字符串 + 布尔 : 将布尔转换为字符串
var r = "你好" + true; // 你好true
4.布尔 + 布尔 :
两个布尔在一起的任何运算都是将布尔先转换为number再做数值的运算
var t1 = true;
var t2 = false;
var r = t1 + t2; // 1
var r = t1 * t2; // 0
console.log(r);
注意:
如果 -, *, /, % 两端都是数字格式的字符串的话,是可以按照数字的方式进行运算的
"35" - "48" : -13
"35" - "你好" : NaN (Not a Number)
2.显示转换
1. toString()
作用:将任意类型的数据转换成字符串,并返回转换后的结果
var num = 15; // number
var r = num.toString();
var num = 15;
var r = num + ""; // 转换成字符串
2.parseInt()
作用:将任意类型的数据尽量转换成整数,如果实在无法转换的话,则返回 NaN
ex:
1. var r = parseInt("13");
结果 : 13 (number)
2. var r = parseInt("13.5");
结果 : 13
3. var r = parseInt("13你好");
结果 : 13
4. var r = parseInt("你好13");
结果 : NaN
3.parseFloat()
作用:尽量将任意类型的数据转换为小数
ex:
1. var r = parseFloat("35.7");
r : 35.7
2. var r = parseFloat("35.7你好");
r : 35.7
3. var r = parseFloat("你好35.7");
r : NaN
4.Number()
作用:将指定的数据转换成数字,只要包含非法字符的话,结果就为 NaN
ex:
1. var r = Number("35.7");
r = 35.7
2. var r = Number("35.7你好");
r = NaN
注意:
只要是在网页中获取的数据,一律都是字符串类型
练习:
1.创建网页 完成练习
2.在网页中弹出一个输入提示框
var input = [window.]prompt("提示文字");
input 变量中,保存的就是用户输入的数据
3.在输入框中输入一个数字
4.将输入的数据 +10 ,打印计算后的结果
5.根据步骤4输出的结果,使用typeof查看输入数据的数据类型
6.将输入的数据转换为数字 再 +10 查看结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 在输入框中输入一个数字
var input = window.prompt("输入一个数字");
// 将输入的数据 +10 ,打印计算后的结果
var r = input + 10;
console.log(r);
// 查看数据类型
console.log(typeof(r))
console.log(Number(input) + 10)
</script>
</body>
</html>
7.运算符
1.算术运算符
+,-,*,/, %,++(自增),--(自减)
+ : 加法,拼接
/ : 5 / 2 结果: 2.5
% : 3 % 5 结果: 3
场合:
1.倍数 或 奇偶性
2.获取某数字的最后几位
var num = 1234;
var num = parseInt(num / 10);
var shi = num % 10;
console.log(shi); // 3
++:自增运算符,在自身数据基础上只做+1操作
--:自增运算符,在自身数据基础上只做-1操作
语法:
变量++ 或 ++变量
变量-- 或 --变量
++做后缀: 变量++
要先使用变量的值,再对变量进行自增
var num = 5;
// 先输出num的值,再对num+1
console.log(num++); // 5
console.log(num); // 6
console.log(num++);
等同于
console.log(num);
num +=1;
++做前缀:++变量
先对变量进行自增,再使用变量的值
var num = 5;
// 先对num进行+1,再打印输出
console.log(++num); //6
console.log(num); //6
console.log(++num);
等同于
num +=1;
console.log(num);
练习:
1.
var num = 5;
console.log(num++); // 5(输出5 变为6)
console.log(++num); // 7(变为7 输出7)
console.log(++num); // 8(变为8 输出8)
console.log(num++); // 8(输出8 变为9)
console.log(num); // 9(输出9)
2.
var num = 5;
var result = num + ++num + num++ + num++ + ++num;
5 + (6)6 + 6(7) + 7(8) + (8)9 = 33