[开发工具]2021-11-08（h5高级编程day01）

1.编辑器：vscode? （live server调试插件）、hbuilder X（学习? php的时候可用到。）

2.在vscode的扩展里面，搜索live server插件，安装、重启vscode即可使用。

3.课程代码查看地址：https://gitee.com/yuweihai/class2113/tree/master。视频在阿里云盘里面可以查看。

4.js：是javascript的缩写；ES：ECMAScript的缩写（ES6+）。

5.node js：后端语言（是java? Python? php的缩写。）

6.js的使用方法：（js：组成 BOM:bower Object Model; DOM:document Object Model; EVENT:事件二阶段学习内容：ECMAScript(ES5) 5.0 ---> ECMAScript(ES6+) 6.0+）

（1）内嵌js? ? ?

script标签里 js代码 一般会把script标签放在html的头部或者是html的底部;(一般情况下 内嵌会放在底部；)

①：写在js头部，用<script></script>包裹。

②：写在body的底部，用<script></script>包裹。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?eg：如果直接在script中写alert（111），会先弹出弹框。注意：这样会阻止js的运行。

<script>
alert(111);
</script>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? eg：如果直接在script中写打印信息，不会阻止程序执行；打印非数字的内容，需要加上引号

<script>
console.log(111);
//可直接在控制台里查看输出结果(单行注释)

console.log(“我在控制台查看”);

</script>

（2）内联? ?行内（了解即可）

onclick：点击的时候执行? ?后边引号里面的代码

alert（）：弹出一个弹框，括号内的内容是弹框里面的内容

<div onclick="alert(2222)">我是div</div>

扩展：1、阻止超链接跳转

<a href="javascript:;">链接</a>

2、阻止链接跳转、并执行javascript代码

<a href="javascript:alert（333）;">链接</a>

（3）外链 ：注意 外链js之后能不能内嵌？？（不能既外链又内嵌使用js）；

总结：

js的使用方式

1.内联

2.内嵌（头部，底部（推荐）)

3.外链：外链和内嵌不能混用；

注意事项：

1.onclick

2.alert

3.console.log

4.text/javascript(了解);

5.打印非数字 需要加引号；

7.注释

1.单行注释

//单行注释? ? 快捷键是：ctrl+/

2.多行注释

/* 多行注释1

多行注释1

多行注释1*/

快捷键：ctrl+shift+A

8.变量：可以变得值；（很重要，要多学习！！！）

一、书写方法：var? 变量名（自定义） =? 变量值；

可用于做js运算

eg:

<script>
console.log(1+2);
console.log(1*2);
console.log(1/2);
</script>

eg:? 延伸

<script>
//铅笔  价格5元（变量）
   var price = 6;
        // 小明 3个
   console.log(3*price);
        // 翠花 2
   console.log(2*price);
        // 小王4
   console.log(4*price);
</script>

9.变量的命名规则：只能用数字，字母 ，下划线 $符号命名；（var 变量名 = 变量值;? 其中? “ = ” 号是? “ 赋值?” 的意思。）

1.字母命名 js区分大小写；

var Str = "world";
console.log(str);
//控制台会报错，因为S是小写的。
console.log(Str);
//书写正确，控制台正常显示

2.数字命名 ：数字不能作为开头；不能纯数字；

var 1 = 10;
console.log(1);
//控制台会报错，变量名使用了纯字母

var a1 = 10;
console.log(a1);
//正常显示

var 1a = 10;
console.log(1a);
//控制台会报错，变量名使用了字母开头

3.下划线 、$ ;

var s_tr = "hello";
console.log(s_tr);

4.变量名命名时，中间不能有空格 ；

var user name = "张三"；
console.log(user name)

//里面的user name  的命名方式是错误的，因为中间有空格

5.小驼峰命名

eg：

var userName = "张三"；
console.log(userName);

6.大驼峰命名

// var UserName = "张三";

// console.log(UserName);

7、用中文命名；(不推荐)

// var 中国 = "hello";

// console.log(中国);

六、命名尽量 语义化；

// var password = "123456";

// var username = "李四";

// var yonghuming = "zhangsan";

// console.log(yonghuming);

// var a = 10;

// var b = 20;

// 注意 ：所有的符号都必须是英文的！！！

二、变量的赋值：var a = 10;

1.定义一个a变量

var a;

2.给 a 赋值一个值为10

?a = 10；

console.log(a);

3.只声明 不赋值

?var a;

?console.log(a);

//undefined :没有值的意思 ；

4.如果两个变量名相同 后一个会覆盖前一个值；

?var a = 10;

?var a = 20;

?console.log(a);

