js初识＋简单案例

Posted 2021-06-28 coaxme

表单提交的缺点:
(1) 表单提交默认跳转
(2) 数据传输过程中 网速较慢时 用户体验极差
(3) 无法判断提交的数据格式是否正确
所以js最初是用来做提交验证的

十天成型 (JS弱类型的语言)

javascript 是一种直译型，弱类型的脚本语言。它是一个轻量级，但功能强大的编程语言。js需要靠事件驱动，依靠其他语言，js必须在html中被引用

弱：
1.变量在声明的时候不区分数据类型
2.数字不分整型和浮点型
3.undefined在其他语言不存在，变量一般要求声明即赋值
4.结尾可以不写分号

---

JavaScript 控制了网页的行为

JS组成：
ECMAScript 基础语法,语法规范 1.0 2.0 3.0 5.0 6.0(ES6)
BOM Browser Object Model浏览器对象模型，提供与浏览器交互的方法和接口
DOM Document Object Model文档对象模型，提供访问和操作网页内容的方法和接口

js的三种引入方式👇
1.外部js。
注意：script标签做引入作用时，里面写东西不执行；
2.内联js。
3.内部js。

JavaScript 可以通过不同的方式来输出数据：
使用 document.write() 方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。
使用 console.log() 写入到浏览器的控制台。
使用 innerHTML 写入到 HTML 元素。

JS的三种打印方法(完成某个特定功能的工具)
1.弹窗打印
alert(‘xxxx’);需要用户确认
prompt("");
confirm("");
2.页面打印
document.write(‘xxxxx’);可以在页面(文档)中写入一段内容
document.write也可以识别标签。
3.控制台console打印
console.log(); console.info();console.table()等等

注意👇
document.write(hello);
报错 ReferenceError: hello is not defined
在JS中单词都要有一定的代表意义 (a.官方给定的 b.用户自定义的), 否则会报错
用法👇
document.write(“hello”);字符串(描述一段文本)
document.write(“

hello

”);
document.write(100+200); 数字(计数 计算)
document.write(true); 布尔值(true|false)
document.write(false);

	console.log()  在控制台打印一段内容(不会影响原页面)
	console.log("hello JS");
	console.log(100);
	console.log(true);
	
	alert()   警告框  弹出框
	alert("hello world");
	alert(100);

document.write中可以打印html结构，如果原样输出需要转码
&nbsp；一个英文大大小的空格
&emsp；全角空格
&ensp；半角空格
&copy；版权
&lt；<
> >

变量：存储数据的容器，方便后续继续使用

方法1.先声明再赋值（此写法只有js支持）
方法2.声明的同时赋值
方法3.一次声明多个变量并赋值

变量命名规范
(1) 由数字 大小写字母 _ $组成,但是不能以数字开头(2)不能包含空格中文和特殊字符(3)不能使用关键字(在js中已经有特殊意义)和保留字(现在没有任何用途,将来可能被用作关键字)(4)严格区分大小写(a和A是两个不同的变量)(5)驼峰式命名法小驼峰todayIsMonday大驼峰TodayIsMonday（建议：语义化命名、最好不要用拼音、驼峰命名或下划线、$不要多用）

如何交换两个变量的值
1.使用第三方进行交换

JS数据的类型
1.字符串（string）：双引号或单引号包起来
2.数字（number）
3.布尔值（boolean）：表对错（true、false）
4.null（空对象）：声明变量不赋值，就需要给null，但类型是object；获取元素获取不到也会返回null
5.undefined：声明变量不赋值，也不给空值就是undefined a.默认值也是undefined
6.数组（array）
7.对象object**

js中的两个特殊值
NaN Infinity JS中的两个特殊值(number)
1.NaN 非数字(not a number)
var a = “1a”;
var b = 2;
var c = a * b;
console.log(c, typeof NaN); // NaN,Number
2.Infinity 无穷；无限大；无限距
console.log(-1/0,typeof Infinity);

判断数据类型typeof

算数运算符
＋ - * / %

自增++和自减–
++a 加后取值，先执行加法运算,再取值
var a = 10；
console.log(++a);//11
console.log(a);//11
a++ 加前取值 ,先取值,再执行加法运算
var a = 10；
console.log(a++);//10
console.log(a);//11
–a, a–

案例：输入框思路👇
1.获取对象
2.绑定点击事件
2.1获取输入框的值
2.2把值转为数字
2.3进行计算
2.4把计算结果放入结果框