原生js语法（一）
原生js学习笔记
- 内容中的链接是相关的学习链接
- 是学习过程中的记录在代码中
开发环境配置
-安装HBuilder：HBuilder快捷键：
- 中途换行“Ctrl+Alt”
第一个HTML代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
// script标签用于引入js包，src值为js的路径
<script src="index.js">
</body>
</html>
</html>
- 小技巧：HBuilder中使用“Enter”快捷键可以快速补全代码。
如 输入sc+"Enter"键生成script标签,上述将代码写在html中，不推荐。更好的方法是写在一个文件中，再在html中引用js文件
第一个js代码块hello world
console、alert函数
// console.log方法用于打印，与浏览器F12控制台配合可以对Js进行调试
console.log("hello world");
// alert方法用于显示带有一条指定消息和OK的警告框
alert("error");
规则
- 每个语句后缀加上符号;
- 严格区分大小写
变量命名
// 以var开头，变量未赋值在控制台打印结果不会显示
var name = "hello js";
console.log(name);
变量命名规则
// 变量命名以值意义命名为英文，可以使用驼峰命名
var fontColor = "red";
// 可以使用下划线命名
var font_color = "blue"
变量简单运算
// 变量的运算
var a = 1;
var b = 2;
var c = a + b;
console.log(c);
常量
// 常量使用const关键字命名,不能变化的数据用常量来储存，不能改变常量的值
const Five_SECONDS = 100;
console.log(Five_SECONDS);
基本数据类型
// 数据类型
// 布尔值 true 和false
var visible = true;
var isTrue = false;
console.log(visible)
console.log(isTrue)
// 整型、浮点型
var num_a = 100
var float_a = 0.1
var negative = -100
console.log(num_a)
console.log(float_a)
console.log(negative)
// 字符串
var str_a = "hello"
console.log(str_a)
// 未定义
// notUndef等同于notUndef_1 = undefined;
var notUndef;
var notUndef_1 = undefined;
console.log(notUndef);
console.log(notUndef_1);
// 空值 null,与未定义不同，未定义是没有值，null为null值
var empty_a = null;
console.log(empty_a);
数据类型转换
// 数据类型转换
// type0f 获取数据类型
// visible是boolean类型
console.log(typeof visible);
// num_a 是 number类型
console.log(typeof num_a);
// notUndef是undefined类型
console.log(typeof notUndef);
// empty_a 是 object类型
console.log(typeof empty_a);
// str_a是string类型
console.log(typeof str_a);
// float_a是number类型
console.log(typeof float_a);
// 转换 number类型和string类型相加后为string类型
//
var result = num_a +str_a;
console.log(result);
console.log(typeof result);
// parseInt(str_b)f方法将string类型转换为number类型
var str_b = "123";
console.log(parseInt(str_b) + num_a);
console.log(str_b);
操作符、算术操作符
// 操作符 "="赋值
var x = 10;
var y = x;
console.log(y);
// A=+B 会将B转化为数字并赋值给A
var strNum = 0;
var strNum = + "3";
console.log(strNum, typeof strNum);
// ++ 会自增长1
var num_b = 8;
// 8,++先返回变量值num_b的值
console.log(num_b++);
// 9
console.log(num_b);
// ++num_b变量值自增长1
// 10
console.log(++num_b);
// 10
console.log(num_b);
// --num_b变量值自减1
// 9
console.log(--num_b);
// 9
console.log(num_b);
// num_b--返回前面的变量值9，值不变
console.log(num_b--);
// 值-1，8
console.log(num_b);
// 算术操作符,加减乘除，取余，次方
console.clear()
console.log("1+5", 1+5);
console.log("5-1=", 5-1);
console.log("3*9=",3*9);
console.log("7/2=", 7/2)
console.log("7%2", 7%2);
console.log("4 ** 2 = ", 4**2);
比较操作符号
console.clear()
console.log("1>5", 1>5);
console.log("1>=5", 1>=5);
console.log("5>=5", 5>=5);
// ==不同的类型比较值是否相等，===类型不同返回false
// true
console.log("5==5", 5==5);
// true
console.log('5 == "5"', 5 == "5");
// false
console.log('5==="5"', 5 === "5");
// true
console.log('5 === "5"', 5 === 5);
// true 值相等
console.log("undefined == null", undefined == null);
// false 类型不同
console.log("undefined === null", undefined === null);
// 逻辑操作符，与或非
console.clear();
// && 与
//真
console.log("true && true", true && true);
// false
console.log("true && false", true && false)
// 或
// false
console.log("true || false", true || false);
// true
console.log("true || true", true || true)
// 非
// false
console.log("!true", !true);
// 与链接布尔和 其他类型数据
// 返回hello
console.log('true && "hello"', true && "hello" );
// 或链接false 和 其他类型值返回default
console.log("false || 'default'", false || 'default');
// 5
var a = null;
b = a || 5;
console.log(b);
// 与第一个操作符为false，第二个值不会被打印出来.false
console.log('false && "not printed"', false && "not printed");
// 返回5,与或非会返回表达式的结果
console.log('true || "not printed"', (4+1) || "not printed");
// !一个!会将数据转换为布尔值 ,false
console.log(!4);
// !!两个!!会将其他数据转化为布尔值，true
console.log(!!4);
// 5 101
// 5 011
// 转化为二进制，5二进制101，3二进制 011， 与有0返回0，2个1返回1，5和3返回001，
// 二进制001，十进制1
console.log("5 & 3", 5 &3);
// 与 二进制计算：有一个1返回1，都是0才会返回0，这里返回111，十进制7
console.log("5 | 3", 5 | 3);
// 异或， ^相同返回0，不同返回1,返回110
console.log("5 ^ 3", 5 ^ 3);
// 取反 ~ 一般为-(num+1)对数字取反，0转化为1，1转化为0；并对所有二进制位转化，如5的二进制位有32位
// -6
console.log("~5 ", ~5 );
// -4
console.log("~3",~3 );
// 左移：对二进制整体往左移一位，右边不够用0补齐
// 5 101 左移 1010 返回10 >>
console.log("5 << 1", 5 << 1);
// 右移：对二进制整体向右移一位，左边不够用0补齐
// 5 101 右移， 0101,返回2
console.log("5 >> 1", 5 >> 1);
返回结果
Console was cleared
index.js:157 true && true true
index.js:159 true && false false
index.js:162 true || false true
index.js:164 true || true true
index.js:167 !true false
index.js:170 true && "hello" hello
index.js:172 false || 'default' default
index.js:177 5
index.js:180 false && "not printed" false
index.js:182 true || "not printed" 5
index.js:184 false
index.js:186 true
index.js:191 5 & 3 1
index.js:193 5 | 3 7
index.js:195 5 ^ 3 6
index.js:198 ~5 -6
index.js:200 ~3 -4
index.js:203 5 << 1 10
index.js:206 5 >> 1 2
三目运算符
判断条件+问号，满足条件执行冒号前的代码，不满足执行后面的。
// 三目运算符:满足条件执行冒号前的代码，不满足执行后面的
console.clear();
var temperature = 10;
console.log(temperature > 9 ? "出门" : "在家");
console.log(temperature > 15 ? "出门" : "在家");
返回值
Console was cleared
index.js:213 出门
index.js:214 在家
流程图语句模块
用let定义的变量和const定义的常量只能在语句块内部使用，var可以在全局使用.
语句块中 使用 let 定义变量.
console.clear();
// 语句块，用let定义的变量和const定义的常量只能在语句块内部使用，var可以在全局使用
// 实际最好的语句块中 使用 let 定义变量
{
var name = "啊米";
console.log(name);
let age = "20";
// 20
console.log(age);
}
// 啊米
console.log(name);
// not defined
console.log(age);
啊米
index.js:226 20
index.js:229 啊米
index.js:231 Uncaught ReferenceError: age is not defined
at index.js:231
if-else流程控制
// if-else流程控制
console.clear();
// prompt()函数让你输入框输入值
var password = prompt();
if (password === "1234"){
alert("登录成功");
} else {
alert("登录失败");
}
浙公网安备 33010602011771号