js笔记1

HTML/CSS/JS的关系

html 负责页面内容显示和结构

css   页面美化

js      与用户交互

面试题：网页的三层结构是什么？各自的作用

               结构层、表现层、行为层

script标签

<!--嵌入的方式-->

<script>

        js代码

</script>

<!--外部js文件引入的方式-->

<script src="js文件路径"></script>

<!--标签内部-->

<!--事件属性-->

        <div onclick="alert('坦坦然')">div标签</div>

<!--a 标签的特殊用法-->

        <a href="javascript:alert('aaaa')">百度</a>

注意：1、针对嵌入和外部js文件使用的时候，script 标签哪里需要就放哪里

                2、如果使用外部js文件，那么script标签内部不能放任何js代码

输出语句

<script>
//文档输出    显示在浏览器上边
document.write('文档输出')
//控制台输出    常用于代码调试
console.log('控制台输出')
//弹框
//alert('普通弹框')
//confirm('确认弹框')
prompt（'请输入一个数字','25'）//自带输入框的弹框
</script>

JS注释方法

//单行注释

/* */多行注释

html        注释

css注释        /* */

Java注释        同js

PHP注释        #        /* */        //

注释的 作用：方便阅读代码

2.1        变量

1、概念：计算机中用来存储数据的
2、变量的创建

        语法：var 变量名称 = 值

        变量的命名规范

• 包含数字(0-9)、字母(a-z A-Z)、下划线(_)、美元符号($)
• 不能用数字开头
• 不能使用系统关键字、保留字
• 变量名称有意义
• 驼峰命名法    首字母小写，其余单词字母大写

        3、变量的扩展

        a、初始值赋值        创建变量的时候赋值

<script>
    var num1=15,num2=20,num3=25
</script>

3、练习

交换两个变量的值

<script>
    var num1=20;
    var num2=30;
//思路一：创建第三个变量（中间变量）
    var temp = num1;
    num1=num2;//num1 值变为30
    num2=temp //num2 值为20
//思路二：使用加减法运算    通常都是数字的值交换
    num1=num1+num2//num1 结果是50
    num2=num1-num2//num2 结果是20
    num1=num1-num2//num1 结果是30
    console.log(num1);
    console.log(num2);
</script>

2.2数据类型

复习
1.php中的数据类型: boolean(布尔)、int(整型)、 float(浮点型)、 string(字符串)、arny(数组)、
object(对象)、NULL(空)、 resource(资源）
2.Java中的数据类型:boolean(布尔)、int(整型)、 float(浮点型)、 string(字符串)、arny(数组)、
object(对象)、NULL(空)、long、short、double、char、byte
3. JavaScript中的数据类型
boolean(布尔)、 stringl(字符串)、 number(数字)、 object(对象)、 undefined(未定义)、null(空)
布尔数据类型中只有true和 falsel两个值
字符串使用引号(单引号和双引号)引起来
数字包括整数和浮点数、NaN
注意:当非数字字符串参与算术运算（+除外）的时候,得出的结果是NaN

获取变量的数据类型
typeof()

<script>
    var str3='15'
    //获取变量的数据类型
    console.log(typeof(str-3))//结果: string
    console.log(typeof(NaN))//结果: number
</script>

2.3运算符
2.3.1算术运算符

+

-

*

/

%
2.3.2比较运算符

<

>

<=

>=

==        等于                        只比较值        值相等返回真,不等返回假
!=         不等于
===      恒等于(全等于)       比较值和数据类型        值和类型都相同时        返回真        否则返回假
!==       恒不等于(全不等于)

2.3.3逻辑运算符
&&        逻辑与        两边都为真时,整体返回真,其余情况全为假
||           逻辑或        只变有一边为真时,整体返回真,当两边都为假时整体返回假
!            逻辑非        取反        非真即假,非假即真

2.3.4斌值运算符

=

+=        a+=2        等价于        a=a+2

-=

*=

/=

%=
2.3.5递增递减运算符
++        每次加1
--          每次减1

<script>
    var num1=12
    var res = ++num1 +--num1-num1-- + num1++//num1结果:? res 结果:?
</script>

2.3.6拼接运算符

+
2.4流程控制
2.4.1分支结构(选择结构)
2.4.2循环结构

2.1 流程控制
2.1.1 分支(选择)结构

1. 单分支
语法: if(条件){条件为真的时候，执行}

<script>
    if(false){
    console.log('this is true').
    }
</script>

2. 双分支
语法:     if(条件){条件为真的时候，执行}else{条件为假，执行的代码块}

<script>
    if(5<2 || 4>3){
    //条件为真执行
        console.log('this is ok')
    }else{
    //条件为假执行
    console.log('this is no ok')
}
</script>

3.多分支
a. if …else if …结构

        语法:if(条件1){
              条件1 为真 执行代码块

        }else if(条件2){
                条件2 为真 执行代码块

        }…else{
        以上条件都不满足时，执行的代码块
}
b. switch …case 结构
语法: switch(表达式){
        case 值1:执行的代码1;break;
        case 值2:执行的代码2;break;

        …

        default:以上值匹配不成功的时候，执行的代码
        }
循环结构
当有一段相同或相似的代码，需要重复执行n次的时候,会使用到循环结构
        1、for循环
              语法:for(var 计数变量=初始值;循环条件;递增或者递减){
              循环体;

         }

<script>
//输出1-100
    for(var i=1; i<=100; i++){
//循环体
    document.write(i+'<br>')
}
</script>

2、while循环

        语法:
        计数变量

        while(循环条件){
        循环体
        递增递减
}
3.do…while循环
        语法:

        计数变量 do{
        循环体
        递增递减

}while(循环条件)
2.2 函数
函数:一段有名字的代码块
作用: 实现代码复用和提高开发效率

特性:函数不能自动执行，需要调用

语法:function 函数名称([形参]){
        实现特定功能的代码块
}

函数调用:函数名([实参])

<script>
    function printInfo(name,sex,age)
        document.write('我'+name+','是个'+sex+'的,今年'+age+'岁了<br>')
}
    printInfo('李四','男',21)
</script>

注意:形参的个数和实参的个数要保持一致
判断给定的年份是否是一个闰年，如果是闰年返回true，不是返回false

<script>
    function isRunNian(year){
        if((year%4=0&& year%100!=0)|| year%400==0){
            return true;
        }else{
            return false;
}}
</script>

返回值: return
        作用: 给函数本身设置一个值，终止后续代码执行
        注意: 一个函数只能有一个返回值 函数练习

2.3数组

概念:数组是一组数据的集合，可以存储任意类型的数据

1、通过对象的方式创建        new
 

// 1. 通过对象的方式    new

var arr = new Array()

2、字面量创建 [] 是字面量的含义

var arr1 = ['张三',true,21]

注意：数组中值和值之间使用英文逗号隔开(,)隔开
2.2 数组单个元素的访问

通过数组元素的键名(下标)，来获取数组的中的某一个值
语法: 数组名[键名]

// 访问arr1数组中的 张三
console.log(arr1[0])

修改数组的元素值

数组名[键名] = 修改后的值

// 将张三修改为李四
arr1[0] = '李四' 
console.log(arr1);

2.3 数组的遍历

挨个访问数组中的每一个元素

// 数组的遍历
for(var i=0;i<arr1.length;i++){
console.log(arr1[i]);
}