第一天
目标
-
了解
计算机语言
js简介
js发展史
-
工具
vscode一些插件
-
掌握
js的用法
js的内容输出方式等
进制
- 十进制 0123456789
- 二进制 01
- 八进制 01234567
- 十六进制 0123456789 abcdef
11
直接写11 告诉计算机 这是十进制
二进制 0b开头
八进制 0开头
十六进制 0x开头
二进制转十进制
00001000 => 8
-
从右往左 最右边是 第0个
76543210
00001000 => 0乘以2的0次方+0乘以2的1次方+0*2的平方+ 1乘以2的3次方 = 8
十进制转2进制 转八 转 十六 => 除以2 或者八 或者 十六 从下往上连起来
js 是解释型的 不需要编译
轻量级的脚本编程语言
JavaScript
- ecmascript
- dom
- document object model
- bom
- browser object model
ECMAScript
规定了javascript的语法
- 5
- 6
- 7
现在发展到es13了 基本每年一个版本
js三种引用方式
行内
-
a标签
-
在href 属性上进行书写
<a href="javascript:js代码"></a> javascript 全小写 外边是一对双引号 里边要写一对单引号 外边是一对单引号 里边要写一对双引号 不能出现 一对单引号里边写一对单引号 不能出现 一对双引号里边写一对双引号 会报错 原因是 当一个单引号或者双引号找到另外的一个之后 后边就不管了
-
-
非a标签
1. 需要用户去触发 2. 在标签上增加一个on前缀的属性 on 在什么至上 click 点击 => onclick 语法 <div οnclick="js代码"></div> 和a标签的区别: 不需要 javascript: 而是用户触发执行js代码
ps: 注意事项
<!-- 思考 a标签加上 onclick 问 href 和onclick 谁的优先级高 -->
<a href="javascript:alert(00544)" οnclick="alert('嘎嘎')">红鲤鱼绿鲤鱼与驴</a>
<!-- onclick 高于href -->
内联 内嵌
<script>
alert(123);
alert('hello world');
alert("44944");
</script>
- 需要在head 或者body中加一对script标签
- 然后在里边写js代码
可以写在 head 中 也可以写在body中 也可以都写 一个页面可以有多对script标签
不需要用户触发才执行js代码 而是打开页面自动执行
推荐大家把script标签写在body的末尾 后边详细学习
js代码 遵循从上到下的一个执行顺序
外链
- 把js代码单独写到一个 .js后缀的文件中
- 在html中引入这个.js文件
<script src=".js文件路径"></script> 注意事项 如果外链 那么 script标签中间不要写任何内容 没有意义 比如 <script src=".js文件路径">alert(666)</script> 没有意义 一个html 可以链接 n多个js 文件 执行顺序: 从上到下执行 跟内联 一样 都是打开页面自动执行,不需要用户去触发它
第一个js代码
以后写代码 除了中文 所有的输入法 通通都是英文 半角
语法:
alert('文本内容');
文本内容如果是纯数字 可以不用加'' 比如alert(666);
文本内容如果不是纯数字 可以加单引号 也可以是双引号 alert('haha')
alert("haha");
结果:
会出现一个提示框,提示框的内容就是括号里的内容
第二天 笔记
复习
js的三大重要组成部分 重点
-
DOM
文档对象模型 document object model
一个.html就是要一个文档 一个文档有很多标签
通过js 去添加 删除 修改标签 属性 及标签内容
-
BOM
浏览器对象模型 browser object model
通过js操作浏览器 获取自己想要的内容
-
ECMAScript
JavaScript 语法
ES13
ES5 ES6 ES7
js三种使用方式 重点
- 行内
- 非a标签 div οnclick="js代码"
- a标签 a href="javascript:js代码"
- 内联
- script
- 外链
- script src
js注释 重点
不影响代码的运行
帮助我们更好的阅读代码
把不用的代码 注释掉
- 单行注释 // ctrl+/
- 多行 /**/
js 输出语句
- alert();
- console.log();
- document.write();
区别:
1. alert();弹框体验太差 1. document.write(); 将内容输出到页面上 可能会破坏页面的结构
上面的两个的共同点就是 你给我的我给你输出 仅仅是输出
- console.log(); 建议使用这个 这个有个好处 我能获取更详细的信息 后边学完数据类型以后 给大家演示
输入语句
- prompt('提示内容','默认内容');
变量
飲料 50 打車 40 吃飯 180 看電影 150 計算消費比例 饮料 50 / (50+40+180+150) 打車 40 / (50+40+180+150) 吃飯 180 / (50+40+180+150) 看電影 150 / (50+40+180+150) 设 x = 50+40+180+150 計算消費比例 饮料 50 / x 打車 40 / x 吃飯 180 / x 看電影 150 / x 定义变量 var 变量名 = 值; var num = 666; # 把666放到一个名字叫num的箱子里 var 定义变量的关键词 num 变量名 = 不是我们生活中的等号 赋值符号 也就是把右边的给到左边 666 值 放到箱子中的值
变量的命名规则和规范
// 规则
// 必须遵守
// 1. 变量名只能是 字母a-zA-Z 数字0-9 下划线_ $(美元) 组成
// 2. 变量名不能以数字开头
// 3. 严格区分大小写
// 4. 不能是关键字(正在用的)和保留字(将来要用的)
var num = 100;
var NUM = 200;
console.log(num); // 100
// 规范
// 可以遵守 可以不遵守 最好遵守
// 1. 变量名尽量有意义 不能起名 aaa bbb ccc
// username user_age
// 2. 变量名尽量用小驼峰命名法或者 大驼峰
// 小驼峰 第一个单词首字母小写 后面每个单词首字母大写
// userName userAge
// 大驼峰 每个单词首字母大写
// UserName UserAge
// 3. 下划线命名法
// user_name user_age
// 4. 不能用中文
数据类型
-
基本数据类型
-
数值 Number
- 整数 100
- 浮点数 100.5
- 科学计数 100e2
- 二进制 八进制 十六进制
- Infinity -Infinity 正无穷 负无穷
- NaN
-
字符串 String
被引号包过的内容就是字符串
''
""
``
都是成对出现 一旦找到另外一个 整个字符串结束
' " ' " => 绝对不可以
-
布尔类型 Boolean
- true
- false
-
undefined Undefined 空
-
空 Null
null
-
-
复杂数据类型
字面量
一个数值 一个字符串 true都是一个字面量
// 1. 数值字面量 1 1.23 0xff 0b1010 0o767 // 2. 字符串字面量 'hello' "hello" `hello` // 3. 布尔字面量 true false // 4. null字面量 null // 5. undefined字面量 undefined
#### 数字的范围
// alert(Number.MAX_VALUE); // 注意大小写
// alert(Number.MIN_VALUE); // 注意大小写
isNaN（）
NaN Not a Number 非数字
// isNaN() 判断一个值是否是NaN 非数字
console.log(isNaN(666)); // 666 是数字 所以结果是false
console.log(isNaN('test')); // test 不是数字 所以结果是true
字符串 重点
-
引号的嵌套
''
""
`` 能解析变量 里边的内容原样显示
嵌套: 一对单引号中包裹一对双引号或者一对反单引号 一对双引号中包裹一对单引号或者一对反单引号 一对反单引号中包裹一对双引号或者一对单引号 注意: 拒绝交叉嵌套
// var name = '陌上人如玉,'公子'世无双'; // 报错 // var name = '陌上人如玉,"公子"世无双'; // 对 // var name = '陌上人如玉,`公子`世无双'; // 对 // // var name = '陌上人如玉,"公子'世无双"; // 报错
-
转义字符
\n 换行 \t tab键 \\ 原样显示\
-
字符串的长度
字符串.length;
- 字符串的拼接
// + 两边如果都是数字 那么相加 // + 左右只要有一个是字符串 那么就是拼接 // 拼接就是连在一起
查看数据类型
// 变量
// 一个变量只能存储一个值
//放进来一个会替换上一个
// 变量中可以放任意类型的数据
// 当我们不确定变量中存储的是什么类型的数据时，
// 可以使用工具来查看 里边的数据到底是什么类型
// typeof 查看数据类型
// 语法:
// typeof 变量名
// typeof 字面量
// typeof(变量名或者字面量);
// 得到 一个字符串 表示变量中存储的数据类型 或者字面量的类型
// var age = 18;
// console.log(typeof age); // number
// console.log(typeof 18); // number
// console.log(typeof(18));// number
// var name = 'zs';
// console.log(typeof name); // string
// console.log(typeof 'zs'); // string
// console.log(typeof(name));//
// var isMan = true;
// console.log(typeof isMan); // boolean
// console.log(typeof false); // boolean
// console.log(typeof(isMan)); // boolean
// var test = undefined;
// console.log(typeof test); //undefined
// console.log(typeof undefined);// undefined
// console.log(typeof(test));// undefined
// var test2 = null;
// console.log(typeof test2); // object
// console.log(typeof null); // object
// console.log(typeof(test2)); // object
// null 是一个特殊的 object
// number 数值
// string 字符串
// boolean 布尔值
// undefined undefined
// object null 对象
// console.log(typeof typeof true); // string
// console.log(typeof 10+20); //number+20 = number20
console.log(typeof(10+20)); //number
</script>
扫一扫
3202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
