一.JavaScript定义
1. Js是指基于对象和事件驱动的客户端弱类型脚本语言
对象:万事万物皆是对象
对象三大特性:
(1)属性:是指描述对象的外观特征;
(2)方法:指对象所具备的主动行为;
(3)事件:指对象的被动的行为
Person对象:
属性:姓名,性别,身高,体重...
方法:run,eat...
事件:指对象的被动行为,或者说对象介绍的某种指令去完成的一种行为
弱类型:指根据变量的值来确定变量的数据类型
var num='你好';
int num=10;
脚本语言:指解释型语言
解释型语言:指将代码编写一行,就会执行一行;
编译型语言:指程序一次性编译好,统一执行,编译一次,可以在多个平台
二、JavaScript的基本语法（变量、数据类型）
1. JS嵌入页面的方式：
(1)行间嵌入:通过事件驱动 Eg: οnclick='alert(nihao)'; 嵌入在页面
<input type="button" name="" id="" value="..." onclick="alert('123')" />
<input type="button" name="" id="" value=",,," onclick="alert('456')"/>(2)内嵌嵌入:在head中通过script标签 嵌入JS程序
<script type="text/javascript">
alert('123');
console.log('123'); // 调试在控制台中
</script>(3)外部JS : 在head中通过script标签 属性src引入外部的js文件
<script src="js/new_01.js" type="text/javascript">
/*alert('123');
console.log('123');*/
</script>2.js变量：
指在一段程序 不断发生变化的量。
2.1,声明一个变量： 使用关键字var 变量名；
Eg： var num;
2.2, 变量名称的命名规则：
（1）驼峰命名法： getElement、userName;
（2）变量的名称是以字母 $ _ 组成；
（3）变量可以包含数字，但是不能以数字开头；
Eg: var num09; var num_09; var $num;
（4）不能使用JS中保留的关键字; 错误的写法： var var;
（5）JS中区分大小写；userName username 表示不同的变量；
（6）变量可以使用中文命名，但是不建议。 LOW
（7）变量的长度 不能超过255个字符。
三.JavaScript基本语法 之 数据类型之间的转换
1.数据类型:两大类型:基本类型 和特殊类型
1.1,基本类型
查看数据类型:使用typeof 查看变量的数据类型
alert(typeof 变量);
alert(typeof (变量));
(1)字符串型 String
var srt='123asdf';
alert(typeof srt);(2)数字型 Number
var nun=123;
alert(typeof nun);(3)布尔型 Boolean
var bol=false;
alert(typeof bol);(4)未定义型 undefined
var num;
alert(typeof num)1.2,特殊类型
(1)object 对象类型 所有类型的父级
var obj=new Object();
alert(typeof obj);(2)array 数组
(3)function 函数
2.数据类型之间的转换
2.1,数字型转化为字符串型 number-->string
(1)拼接字符串
var nuz=123;
alert(nuz+'');
nuz_00=nuz+'';
alert(typeof (nuz=''));(2)使用JS的封装方法转换
var nuz=123;
alert(nuz.toString());
nuz_01=nuz.toString();
alert(typeof nuz_01);(3)特殊方法
var nuz=123;
alert(String(nuz));
nuz_02=String(nuz);
alert( typeof nuz_02);2.2,字符串型转换为数字型 string-->number
(1)拼接 (字符串只能为数字)
var str='123';
alert(str-'');
var str_01=str-'';
alert(typeof str_01);(2)特殊方法
var str='1234';
alert(typeof Number(str));
alert(str_01);// 返回结果1234 为数字类型number(3)parseInt()方法 ,parseFloat()方法
var stt='fasd123';
var stt_00=parseInt(stt);
alert(stt_00);
alert(typeof stt_00);var stu='123.5acs';
var stu_00=parseFloat(stu);
alert(stu_00);
alert(typeof stu_00);四.JavaScript 的流程控件语言
1.运算符类型
(1) 算术运算符；
算术运算符用于在程序中进行加、减、乘、除,自增,自减等运算。
var num_01=5,num_02=6;
alert(num_01+num_02); 5+6//返回值11
alert(num_01-num_02); 5-6//返回值-1
alert(num_01*num_02); 5*6//返回值30
alert(num_01/num_02); 5/6//返回值0.833333334
alert(num_01%num_02); 5%6//返回值5 求余运算var num_01=5,num_02=6;
var sum=num_01++ + num_01++;
alert(sum);
// sum=11 num_01=7
// num_01++ 表示先赋值 后运算var a=2,b=3;
var sum=++a;
alert(sum);
// a=3
// sum=3
// ++a;先运算后赋值(2) 比较运算符；
首先对操作数进行比较，该操作数 可以是数字也可以是字符串，然后返回一个布尔值true或false。
(3) 赋值运算符；
JavaScript中的赋值运算可以分为2种：简单赋值运算和复合赋值运算。
简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中。
复合赋值运算结合了其他操作如算术运算操作）和赋值操作。
var a=12,b=10;
a=a+b; // 简单赋值
a+=b; // 复合赋值
a-=b;
a*=b;
(4) 逻辑运算符；
逻辑运算符通常用于执行布尔运算，它们常常和比较运算符一起使 用来表示复杂比较运算，这些运算涉及的变量通常不止一个，而且常用于 if、while和for语句中。
（1）true的!为false，false的!为true；
（2）a&&b，a、b全为true时，表达式为true，否则表达式为false；
（3）a||b：a、b全为false时，表达式为false，否则表达式为true；
(5) 条件运算符；(三目运算符/三元运算符)
条件运算符是JavaScript支持的一种特殊的运算符。
语法：条件 ? 表达式1 : 表达式2;
说明： 如果“条件”为true，则表达式的值使用“表达式1”的值；
如果 “条件”为false，则表达式的值使用“表达式2”的值。
2.流程结构:
2,1.顺序结构
顺序结构是JavaScript中最基本的结构，就是按照从上到 下、从左到右的顺序执行。
2,2.选择结构
选择结构是按照给定的逻辑条件来决定执行的顺序,有单向选择, 双向选择和多向选择之分,但是程序在执行过程中都只是执行其中的一条分支。
上图左边为单向选择结构,右边为多向选择结构
选择结构的方法:
（1）if单支结构;
（2）if……else双支结构;
（3）if……else if……else... 多支结构;
（4）switch...case...结构;
（5）if语句的嵌套;
2,1,1.if单支结构: if(条件) {语句体}
var num_01=10;
if(num_01>20)
{ // 只有在条件 为true的时候 才会执行语句体
alert('num_01的值是大于20的');
}if(true){ if条件中 默认的为true
alert('条件为true时执行');
}2,1,2.if..else双支结构: if(条件) {语句体} else(条件) {语句体}
var num_01=10;
if(num_01>12){
alert('是的，你猜对了， 就是大于12的');
}else{
alert('你丫的猜错了');
}2,1,3.if多分支结构:if(条件) {语句体}else if(条件) {语句体}else {语句体}
// 问题： 根据等级A-D 判断成绩所属的范围？
var dengji='A';
var mess=prompt('请输入你等级');
alert(mess);
if(mess=='A'){
// 将数据写入在当前的html页面中
document.write('<h2 id="h2">成绩属于90-100之间</h2>');
}else if(mess=='B'){
document.write('成绩属于80-90之间');
}else if(mess=='C'){
document.write('成绩属于70-80之间');
}else{
alert('没有这个等级，重新输入');
}2,1,4.switch...case..结构: switch(表达式){ case取值1: 语句1;break; case取值2: 语句2;break; ....}
<script type="text/javascript">
var mess=prompt('请输入等级','A');
switch(mess){
case 'A':
document.write('90-100之间');
break; // 退出此语句
case 'B':
document.write('80-90之间');
break;
case 'C':
document.write('70-80之间');
break;
default: // 当其他所有的case语句定义的值都不满足时，执行default后面的语句块
document.write('没有您输入的等级');
break;
}
< /script>2,1,5.if嵌套
<script type="text/javascript">
var x=6,y=2;
if(x>5){
if(y<10){
alert('x>5 并且 y是小于10的');
}else{
alert('x>5 但是 y不小于10');
}
}else{
alert('x不大于5');
}
</script>2,3.循环结构
循环:一个语句多次执行,直到条件为false时退出
循环结构语句主要包括3种：
（1）for语句；
（2）while语句；
（3）do……while语句；
2,3.1.for(初始化;条件;增量/减量){循环体}
//问题: 输出1-100之间的数据
for(var i=1;i<=100;i++){
// document.write(i+'<br />');
}//问题: 输出1-100之间的偶数
for(var i=1;i<100;i++){
if(i%2==0){
// document.write(i+'<br />');
}
}// 问题: 输出1-100之间数字的和
var sum=1; // 记录和值
for(var i=1;i<=100;i++){
sum+=i;
}
document.write(sum);// 问题: 1,2,3,4 可以组成多少位互不相同的三位数
// 分析: for嵌套循环
/*var count=0; // 记录个数
for(var i=1;i<=4;i++){
for(var k=1;k<=4;k++){
for(var h=1;h<=4;h++){
if(i!=k && k!=h && h!=i){
count++;
document.write(i.toString()+k+h+'<br />');
}
}
}
}
document.write('互不相同的三位数有:'+count+'个');*/// 打印直角三角形 使用*
for(var i=1;i<=5;i++){ // 控制行数
for(var k=1;k<=i;k++){
document.write('*');
}
document.write('<br />');
}
for(var i=1;i<=5;i++){ // 控制行数
for(var j=0;j<5-i;j++){
document.write('○');
}
for(var k=1;k<=2*i-1;k++){
document.write('*');
}
document.write('<br />');
}var i,j;
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(j+'*'+i+'='+i*j+(i*j>9?' ':' '));
}
document.write('<br />');
}
document.write('<hr />');document.write('<table style="width: 800px;">');
for(i=1;i<=9;i++){
document.write('<tr>');
for(j=1;j<=i;j++){
if(j%2==0){
document.write('<td style="border: 1px solid green; background: green;">');
}else{
document.write('<td style="border: 1px solid green; background: red;">');
}
document.write(j+'*'+i+'='+i*j);
document.write('</td>');
}
document.write('</tr>');
document.write('<br />');
}
document.write('</table>');2,3,2 while(条件表达式语句){执行语句;}
// 问题: 输出1-10之间的数据
var num=0;
while(num<9){
num++;
document.write(num);
}// 输出1-10之间的数据,但是不包含5
var num_03=0;
while(num_03<9){
num_03++;
if(num_03==5){
continue;// 退出当前的循环 执行下一循环
}
document.write(num_03);
}2,3,3 do{执行语句块;}while(条件表达式语句);
// 问题; 输出1-10之间的数据
var num_01=0;
// 特点: 是先输出 在判断
do{
num_01++;
// document.write(num_01);
}while(num_01<10);2,3,4 break;continue
// 使用while 输出1-10之间的数字,但是没有5之后的数字
var num_02=0;
while(num_02<10){
num_02++;
if(num_02>5){
break; // 退出整个循环
}
// document.write(num_02);
}// 输出1-10之间的数据,但是不包含5
var num_03=0;
while(num_03<9){
num_03++;
if(num_03==5){
continue;// 退出当前的循环 执行下一循环
}
document.write(num_03);
}3.获取页面元素:
3.1获取页面中的方法: 通过元素的id获取元素
// var div= document.getElementById('div_01');
// alert(div);// [object HTMLDivElement]
//}如果获取到页面的元素为null,
考虑: 元素执行的顺序发生了问题
解决方式:
(1)将所有的JS程序移植到body的最下面
(2)添加窗口的加载事件 onload
重点: js中设置元素的样式
div.style.width=200+'px';
div.style.height=200+'px';
div.style.border='1px solid red';重点: 通过js 之 DOM操作 添加元素的内容
使用属性innerHtml/innerText
div_01.innerText='<h1>标题1</h1>';
div_01.innerHTML+='<h1>标题1</h1>';
alert(div_01.innerHTML);
alert(div_01.innerText);
