js的基础

HTML/CSS/JS 的关系

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

css 页面美化

js 与用户交互

JS注释方法

// 单行注释

/* */ 多行注释

 html 注释 css注释

/* */

Java注释

同js PHP注释 # /* */ //

文档输出： document.write()

控制台输出： console.log()

普通弹框(警示框)：alert()

确认框弹框: confirm()

2.1 变量

1. 概 念： 计算机中用来存储数据的

2. 变量的创建 语法: var 变量名称 = 值 变量的命名规范

包含数字(0-9)、字母(a-zA-Z)、下划线(_)、美元符号($) 不能用数字开头

不能使用系统关键字、保留字

变量名称有意义

驼峰命名法 首字母小写，其余单词首字母大写

3. 变量的扩展

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

var age=12

b. 变量的值更新

<script>
var age = 20 // 初始值
age = 22 // age变量的值发生了变化
var age1=23
age = age1 // age 结果：23 将age1变量的值赋给了age变量
</script>

交换两个变量的值

<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(字符串)、array(数组)、 object(对象)、NULL(空)、resource(资源)

2. Java中的数据类型：boolean(布尔)、int(整型)、float(浮点型)、string(字符串)、array(数组)、 object(对象)、NULL(空)、long、short、double、char、byte

3. JavaScript中的数据类型 boolean(布尔)、string(字符串)、number(数字)、object(对象)、undefined(未定义)、null(空)

布尔数据类型中只有true和false两个值

字符串使用引号(单引号和双引号)引起来

数字包括整数和浮点数、NaN

注意:当非数字字符串参与算术运算(+ 除外)的时候，得出的结果是NaN

运算符   +  -  *  /  %

比较运算符

<

>

=

== 等于 只比较值 值相等返回真，不等返回假

!= 不等于

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

!== 恒不等于(全不等于）

逻辑运算符

&& 逻辑与 两边都为真时，整体返回真，其余情况全为假

|| 逻辑或 只要有一边为真时，整体返回真， 当两边都为假时整体返回假

！ 逻辑非 取反 非真即假，非假即真

赋值运算符

=

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

-=

*=

/=

%=

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:以上值匹配不成功的时候，执行的代码

循环结构

1. for循环

语法：for(var 计数变量=初始值;循环条件;递增或者递减){

循环体;

}

2. while循环

语法：

计数变量 while(循环条件){

循环体

递增递减

}

3. do...while循环

语法：

计数变量

do{

循环体 递增递减

}while(循环条件)

2.1 数组的创建

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

 1. 通过对象的方式 new
var arr = new Array()

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

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

三、对象

万物皆对象

类是具有相同或相似属性和功能(方法)的这些事物，统称为一类

php中的对象：实例化(new)

javascript中的对象：自定义对象、内置对象、浏览器对象

3.1 字面量创建对象

var person = {
gongHao:'HS001',
name:'王平',
money:1500,
skill:function(){
console.log('working ....');
}
}

对象属性的调用

<script>
// 在浏览器上边输出: 王平的工号是HS001,工资是1500
document.write(person.name+'的工号是'+person.gongHao+',工资是'+person.money)
</script>

对象属性值的修改

<script>
// 将name属性的值修改为 刘美
person.name='刘美'
</script>

对象中方法的调用

<script>
// 方法调用
person.skill()
</script>

3.2 利用new Object创建对象

语法： new Object()

<script>
var andy = new Object();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
</script>

3.3 利用构造函数创建对象

<script>
function Person(name, age, sex) {
this.name = name; // this.name 这里的name是对象的属性名称，等号后边的name 是要赋
的值
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' +
this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
</script>

四、内置对象

4.1 Math对象

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max() // 求最大值
Math.min() // 最小值
Math.random（） // 随机数

4.2 Date对象

getFullYear()    获取当前年份     4位数年份 

getMonth() 获取当前月份 0-11表示1-12月

getDate() 获取当前日期

getDay() 获取星期几 周日0 至周六6

getHours() 获取当前小时

getMinutes() 获取当前分钟

getSeconds() 获取当前秒钟

getTime() 获取时间戳 自1970年1月1日起至今的毫秒数

4.3 数组对象

isArray() 判断对象是否为数组

push() 数组末尾添加一个或多个元素，修改原 数组 返回新数组长度

pop() 删除数组最后一个元素，无参数，修改 原数组 返回删除的元素值

shift() 删除数组的第一个元素，无参数，修改 原数组 返回删除后数组的长度

unshift() 向数组开头添加一个或更多元素，修改 原数组 返回新数组长度

indexOf() 数组中查找给定元素的第一个索引 存在返回索引号，不存在返回-1

lastIndexOf() 数组中查找给定元素的最后一个索引 存在返回索引号，不存在返回-1

toString() 把数组转成字符串，逗号分隔每一项 返回一个字符串

join('分隔符') 用于把数组中的所有元素转换为一个字 符串 返回一个字符串

concat() 连接两个或多个数组 不影响原数组 返回一个新的数组

slice() 数组截取slice(begin,end) 返回被截取的新数组

splice 数组删除splice(第几个开始,要删除个数) 返回被删除项目的新数组，影响原 数组

4.4 字符串对象

indexOf('要查找的字符', 开始位置) 查找某字符在原字符串中首次出现的位置 返回指定内容的位置 索引,如果找不到返 回-1

lastIndexOf 查找最后一次出现的位置 找到返回位置索引， 找不到返回-1 concat(str1,str2,str3,...) 连接两个或多个字符串，等同于+ 返回拼接后的字符串

substr(start,length) 字符串截取,从start位置开始,length取的 个数 返回截取后字符串

slice(start,end) 从start位置开始，截取到end位置，end 取不到 返回截取的字符串 substring(start,end) 从start位置开始，截取到end位置，end 取不到,基本和slice相同,但不接受负值 replace()

split()

toUpperCase() 转为大写 返回转后的字符串

toLowerCase() 转为小写 返回转后的字符串