1、什么是js
<!--
1.什么是js
js的全称是：JavaScript，是web标准中的行为标准，主要负责网页中内容的变化
js和python一样是脚本语言
2.js代码写在什么地方
a.内联js - 写在标签的事件相关属性中，例如：onclick属性
b.内部js - 写在script标签中。script标签可以放在head和body
c.外部js - 写在一个js文件中，然后再在html中通过script标签导入
console.log() 相当于python中的print
window.alert() 弹出弹框
3.js能做什么
a.可以修改标签内容
b.修改标签属性
c.修改标签的样式
d.添加网页内容
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--外部js
在script标签的src中设置要导入的js文件路径（可以是本地的，也可以是网络的）
-->
<script type="text/javascript" src="js/index.js">
</script>
<!--内部的-->
<script type="text/javascript">
//在这儿写js代码
window.alert('内部js')
</script>
</head>
<body>
<!--内联的-->
<button onclick="window.alert('你好')">按钮</button>
<script type="text/javascript">
index = 0
while(index < 100){
document.write('<div id="" style="background-color: hotpink; width: 100px; height: 100px; margin-left: 10px; margin-top: 10px;"> </div>')
index += 1
}
document.write('<div>我是div</div>')
</script>
<p id="p1">我是段落!</p>
<img id="img1" src="img/luffy2.png"/>
<button onclick="document.getElementById('p1').style.color = 'red'">修改颜色</button>
<button onclick="document.getElementById('img1').src = 'img/luffy1.png'">修改图片</button>
<button onclick="document.getElementById('p1').innerText = 'hello js!'">修改内容</button>
</body>
</html>
2、js基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.注释
//单行注释 - 在注释前加两个斜杠
/* 多行注释
* 第二行
* 第三行
*/
//2.标识符
//由数字、字母、下划线、和$组成，数字不能开头，命名一般不用$,$有特殊功能
//3.关键字
//for, in, while, if, else, true, false, var, function等， 有特殊功能的标识符都是关键字
//4.数据类型和字面量
//a.数据类型和字面量
//Number（数字）、String（字符串）、Boolean（布尔）、Array（数组）、Object（对象）、Function等
//Number - 23，12.34（支持科学计数法），NaN（不存在的数字）
//String - 表示所有字符串， 用单引号或者双引号引起来：'abc', "abc"
//Boolean - 只有true和false两个值
//数组 - 相当于python中的列表
//对象 - 相当于python中的字典+对象；{属性名:属性值,属性名2:属性值...},属性值可以是任何类型；
//属性名可以使用引号也可以不使用引号
//Function - 相当于python中的函数
//b.查看类型和类型转换
//查看类型：typeof
console.log(typeof(100))
//类型转换：类型名（）\parseInt()\paresFloat()
</script>
3、变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.基本语法
//格式1：变量名 = 值
//格式2：var 变量名 = 值
//单独声明一个变量
name = '小明'
//同时声明多个变量赋一样的值
a = b = c = 10
//同时声明多个变量赋不同的值：注意，使用var声明变量的时候，可以不给变量赋初始值，默认是underfined
</script>
4、运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持：数学运算符、比较运算符、逻辑运算符、赋值运算符、位运算符
//1.数学运算符：+,-,*,/,%,++,--(和python比少了整除和幂运算，多了++，--)
//+,-,*,/,%和python一样
//++（自加1）, --(自减1)
//变量++、++变量 - 让变量自己的值加1
//变量--、--变量 - 让变量自己的值减1
//2.比较运算符：>,<,>=,<=,==,!=,===,!==
//结果都是布尔
//比较大小和python一样
//==判断值是否相等，!=判断值是否不相等
//===判断值和类型是否相等，!==判断值和类型是否不相等（相等于python的==和！=）
//3.逻辑运算符：&&(逻辑与)、||(逻辑或)、!(逻辑非)
//运算规则和python一样
//4.赋值运算符：=，+=， -=，*=，/=，%=
//运算规则和python一样
//5.位运算符：&, |, ~,^
//和python一样
//6.复合运算和python一样
//7.三目运算符
// ?: - 条件语句?值1:值2 （条件语句成立结果是值1，否则是值2）
</script>
5、分之结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中的分之结构有两种：if语句、switch语句
//1.if语句
/*
if(条件语句){
条件语句成立执行的代码段
}else if(条件语句2){
条件语句2成立执行的代码段
}else if(条件语句3){
条件语句3成立执行的代码段
}else{
条件语句不成立执行的代码段
}
* */
//2.switch语句
/*
a.语法：
switch(表达式){
case 值1:{
代码段1
}
case 值2:{
代码段2
}
case 值3:{
代码段3
}
...
default:{
代码段4
}
}
注意：case后面的{}可以省略，代码段也可以没有
b.执行过程：先计算表达式的结果，然后再从上往下一一和每个case后面的值进行比较，判断是否相等；
找到第一个和表达式的结果相等的case，然后将这个case作为入口，依次执行后面的所有代码段
直到执行到最后一个代码段或者遇到break才结束
如果表达式的结果和每个case的值都不相等，就直接执行default后面的代码段（将default作为入口）
* 注意：default一般放在最后
* * */
</script>
6、循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中的循环结构有两种：for循环、while循环
//1.for循环
//1)python中for循环：for-in
/*
for(变量 in 序列){
循环体
}
注意：不管序列是什么类型，变量取得都是下标/属性名
* */
//2)c的for循环
/*
a.语法:
for(表达式1;表达式2;表达式3){
循环体
}
b.执行过程相当于下面的while循环:
表达式1
while(表达式2){
循环体
表达式3
}
* */
//2.while循环
//1)python的while循环
/*while(条件语句){
循环体
}
*/
//2)c的do-while
/*
do{
循环体
}while(条件语句)
执行过程：会先执行一次循环体，然后才去判断条件语句是否为true
* */
</script>
7、函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*function 函数名(参数列表){
}*/
//a.不支持关键字参数
//b.不支持不定长参数
//c.不支持多个返回值
//2.声明函数的时候就是声明类型是function的变量
//3.匿名函数
/*
function(参数列表){
函数体
}
注意：如果函数体重没有return，函数的返回值是underfined
* */
</script>
