javaScript基础1

js使用方式：

1.js的引用：

<style type='text/javascript'></style>  js引用
<script>......</script> 

2.js使用方式：
2.1.行内式：    使用率低    alert() 弹窗
<input type='button' name='' onclick='alert('cicada');'>    
2.2内嵌式：
<script type='text/javascript'>
		alert('cicada');
</script>
2.3.外链式：  
<script type='text/javascript' src='js/info.js'></script>

定义变量：

js的变量类型:
1.语言的强弱：不同的数据类型之间是否可以进行直接运算，能否进行隐形类型转换 比如整形18能够自动转化为字符串语言，就是弱类型语言。
javascript是一种弱语言，Python是强类型语言
var 变量名 = 值
变量名的命名规范：
1.区分大小写
2.第一个字符必须是字母、下划线_ 或者美元符号 $
3.其他字符可以是字符、数字、下划线、美元符号，不可以使用中文
注意点：同时定义多个变量要使用英文逗号隔开

js中的数据类型：

1.number
2.string
3.boolean   0\1
4.undefined  变量声明未初始化，值就是undefined
5.null   表示空对象，获取不到对象 **弹出object\返回null**
6.object  复合类型，表示对象类型
使用alert获取变量的属性

js中函数的定义及调用

定义函数使用关键字: function
  <script type='text/javascript'>
  		// 定义一个msg函数
  		function msg(){
      		alert('hello cicada!');
      };
      // 调用msg函数
      msg()
  </script> 

js中定义带有参数的函数及调用

<script type='text/javascript'>     
function num(num1, num2){
    var sum_num = num1 + num2;
    // 返回值
    return sum_num; 
    // 弹出值
    alert(sum_num)
    }
  // 给函数传参
  result = num(12, 35);  
  alert(result)
</script>

函数中return关键字的作用：

1.返回函数中的值

2.执行完return函数执行结束

js函数定义及调用的总结

function 函数名(参数) {
....函数中的代码
}
函数名(参数)
// 函数中的参数可选，根据实际要求

js函数中的全局变量、局部变量

<script type='text/javascript'>
		// 函数1
		function num(){
		// 定义局部变量: sum_num
		var sum_num = 10;
		alert(sum_num);
}
		// 函数2
		function sum(num1, num2){
		// 参数进行相加
		var new_num = num1 + num2;
		// 弹出
		alert(new_num);
		// 返回函数值
		return new_num;
		}
	num();    // 调用函数1
  sum(12,35);  // 调用函数2
  result = new_num + sum_num;  // 让函数2的返回值+sun_num
  alert(sum_num);   // 输出函数1的值
  alert(result);   // 输出函数2的值  输出为47
</script>

// 全局变量部分
<script type='text/javascript'>
    // 全局变量 sum_num
		sum_num = 20;
		function num(){
		// 修改全局变量
		sum_num++;
}
	num();
	// 弹出 20
	alert(sum_num);   
</script>

## 总结
全局变量：作用于不同的函数
局部变量：仅作用于定义变量的函数内部使用

js中的条件语句 if \else

   比较运算符      描述                          例子
1.   ==        等于 判断值是否相等             5 == '5':True 
2.   ===       全等 判断值和类型是否都相等      5 === '5':False
3.   !=        不等                         5 != 6:True
4.   >\<       大于、小于
5.   >=\<=     大于等于、小于等于
var num1 = 5;
var num2 = '5';
if (num1 == 5){
		alert('相等');   //最终结果输出为相等
}
else{
		alert('不等')
}

js中的逻辑运算符

比较运算符       描述            例子   x:5  y:3
1. &&          and           (x<9 && y>2):True
2. ||           or           (x == 2 || y == 2):False
3. !           not(取反)      !(x == y) True

js中条件语句总结

1.if 作用于单条件语句

2.if…else 作用于判断两种结果条件语句

3.if…else if…else 作用于多条件语句判断

js中获取标签元素

使用内置对象document的getElementById方法
var element = document.getElementById('element');
** document.getElementById('标签的id'); **
注意事项：
1.放在要获取元素代码的下方，否则报错
2.解决方法：
2.1: 将按钮放在script上方
<input type="button" id="btn" value="99">
<script>
    function fn() {
        var button = document.getElementById('btn');
        alert(button);
    }
</script>
2.2: 设置页面加载完成后再执行的函数，再执行函数里来获取标签元素:onload

<script type='text/javascript'>
		// $function(){
			//	var button = document.getElementById('btn');
			//  alert(button);
			//window.onload js的入口函数
				window.onload = funtion(){
						var button = document.getElementById('btn');
				}
		// }
</script>
<input type="button" name="" id="btn" value='99'>

js操作标签元素属性

先获取到的页面标签操作，就可以对页面标签元素的属性进行操作，属性的操作包括：
1.属性的读取
2.属性的设置
属性名在js中的写法遵循驼峰式写法  如：className
标签属性的获取和设置：
。获取标签对象
var 标签对象 = document.getElementById('id名称');
。读取属性
var 变量名 = 标签对象.属性名
。设置属性
标签对象.属性名 = 新属性值

innerHTML可以读取、设置标签包裹的内容
<script type='text/javascript'>
			window.onload = funtion(){
						var div = document.getElementById('div1');
						// 获取文字
						alert(div.textContent);
						// 读取属性
						var msg = div.innerHTML;
						alert(msg);
						// 设置属性，修改标签里面包含的内容
						div.innerHTML = '<a href='http://www.baidu.com'>百度</a>'
				}
