初识js
了解 JS
+ 在一个网页里面
=> html 表示结构
=> css 表示样式
=> JS 表示行为
+ JS 的三大核心
=> ECMAScript
-> JS 的标准, 语法
=> BOM(Browser Object Model)
-> 就是一整套操作浏览器的属性和方法
=> DOM(Document Object Model)
-> 就是一整套操作文档流的属性和方法
+ JS 的本质
=> 就是通过 JS 的语法, 让浏览器发生变换
=> 让 文档 发生变化
JS书写格式 行内式 内嵌式 外链式
JS 的书写
+ 分成三种方式
1. 行内式(强烈不推荐)a标签和非a标签行内样式
2. 内嵌式(不推荐)
3. 外链式(推荐)以后都在脚手架上书写js代码了
1. 行内式 JS 代码
+ a 标签
=> 因为 a 标签本身就有行为出现
=> 当我点击的时候, 需要区分你是跳转连接还是执行 JS 代码
=> 在 href 属性里面书写一个 javascript: JS代码 ;
<a href="javascript: alert('蔡虚坤')">点我看我名字</a>
+ 非 a 标签
=> 因为没有自己的行为, 我们需要给他加一个行为
=> 写一个 onclick 属性, 表示当点击时
=> 属性值的位置书写 JS 代码
=> <div οnclick="JS代码"></div>
2. 内嵌式 JS 代码
+ 再页面内书写一个 script 标签
+ 把 JS 代码书写再标签对内部
+ 注意: **不需要任何行为, 只要打开页面就会执行**
+ 特点:
1. 再一个页面内可以书写无限个 script 标签
=> 会按照从上到下的顺序依次执行
2. 理论上 script 标签可以放在页面的任何位置
=> 推荐放在 body 的末尾或者 head 的末尾
=> 目前推荐放在 body 的末尾
3. 外链式 JS 代码
+ 把 JS 代码写在一个 .js 后缀的文件里面
+ 再页面上通过 script 标签的 src 属性引入页面
+ 注意: **不需要任何行为, 只要打开页面就会执行**
+ 特点:
1. 和内嵌式一样
2. 当一个 script 标签呗当作外链式使用的时候, 那么写在标签对里面的内容没有意义
=> 哪怕你写了 src 属性, 但是没有引入文件, 也不能当作内嵌式使用了
接触第一个 JS 代码
+ alert('hello world')
+ 这是一段 JS 代码
+ 含义: 在浏览器弹出一个提示框, 里面右一段文本, 是 hello world
+ 注意: 写在小括号里面的需要用引号包裹, 如果是数字不需要
下面是范例
<a href="javascript: alert('蔡虚坤')">点我看我名字</a>
<a href="javascript:console.log('Hello World');">aaa</a>
<div id="std">点我一下谢谢</div>
<div onclick="console.log('点我一下谢谢')">点我一下谢谢</div>
<script>
var std = document.getElementById('std');
console.log(std);
std.onclick=function(){
alert("傻逼")
}
</script>JS注释
单行注释 /
也可以选择多行按ctrl + /
多行注释 /* 注释的内容 */
JS的输出语法
三个弹出层
JS 的输出语法
1. alert()
=> 以浏览器弹出层的形式展示内容
=> 小括号里面书写你要输出的内容
=> 只要不是纯数字, 都用引号包裹(单引号双引号无所谓)
2. console.log()
=> 再浏览器控制台打印你要输出的内容
=> 小括号里面书写你要输出的内容
=> 只要不是纯数字, 都用引号包裹
3. document.write()
=> 再页面直接写入你要输出的内容
=> 小括号里面书写你要输出的内容
=> 只要不是纯数字, 都用引号包裹
=> 特殊:
-> 直接把内容输出再页面上
-> 所以可以解析标签
<script>
//1. alert 输出内容
alert('hello world')
alert(123456789)
//2. console.log 输出内容
console.log('hello world')
console.log(1234567890)
console.log('<h1>12312</h1>')
// 3. document.write 输出内容
// document.write('hello world')
// document.write('</br>')
document.write('<h1>')
document.write(1234567890)
document.write('</h1>')
alert("再见了")
console.log("再见了")
document.write("再见了")
alert('<h1>Hello World</h1>')
console.log('<h1>Hello World</h1>')
document.write('<h1>Hello World</h1>')
</script>
JS变量
变量的命名规则和命名规范
1. 规则: 你必须遵守, 不然报错
1-1. 一个变量只能由 数字(0-9), 字母(a-zA-Z), 美元符($), 划线下(_) 组成
1-2. 一个变量不能由 数字 开头
1-3. 再 JS 中严格区分大小写
=> num Num NUm NUM 这是四个变量
1-4. 不能使用关键字或者保留字
=> 关键字: 现在 JS 语法正在使用的关键字(var)
=> 保留字: 现在 JS 还没用, 但是将来可能会用的
2. 规范: 建议你遵守, 因为大家都这样
2-1. 不要用中文命名
2-2. 变量语义化
=> 尽可能使用一个有意义的单词
2-3. 驼峰命名法
=> 当一个变量由多个单词组成的时候
=> 第二个单词开始, 首字母大写
总结：写变量名使用英文释义写就ok了
JS数据类型
JS 的数据类型
+ JS 把一个变量可以存储的各种各样的数据, 做了一个区分
+ 分成了两个大的类型
1. 基本数据类型(简单数据类型)
1-1. Number 数值
1-2. String 字符串
1-3. Boolean 布尔
1-4. Undefined 空
1-5. Null 空
2. 复杂数据类型(地址数据类型 / 引用数据类型)在堆里面开辟的，使用的是变量表示该内容的的地址
2-1. Object
2-2. Function
数值数据类型
+ 一切十进制表示的数字
+ 一切浮点数(小数)
+ 其他进制表示的数字
=> 十六进制, 以 0x 开头
=> 八进制, 以 0 开头
=> 二进制, 以 0b 开头
+ 科学计数法
=> 比较大的数字使用科学计数法表示
=> 2e5 2 * 10的5次方
+ NaN
=> Not a Number: 非数字
JS 的基本数据类型 - 字符串
+ 再 JS 里面一切使用引号(双引号, 单引号, 反引号) 包裹的内容都是字符串
+ 表示一段文本内容, 是一个字符一个字符连接起来的内容
=> 'hello'
=> "hello"
=> `hello`
+ 当你再字符串里面只写数字的时候, 也不是数值类型
=> 也是字符串类型
+ 再字符串里面, 空格是占位的
JS 的基本数据类型 - 布尔
+ 再 JS 里面, 布尔只有两个值
=> true 表示真, 再计算机存储的时候就是 1
=> false 表示假, 再计算机存储的时候就是 0
+ 再运算过程中有什么意义
=> 主要用来做判断
=> 例子:
-> a > b 如果得到 true 表示这个表达式时 真的
-> a < b 如果得到 false, 表示这个表达式是 假的
JS 的基本数据类型 - 空
1. Undefined 空
-> undefined
-> 这里本该有一个值, 但是没有, 就是 undefined
2. Null 空
-> null
-> 这里有一个值, 有一个空值
*/
/* 自我总结：undefined是啥也没有，根本没定义
null是定义了，他的值就是啥也没有 */
检测数据类型
+ 再运算的过程中, 有的数据不是我们自己写的
+ 有可能是通过运算得到的, 有可能是别人给的
+ 为了保证程序的正确运行, 我们需要检测数据变量
关键字 typeof
+ 两种用法
1. typeof 变量
=> 语法: typeof 要检测的变量
=> 返回值(结果): 以字符串的形式给你的变量数据类型
2. typeof(变量)
=> 语法: typeof(要检测的变量)
=> 返回值: 以字符串的形式给你变量的数据类型
+ 两种语法的区别
1. typeof 只能检测紧跟着的一个变量
2. typeof() 先运算小括号里面的结果, 然后使用 typeof 去检测结果的数据类型
+ typeof 的返回值
=> 注意: typeof 的返回值是一个字符串
=> 当两个及以上 typeof 连用的时候, 一定得到 string
=> 只能准确的检测基本数据类型
-> 数值: number
-> 字符串: string
-> 布尔: boolean
-> undefined: undefined
-> null: object
73万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
