<script>
alert('hello world')
</script>
我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。如果先加载的JavaScript 期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效。因此,将JavaScript代码放在HTML页面的底部附近通常是最好的策略。
代码写在以.js结尾的文件里 通过script标签,引入到html页面中。
<body>
<!—— 通过src引入外部js 文件 ——>
<script src="my.js"></script>
</body>
注意事项
1.script标签中间无需写代码,否则会被忽略!
2.外部avaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML也会更加易读,因此这是个好的习惯。
目标:能写出常见JavaScript输入输出语法
输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。
输出语法:
语法1:
document.write('要出的内容')作用:向body内输出内容 如果输出的内容写的是标签,也会被解析成网页元素
语法2:
alert('要出的内容')作用:页面弹出警告对话框注意
语法3:
console.log('控制台打印') 作用:控制台输出语法,程序员调试使用
输入语法:
prompt(‘’)
变量
let age=18,
可以‘凤凰古城房价很高’+‘反对广泛化工等级很高v就’
得到合并的语句
document.write(“我今年‘+age+’岁了‘)
var声明
数组
let arr=['10','20',30]
const常量
常量声明必须赋值
弱数据类型语言js
模板字符串
语法
”(反引号)在英文输入模式下按键盘的tab键上方那个键(1左边那个键)内容拼接变量时,用${}包住变量
document.write(`大家好,我叫${name},今年${age}岁 `)
bool underfined null等等~
undefined 表示没有赋值
null表示赋值了,但是内容为空
1.布尔数据类型有几个值?
true和false
2.什么时候出现未定义数据类型?以后开发场景是?
定义变量未给值就是undefined
如果检测变量是undefined就说明没有值传递过来3.null是什么类型?开发场景是?
空类型
如果一个变量里面确定存放的是对象,如果还没准备好对象,可以放个null
typeof x
类型转换
JavaScript是弱数据类型:JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。
坑:使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。console.log('10000' +'2000')//输出结果100002000
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。规则:
+号两边只要有一个是字符串,都会把另外一个转成字符串
除了+以外的算术运算符 比如—*/等都会把数据转成数字类型缺点:
转换类型不明确,靠经验才能总结小技巧:
+号作为正号解析可以转换成数字型任何数据和字符串相加结果都是字符串
显式转换
转换为数字型
Number(数据) 转成数字类型
如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字NaN也是number类型的数据,代表非数字
parselnt(数据) 只保留整数 parseFloat(数据) 可以保留小数
let str = '123'
console.log(Number(str))
console.log(Number('pink'))
// Let num=Number(prompt('输入年薪'))
// Let num = +prompt('输入年薪')
// console.Log(Number(num))
// console.Log(num)
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('12.94px'))
console.log(parseInt('abc12.94px'))
console.log(parseFloat('12px')) // 12
console.1og(parseFloat('12.34px'))// 12.34
console.log(parseFloat('12.94px')) // 12.94
console.log(parseFloat('abc12.94px')) // 12.94
下面可能出现什么问题?如何解决
letnum1=prompt(请输入第一个数值:)
letnum2=prompt(请输入第二个数值:)
alert(`两者相加的结果是:$num1+num2}`)
分析:
因为prompt获取过来的是字符型,所以会出现字符相加的问题prompt如果出现相加记得要转为数字型,可以利用+最简单letnum1=+prompt(请输入第一个数值:)
letnum2=prompt(请输入第二个数值:)
alert(`两者相加的结果是:num1+num2}`)
<script>
let price = +prompt('靖输入商品价格:')
let num = +prompt('请输入商品数保:')
let address = prompt('请输入收获地址:')
// 2.计算总额
let total = price * num
// 3.页面打印渲染
document.write(`
<table>
<tr>
<th>商品名称"th>
<th>商品价格" th)
<th>商品数量</th>
<th> 总价 </th>
(th>收货地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元〃td>
<td>${address}</td>
</tr>
</table>
`)
</script>
赋值运算符
+= -= /= *= =
一元运算符
正负号 自增
let i=1
console.log(i++ + ++i +i)
//答案为7
比较运算符
NaN不等于任何,包括他自己
他有隐式转换’2‘可以变成2
比较运算符:
> : 左边是否大于右边
<: 左边是否小于右边
>=:左边是否大于或等于右边
<=:左边是否小于或等于右边
==:左右两边值是否相等
===:左右两边是否类型和值都相等
!==:左右两边是否不全等
比较结果为boolean类型,即只会得到true或false
对比
=单等是赋值
==是判断
===是全等
开发中判断是否相等,强烈推荐使用 ===
<script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
//比较运算符有隐式转换把'2'转换为2双等号只判断值
console.log(2 == '2') // true
// console.Log(undefined === nuHL)
// ===全等判断值和数据类型都一样才行
//以用嬲宠否指等请用===(
console.log(2 === '2')
console. log(NaN === NaN) // NaN 4、F } ff 何人.6Mt育己
console.log(2 !== '2') // true
console.log(2 != '2') // faLse
console. log('---------------------------')
console.log('a' < 'b') // true
console.log('aa' < 'ab') // true
console.log('aa' < 'aac') // true
console. log('---------------------------')
</script>
逻辑运算符
&& || !
优先级 | 运算符 | 序 |
1 | 小括号 | () |
2 | 一元运算符 | i - ! |
3 | 算数运算符 | 先*/%后+- |
4 | 关系运算符 | > >= < <= |
5 | 相等运U符 | == != === !== |
6 | luo辑运算符 | 先&&后II |
7 | 配值运算符 | = |
8 | 逗号运算符 | , |
• 一元运算符里面的逻辑非优先级很高
•逻辑与比逻辑或优先级高
区别:
表达式:因为表达式可被求值,所以它可以写在赋值语句的右侧。
>表达式 num = 3 + 4
语句:而语句不一定有值,所以比如alert。for和break等语句就不能被用于赋值。
>语句 alert()弹出对话框console.log()控制台打印输出
判断
if(){}
else{}
else if(){}
条件?满足的代码:不满足的代码
switch(){
case : break
case : break
default: break
}