</script>	
<div id='button'>123</div>

js中数组的应用

什么是数组？
数组就是一组数据的集合，里面的数据可以是不同的类型，就跟Python中的列表一样
数组的定义：
1. var list = newList( 1, 2, 3);  // 实例化对象数组
2. var list = [1, '2', True];   // 字面量方式创建数组，推荐使用这种方式
多维数组：多维数组就是在一个数组里面的数据是数组
var list = [[ 1, 2, 3], ['1', 2, 3], [True, 1, '1']]
数组的相关操作：
1.length：获取数组的长度
var list = [1, '2', True];
alert(list.length);   // 弹出3
2.根据下标取值
var list = [1, '2', True];
alert(list[1]);   // 弹出’2‘
var num = list.indexof('2');  
alert(num);    //弹出 1
3.添加和删除元素
var list = [1, '2', True];
list.push(2);  
alert(list);   // 弹出 1,'2',True,2 
list.pop();  
alert(list);   // 弹出 1,'2',True
4.根据下标添加和删除元素
变量名.splice(start, number,element1...elementN)
start:必写项，表示开始删除的索引
number:可选项，要删除的个数
element:可选项，在start这个索引位置后面要插入的新元素
var num = [1,2,3,4,5];
num.splice(0,2);  // 从下标为0的位置开始删除2个元素
alert(num);    // 弹出3,4,5
num.splice(1,0,1,2);  // 从下标为1的位置开始添加1,2这两个元素  0:代表不删除任何元素
alert(num);  // 弹出3,1,2,4,5

# 总结：
1.数组的定义使用一对中括号
2.获取数组的长度使用的是length属性
3.从数组最后添加元素使用push方法
4.从数组最后删除元素使用pop方法
5.根据下标添加和删除元素使用splice方法
6.indexof() 获取元素下标  -1表示没有该元素

js中的循环语句的使用格式

1.for循环
var list = [1,2,3,4,5];
for (var i = 0;i < list.length; i++){
		 var result = list[i];
     alert(result);   // 依次弹出： 1 2 3 4 5
}
2.while循环
var list = [1,2,3,4,5];
var i = 0;
while(i < list.length){
			var result = list[i];
			alert(result);   // 依次弹出： 1 2 3 4 5
			i++;
}
3.do...while
var list = [1,2,3,4,5];
var i = 0;
do{
		var result = list[i];
		alert(result);     // 依次弹出： 1 2 3 4 5
		i++;
}while(i < list.length);
# 如果条件不成立，do里面的代码也会执行一遍

js中的字符串拼接

字符串拼接使用  +  运算符
var num1 = 12;
var num2 = 13.14;
var num3 = '35';
result = num1 + num2;
alert(result);    // 弹出25.14
sum = result + num3;
alert(sum);    // 弹出25.1435

定时器的使用

setTimeout:能够实现反复执行代码
。定时器的2种创建方法：
1.setTimeout(函数名,[时间间隔(单位是毫秒), 参数1, 参数2...参数N])  其中[]里面的是可选项，可写可不写
<script>
		function msg(num1, num2){
			// alert('12' + ' ' + '35');  使用"+"一起弹出
			alert('12')
			alert('35')
		}
		setTimeout(msg, 2000);    // 执行一次函数的定时器
</script>
2.setInterval(函数名,[时间间隔(单位是毫秒), 参数1, 参数2...参数N])
<script>
		function msg(msg1, msg2){
			alert('hello' + " " + 'xuan');   // 弹出 hello xuan
		}
		setTimeout(msg, 2000);    // 重复执行函数的定时器
</script>
。清除定时器
1.clearTimeout:清除只执行一次的定时器
<script>
		function msg(num1, num2){
			// alert('12' + ' ' + '35');  使用"+"一起弹出
			alert('12')
			alert('35')
		}
		setTimeout(msg, 2000);    // 执行一次函数的定时器
</script>
2.setInterval(函数名,[时间间隔(单位是毫秒), 参数1, 参数2...参数N])
<script>
		function msg(msg1, msg2){
			alert('hello' + " " + 'xuan');   // 弹出 hello xuan
		}
		setTimeout(msg, 2000);    // 重复执行函数的定时器
</script>
。清除定时器
1.clearTimeout:清除只执行一次的定时器
<script>
		function msg(){
			alert('hello cicada');
			clearTimeout(time)   // 清除只执行一次的定时器
		}
		time = setTimeout(msg, 3000);    // 执行一次函数的定时器
</script>
2.clearInterval:清除反复执行的定时器
// 第一种写法
<script>
<!--        定义一个启动定时器的函数-->
        function fnStart() {
            t =setInterval(function (sStr) {
                alert(sStr);

            },3000,'你是猪吗');
        }
    //    停止定时器的函数
        function fnStop() {
        //    取消多次定时器
            clearInterval(t);
        }
    </script>
<input type="button" value="多次定时器" onclick="fnStart()">
<input type="button" value="停止" onclick="fnStop()">
  // 第二种写法
<script>
		function msg(){
			alert('hello cicada');
		}
		var time = setInterval(msg, 3000);    // 重复执行函数的定时器
		function stop(){
				clearInterval(time);    // 清除反复执行的定时器
		}
</script>
<input type='button' value='停止' onclick='stop();'>   
// onclick: 注册(点击)事件


# 总结
定时器的创建：setTimeout\setInterval(函数名, 时间间隔)
清除定时器：
1.clearTimeout:清除只执行一次的定时器
2.clearInterval:清除反复执行的定时器