1.什么是js

js是javascript的缩写,是web标准中的行为标准.负责网页中变化的部分

2.在哪儿写js代码

a.写标签的事件相关属性中名,例如按钮的onvliced属性
b.写在script标签中(将js代码作为script标签的内容)
注意,script标签理论上可以放在html中的任何位置,但是一般放在head或者body中

3js能做什么

a.在网页的指定位置插入标签
b.修改网页中标签的内容
c.修改标签样式

4怎么写js代码

javasscript是一门编程语言,和python是一样是一样动态语言也是脚本语言.但是和java没有关系
补充:
window.alert(信息)

js代码,在浏览器上弹出一个对话框,对话框中显示指定信息

    window.alert(信息) - js代码，在浏览器上弹出一个对话框，对话框中显示指定的信息
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
    </head>
    <body>
        <!--1.js代码写在哪儿-->
        <!--<script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            //在这儿写js代码
            window.alert('python and js!')
        </script>
        <button onclick="window.alert('你好!')">点我啊~</button>-->
        
        <h1>我是标题</h1>
        <!--2.js能做什么-->
        <!--a.插入内容-->
        <script type="text/javascript">
            arr = ['海贼王', '火影', '魁拔', '一拳超人']
            for (index in arr){
                mesaage = '<h1>'+arr[index]+'</h1>'
                //在网页中添加内容
                document.write(mesaage)
            }
        </script>
        
        <!--b.修改标签内容-->
        <p id="p1">我是段落</p>
        <button onclick="document.getElementById('p1').innerHTML='我是javascript!'">修改内容</button>
        
        <!--c.修改标签的样式-->
        <button onclick="document.getElementById('p1').style = 'color:red;font-size:30px;'">修改样式</button>
        
        <img id="img1" src="img/luffy.jpg"/>
        <button onclick="document.getElementById('img1').src = 'img/luffy4.jpg'">修改图片</button>
        
    </body>
    
    
</html>

1基础语法

1.控制台输出

console.log(100)
console.log(abc,200)

2.注释 - 和 C一样

