js语言基础
1.js就是运行在浏览器上面的脚本语言
2.js是运行时语言,没有编译过程,相对来说安全性较低
代码在执行过程中如果出现错误,运行立马中断,后面的代码就不会执行了
3.js是弱类型语言
0.1+1.2=8.8.300000000000004
原因
js是弱类型语言 没办法将 0.1 完美的转化成 二进制进行计算
4 ks是靠事件驱动
5.js具有面向对象的特点
组成
ECMAScript 描述了js的语法规范
DOM Document OBject Model 描述了js对文档内容的操作
BOM Browser OBject Model 描述了js对浏览器的操作
js主要负责的工作
1.数据交互 DOM渲染
2,事件驱动 逻辑操作
js引入方式
1.内联引入 将 js 代码 写在script标签中
(1) 通常在body标签的末尾
(2) 通常在body标签的后面
2.外联样式 将 js 代码 写在.js文件中
通过script标签的src属性引入到html标签中'
(1) 通常在head标签中末尾引入 (在style标签上面)
(2) 通常在body标签的末尾
js输出方式
1.console.log() 控制台输出
2.document.write() 文档输出
3.弹框输出
3.1 alert() 警告弹窗
3.2 confirm() 提示弹窗
3.3 prompt()
变量
变量
可以理解为一个储存数据的容器
变量的声明
通过关键字 var 后面写上 变量名 来声明变量
数据类型
基础数据类型
1.number 数值类型
2.string 字符类型
由双引号 或 单引号 包起来的内容 叫字符串
注意!!!
同类型的引号不能嵌套
3.boolean 布尔类型
就两个值: true & false
4.undefined 未知类型
当一个变量只声明 没赋值的时候
系统会自动给变量赋值 undefined
引用数据类型
5.object 对象类型
6.array 数组类型
特殊数据类型
7.null 空
运算符
/*
运算符
*/
// 1.赋值运算符 =
var a = 1;
// 2.算数运算符
// +
// 如果两个 数值类型的值 进行运算 则为正常的加法运算
console.log(1 + 1);
// 如果数值和字符串 进行运算 字符串的拼接
console.log("3" + 1 + "2" + 4);
// - *
// 默认现将 符号两边的值 转化成 数值 再进行计算
// 只有 字符串数字 才能转化 数值类型
console.log(1 - 1);
console.log(1 - "1");
console.log(1 - "1a");
// 如果 数字 跟字母进行运算 (除了 +) 会得到一个 NaN
// NaN (Not a Number)是数值类型的 含义就是 不是数字
console.log(1 * "1");
console.log(1 * "1a");
console.log(1 / "1");
console.log(1 / "1a");
console.log(1 / 0);
// 除数不为 0 否则得到 数值类型的 Infinity (无穷)
// % 取余号
// 符号 左边的数字 除以 符号右边的数字 除不尽的 余数
console.log(10 % 3);
// 100元 一串三元 最多吃多少串
console.log((100-100 % 3) / 3)
// 关系运算符
// > < <= => == === != !==
// 关系运算符 结果 一定是布尔值 (true / false)
// 等式成立 ture
// 等式不成立 false
console.log(1 > 0);
console.log(1 < 0);
// 等于 和 全等
// 全等要求 除了值相等外 数据类型必须一样
console.log(1 == "1");
console.log(1 === "1");
console.log(0 == false);
console.log(1 == false);
console.log(2 == false);
console.log(3 == false);
// 所有 非0 的数字 布尔值 都是true
// 数字0 布尔值 false
// 但是 只有 0 和 1才能转化成布尔值
console.log("0" == false);
console.log("as" == false);
// 所有字符串
// 字符串做判断
// 0~9 < A~Z < a~z
// 判断原则参考 ASCII码表中 其相对应的 十进制数字大小
console.log( 0 > "a");
console.log("a" > "b");
console.log("a" > "B");
console.log("A" > "a");
console.log("A" > "B");
console.log("A" > "Z");
// 逻辑运算符
// && 且
// || 或
// ! 非
// && 符号两边的判断结果 必须都是真
// 如果有任意一个不是真 &&的结果都是 false
console.log(1 > 0 && 2 > 1);
// || 符号两边的判断结果 有一个是真 || 的结果就是真
console.log(1 > 0 || 1 < 0);
// ! 相反
console.log(! false);
复合运算符 += -= /= *=
a += 20; 等价于 a = a + 20;
a -= 20; 等价于 a = a - 20;
a *= 20; 等价于 a = a * 20;
a /= 20; 等价于 a = a / 20;
自增 自减
b++
拆分:
var a = b; //0
b = b + 1; //1
先赋值 后运算
所以 打印出来的结果 是 计算前的结果
++b
拆分:
b = b + 1;
var a = b;
先计算 后赋值
所以 打印出来的结果 就是 计算后的结果
数学方法
浏览器内置对象 数学对象 Math
Math 提供了丰富的数学计算方法
1.Math.floor();
直接舍掉小数位 取整
2.Math.cell();
取整 只要有小数位 就向上进1
3.Math.round();
四舍五入
4.Math.random() 随机数
只能随机出来 0~1 这个区间内的数字
4.2 随机0~10 区间内的 整数
m1 = Math.round(m1);
console.log(m1);
4.2 随机1~10 区间内的 整数
随机数公式
n = Math.round(Math.random() * (max - min) + min )
*/
// 1~10 随机数
var n2 = Math.random();
var m2 = n2 * 9 + 1;
m2 = Math.round(m2);
console.log(m2);
// 45~90 随机数
// var x2 = Math.random();
// var y2 = x2 * 45 + 45;
// y2 = Math.round(y2);
// console.log(y2);
基础标签操作
-
往标签中 写入文本 innerText
/*
innerText 两种用法
1. 往指定标签中 写入文本
fbox.innerText = "文本"
2. 获取指定标签中的文本
fbox.innerText
*/
// 获取标签
var fbox = document.getElementById('fbox');
// 往 fbox 中 写入文本
fbox.innerText= "hello world";// 获取标签中的文本
console.log(fbox.innerText);// 修改标签的基础样式
// 修改宽高
fbox.style.width = 100 + "px"
fbox.style.height = 100 + "px"
fbox.style.backgroundColor = 'red'
基础的元素获取
// 根据id获取元素
var inp = document.getElementById('int1');
console.log(inp);
// 获取button标签
var btn = document.getElementById('btn1');
console.log(btn);
// 绑定点击事件
btn.onclick = function(){
console.log("你好~~");
// 获取 input 输入框中的内容
console.log(inp.value)
// 获取 input 输入框中的数字
console.log(inp.value * 1)
}
// 练习 在输入框中 随意输入一个总价 点击按钮后计算最少需要多少张 100 10 1