5.声明多个变量；

?var a = 10;

?var b = 20;

?var c = 30;

console.log(a,b,c);

var a = 10,b = 20,c = 30;

console.log(a,b,c);

6. var a,b,c;

?a = 10;

?b = 20;

c = 30;

console.log(a,b,c);

7.变量互换：

var a = 10;

var b = 20;

// 如果需要2个变量互换，那么可以用临时值存储一个变量；

var c = a; //c的值就是 10； c 就是一个临时的值 来存储a变量的值；

a = b;

b = c;

console.log("a:",a,"b:",b);

三、变量的类型：

1.基本数据类型 （简单数据类型）;

2.复杂数据类型（引用数据类型）了解 对象 数组 函数....

基本数据类型：

1.数字：一切数字 都是数字类型；定义的时候不需要加引号（整数、十六进制：0x开头、八进制：0开头、二进制：0b开头、js里有一个特殊的数字类型 NaN:not a number;（

var a = NaN;

console.log(a);

））

2.字符串类型 （string）：引号包裹的字符就是字符串，引号可以是双引号 也可以是单引号；

扩展：

“\”转义字符：把有功能的字符转成没有功能的字符；

var str = "我是名字是\"张三\"";

?console.log(str);

3.布尔值：布尔类型（boolean） ；真：true 假：false

4.undefined：没有值

typeof 的所有结果都是字符串类型

5.null：空的意思 它是一个null类型；

6.symbol：独一无二的值；

二、复杂数据类型（了解）

// 对象

// var obj = {

// name:"张三",

// age:20

// }

// console.log(obj);

// console.log(typeof obj);

// 数组

// var arr = ["张三","李四","王五"];

// console.log(arr);

// console.log(typeof arr);

// 正则

// let reg = new RegExp();

// console.log(reg);

// console.log(typeof reg);

// 函数

// function test(){

// console.log(123);

4、1. 判断数据类型 typeof 返还的值是一个字符串；

// var a = 10;

// console.log(typeof a);

// 2.isNaN: 判断一个变量不是一个数字；

// 如果是数字就是false ，如果不是数字就是true

// 判断的结果是Number（后面说）之后转换之后的结果；

var str = 43243; // 会转成数字之后再判断，自动转换；

var res = isNaN(str);

console.log(res);

其他类型转换成数字类型：

// var str = "123"; //字符串

// var str = "123fdsa";

// console.log(str);

?1.Number:装换 ,只能转纯数字

// var num = Number(str);

// console.log(num);

?2.paseInt：可以把字符串转成整数的数字；

// 1.只能转整数

2.可以转换非纯数字 （必须以数字开头）;

// var str = "456.78";

// var str = "789abc";

// // var str = "abc789";

// console.log(str);

// var num = parseInt(str);

// console.log(num);

?3.pareFloat：可以把字符串小数转成 数字类型；

// 只能转一个小数点

// var str = "456.78dfsafsda";

// console.log(str);

// var num = parseFloat(str);

// console.log(num);

?4.非 “+”号的运算符；

// var a = "10";

// var b = "5";

// // var num = a-b;

// // var num = a*b;

// var num = a/b; // \ /

// console.log(num);

// console.log(typeof num);

一 isNaN：判断一个变量是不是一个非数字 ：变量是数字 那么 就是false 如果 是非数字 那么就是true;

// var str = 123123;

// console.log(isNaN(str)); // false;

// var str2 = "fdafdsa";

// console.log(isNaN(str2)); //true;

// 字符串的数字 或者含有 数字的字符串 ；

// var str = "456";

?1.把字符串通过 Number转换一下 得到结果

?2.再通过isNaN判断 结果 ；

?str = Number(str); //number类型

?console.log(isNaN(str)); //false

?var str = "24234afdas";

str = Number(str); // NaN

console.log(isNaN(str)) // true;

其他类型转字符串

var num = 123456;

console.log(num);

//1.toString();函数 var 结果（字符串） = 变量.toString();

var res = num.toString();

?console.log(res);

//2.String: var 结果（字符串） = String(变量);

var num = 123456;

?console.log(num);

var res = String(num);

console.log(res);

// 3 通过"+"号转成字符串 ；

// 加号的2边都是数字的时候会做加法运算 其他情况 都会做字符串拼接 ；

?var a = 10;

var b = "20";

?var res = a + b;

?console.log(res);

var a = 10;

var b = 20;

console.log(a+b);

var a = "hello";

?var b = 30;

?console.log(a+b);

?var a = "10";

var b = 20;

?console.log(Number(a)+b);

var num = 123456;

console.log(num);

var res = num+"";

console.log(res);