单行注释 //
多行注释 /*

3标识符

由字母数字和下划线和$组成,数字不能开头.

a = 10
a20 = 100
a_10 = 200
$12S = 23
12abc = 100 报错
as^ = 200 报错

4.行和缩进

从语法角度看,js代码怎么换行和缩进都无所谓,js中通过{}来确定代码块

常见的数据类型:数字,布尔,字符串,数组,对象,函数.

数字(Number) - 包含所有的数字,包括整数和小数
布尔(Boolean) - 只有两个值 true和 false
字符串(String) - 使用单引号或者双引号引起来的字符集"abc" 'an'
数组(Array) - 相当于python中的列表[12,'abs',true]
对象(Object) - 相当于python中的字典和对象
函数(Function) - 相当于python中的函数

2变量的声明

语法1: 变量名 = 值
变量名 - 标识符,不能是关键字;
驼峰式命名(第一个单词首字母小写,后面每个单词大写);

语法2:var 变量名 = 值或 var变量名
var- - 声明变量的关键字

区别:声明的时候加var,变量可以不用赋值,默认是undefined;不加var就必须赋值

补充:js中有两个特殊的值 - undefined(没有,空) 和 null(清空)

3运算符

1.数学运算符: + - * / % ++ --

前面四个和python一模一样

++ --都是单目运算符,使用方式:变量++/--, ++/--变量
++ 自加1运算让变量本身的值加1 (放前面是先自加放后面是后自加)
-- 自检1运算

2.比较运算符:< > == != >= <= === !==

结果是布尔值
比较大小的和python一样
a. ==:判断值是否相等
b. ===:判断值和类型是否完全相等,相当于python中的==.!==相当于python中的!=.

3.逻辑运算符:&&逻辑与 ||逻辑或 !逻辑非

运算规则和使用方式和python的逻辑一模一样

4.赋值运算符: = += -= *= /= %=

和python一模一样

5.三目运算符 ?

语法:
条件语句值1:值2 判断条件语句的值是否为true,为true整个表达式的结果是值1,为false,结果是值2.
age = 16
is_man = age>=18 ? '成年':'未成年'

6运算顺序

数学>比较>逻辑>赋值
如果有,括号里面的

4分之结构

js的分之结构有两种 : if 和switch

1.if

if(条件语句){
满足条件会执行的代码
}

b.if - else
if(条件语句){
代码段1
}else{
代码段2
}

c. if - else if - else
if(条件语句){
代码段1
}else if(条件语句2){
代码段2
}else if(条件语句3){
代码段3
}

2.switch语句

a.结构:
switch(表达式){
case值1:
代码段1
case值2:
代码段2
...
default:
代码段3
}
b.执行过程:
使用表达式的值依次和后面每个case后面的值进行比较，看是否相等。
找到第一个和表达式的值相等的case,将这个case作为入口，依次执行后面所有的代码，
直到执行完成或者遇到break为止。如果每个case的值都和表达式的值不相等，
就执行default后面的代码

注意：case后面必须是一个有结果的表达式

    a = 15
    switch(a){
        case 5:
            console.log('表达式1')
        case 6:
            console.log('表达式2')
        case 7:
            console.log('表达式3')
        case 10:
            console.log('表达式4')
        case 11: 
            console.log('表达式5')
            break
        default:
            console.log('表达式6')     
    }

5

js中有for循环和while循环两种

1.for循环

a.for - in
结构:
for(变量 in 序列){
循环体
}
执行过程和python一样,但是变量取到的不是元素,而是下标/key(属性名)
序列 - 字符串,数组,对象

str1 = 'abc'
    for(x in str1){
        console.log('=====')
        console.log(x, str1[x])
    }
    
    arr1 = [1, 'aaa', true, 12.5]
    for(index in arr1){
        console.log(index, arr1[index])
    }
    
    person1 = {name:'小明', age: 18, sex:'男'}
    for(x in person1){
        //typeof() - 获取值的类型
        console.log(x, typeof(x))
        console.log(person1[x])
    }

b.C的for循环
结构：
for(表达式1;表达式2;表达式3){
循环体
}
执行过程：先执行表达式1；判断表达式2的值是否为true,如果为true就执行循环体，执行完循环体再执行表达式3；
然后再判断表达式2是否为true，如果为true就执行循环体，执行完循环体再执行表达式3；
.依次类推，直到表达式2的结果为false为止(循环结束)

表达式1
while(表达式2){
循环体
表达式3
}

 表达式1
 for(;表达式2;){
    循环体
    表达式3
 }
 */

2.while循环

a.while循环
while(条件语句){
循环体
}
执行过程和python一模一样

b.do-while循环
do{循环体}
while(条件语句)
区别:do-while的循环体至少会执行一次

6函数

1.函数的声明

function 函数名(参数列表){
函数体
}
js中的函数除了声明的关键字不一样,其他都一样

参数可以设置默认值,也可以通过关键字参数来调用函数

    function sum(num1, num2=3){
        console.log('求两个数的和')
        return num1+num2
    }

2.函数的调用

函数名(实参列表)
console.log(sum(10, 20))
js中所有的函数多有返回值,默认是undefined
``
function func1(){
console.log('我是js函数')
}
re = func1()
console.log(re)

##3.匿名函数(函数的字面量)
函数名 = function(参数列表){函数体}

func2 = function(a,b){
console.log(a, b)
return a*b

}
console.log(func2(3, 4))

funcs_arr = [func1, function(a){console.log(a)}]
funcs_arr[0]()
funcs_arr[1]('abc')

##4.变量的作用域
a.全局变量:只要声明在函数外面的变量就是全局变量;在函数中以'变量名=值'的形式声明的变量也是全局的

b.局部变量:以var关键字声明在函数中的变量,才是局部变量

var1 = 1000   //这是一个全局变量
var var2 = 'abc'  //这是一个全局变量

for(xxx in 'hello'){
    
}

function abc(){
    var2 = 'abcabc'
    var3 = 111    //这个是一个全局变量
    var var4 = 222  //这是一个局部变量
    console.log(var1, var2, xxx)
}
abc()

console.log(var3)
console.log(var2)
```

day24-js基础