JavaScript入门及实例

JavaScript

1.1概念

JavaScript是一门客户端脚本语言,运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎.
脚本语言:不需要翻译,直接就可以被浏览器解析执行了
功能:可以来增强用户和html页面的交互过程,可以来控制jtml元素,让页面有一些动态的效果,增强用户的体验.

1.2JavaScript发展史

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验,命名为:C–，后来更名为:ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
5. JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

1.3特点和优势(了解)

特点

(1)JS是一门直译式的语言(边解释边执行,没有编译的过程)
java–>编写时xx.java–>变异成xx.class–>运行class文件
js–>编写时html,编写时js文件,直接运行,没有编译过程
(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)
JS中是有对象的(内置对象、自定义对象)
(3)JS是一门弱类型语言(java:强类型)

//在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
//在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc";    //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型) 

优势

(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS浏览器)
(JS预言是跨平台的,是因为有浏览器,但浏览器不跨平台;java语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台)

2.基本语法

1.与html结合方式

(1)内部JS:定义<script>,标签体内容就是js代码
(2)外部JS:定义<script>,通过sec属性引入外部的js文件
注意:<script>可以定义在html页面的任何地方.但是定义的位置会影响执行顺序; <script>可以定义多个.

2.1注释

1.单行注释: //注释内容
2.多行注释: /* 注释内容 */

2.2数据类型

原始数据类型(基本数据类型)

(1)数值类型(number):在JS中,所有的数值在底层都是浮点型,但是在处理和显示的过程中会自动的和整型进行转换.

例如:2.4+3.6=6
特殊值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(String):在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者使用双引号引起来.例如:

var v1 = "hello JS";
var v2 = 'hello Js';

另外,JS中字符串类型有对象的包装对象(String),在需要时会自动的和包装对象进行转换.

var v1 = "Hello JS"; //基本数据类型,String
console.log( typeof v1 );//string
var v2 = new String("Hello JS");//复杂数据类型, object
comsole.log( typeof v2 );//object
//不管是基本数据类型v1,还是复杂数据类型v2,都可以当做对象来用
console.log( v1.valueOf() );//v1是基本数据类型,会转成对象,调用valueOf函数
console.log( v2.valueOf() );

(3)布尔类型(boolean)

布尔类型的值有两个,分别为true和false

(4)undefined类型
undefined类型的值只有一个,就是undefined,表示变量未定义(但不是值变量没有声明),是指声明了变量,但没有为变量赋值,该变量的值就是undefined

/*1.undefined类型*/
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5) null类型

null类型的值只有一个,就是null,表示空值.
可以作为函数的返回值,表示函数返回的是一个空的对象.

注意:null和undefined类型的变量是不能调用函数火属性的,会抛异常!

复杂数据类型

主要指对象(JS的内置对象、自定义的对象、函数、数组)
(1)变量声明
变量:一小块存储数据的内存空间

Java语言是强类型语言,而JavaScript是弱类型语言.
强类型:在开辟变量存储空间时,定义了时间将来存储的数据的数据类型.只能存储固定类型的数据
弱类型:在开辟变量类型空间时,补丁已空间将来的存储数据类型,可以存放任意类型的数据
语法:var 变量名 = 初始化值;

typeof运算符:获取变量的类型
注意:null运算后得到的是object
JS中是通过var关键字声明变量,声明的变量是不区分类型,可以指向任意的数据.例如:

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

另外,JS中多次声明同名的变量不会出现语法错误,例如:

/*2.变量的定义**/
var s = "Hello";//var s; s="hello";
var s = 123; //var s; s = 123;
alert( s );//123

JS是严格区分大小写的!!!!!

JS运算符

JS和Java的运算符大致相同
(1)一元运算符:只有一个运算数的运算符
++(–) 在前,先自增(自减),再运算
++(–) 在后,先运算,再自增(自减)
+(-):正负号
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
其他类型转number:
String转numbner:按照字面值转换.如果字面值不是数字,则转化为NaN(不是数字的数字)
boolean转number:true转为1,false转为0
(2)算数运算符

+，-，*，/，%，++，--

(3)赋值运算符

=，+=，-=，*=，/=，%=

(4)比较运算符

==，!=，>，>=，<，<=

比较方式:
类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

(5)位运算符

& ， |

(6)逻辑运算符

&& ，|| ( false && 表达式, true || 表达式 )

其他类型转boolean：
number：0或NaN为假，其他为真
string：除了空字符串(“”)，其他都是true
null&undefined:都是false
对象：所有对象都为true
(7)前置逻辑运算符

! (not)

(8)三元运算符

语法:表达式? 值1:值2;

判断表达式的值,如果是true则取值1,如果是false则取值2;

JS语句

1.if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：

if (条件 1){
    当条件 1 为 true 时执行的代码
}else if (条件 2){
    当条件 2 为 true 时执行的代码
}else{
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

2.switch语句

使用switch语句来选择要执行的多个代码块之一.语法结构如下:

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    ...
    default:
        与 case 1 和 case 2 不同时执行的代码
}

执行原理:首先设置表达式n(通常是一个变量),随后表达式的值会与结构中的每个case的值做比较,如果存在匹配,则与该case关联的代码块会被执行.请使用break来阻止代码自动的向下一个case运行.

3.for循环语句–循环代码块一定的次数

for循环的语法结构如下:

for (语句 1; 语句 2; 语句 3){
    被执行的代码块
}

4.while循环 — 在指定条件为真时循环执行代码块

JS中while循环也分为while和do/while循环,下面为while循环语法结构:

while (条件){
    需要执行的代码
}

while循环会在指定条件为真时循环执行代码块.

JS特殊语法:
1.语句以;结尾,如果一行只有一条语句则;可以省略,但不建议省略
2.变量的定义使用var关键字,也可以不使用
用:定义的变量是局部变量
不用:定义的变量是全局变量(不建议)

练习

案例1:99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>99乘法表</title>
   <style>
      td{
         border: 1px solid;
      }
   </style>
   <script>
      document.write("<table  align='center'>");
      //1.完成基本的for循环嵌套，展示乘法表
 for (var i = 1; i <= 9 ; i++) {
         document.write("<tr>");
         for (var j = 1; j <=i ; j++) {
            document.write("<td>");
            //输出  1 * 1 = 1
 document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
            document.write("</td>");
         }
         /*//输出换行
 document.write("<br>");*/ document.write("</tr>");
      }
      //2.完成表格嵌套
 document.write("</table>");
   </script>
</head>
<body>
</body>
</html>

案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级

80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误
代码实现如下:
propmt(参数1,参数2)函数:在页面上弹出一个消息输入框,接受的参数1是在弹框中显示的提示内容,用户输入的内容,会作为函数的返回值直接返回.参数2,是输入框中的默认值,可以修改.

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
    alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
    alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
    alert("您的成绩属于: 不及格!");
}else{
    alert("您的输入有误, 请重新输入!");
}

案例3:switch语句案例实现一个简易的计算器

可以接受用户输入的两个数值和一个运算符(+,-,*,/),根据运算符号的不同,对两个数值执行不同的运算.
代码实现如下:

//1.接收用户输入的数值和运算符, 中间用空格分隔
var str = prompt("请输入数值1、运算符、数值2，中间用空格分隔："); //"10 + 5"
//2.对用户输入的内容进行切割(以空格作为分隔符切割)
var arr = str.split(" "); // ["10", "+", "5"]

var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
    case "+":
        alert( "两个数的和为: "+( num1+num2 ) );
        break;
    case "-":
        alert( "两个数的差为: "+( num1-num2 ) );
        break;
    case "*":
        alert( "两个数的乘积为: "+( num1*num2 ) );
        break;
    case "/":
        alert( "两个数的商为: "+( num1/num2 ) );
        break;
    default:
        alert( "您输入的运算符有误, 请重新输入!" );
}

案例4:for循环语句案例

遍历1~100之间的所有整数,求1~100之间所有整数的和,并输出到控制台:
代码实现如下:

var i = 1;
var sum = 0;
while( i <= 100 ){
    sum += i;
    i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
    sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );

案例5:while循环语句案例

遍历下面数组中的元素,将元素输出到控制台.

var arr = [123, "abc", false, new Object() ];

代码实现如下:

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
    console.log( arr[index] );
    index++;
}
for( var i=0; i<arr.length; i++ ){
    console.log( arr[i] );
}

3. JS数组

Array 对象用于在单个的变量中存储多个值.

1.1 JS数组的声明方式一:

//声明一个空数组,长度为零
var arr = [];
//声明一个数组,并未数组设置初始化值
var arr1 = ["Hello",111,false,new Object()];

1.2 JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push():向数组的末尾添加一个或更多元素,并返回新的长度

1.3 数组中的细节问题

(1)JS中的数组可以存储任意类型的数据
(2)JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

4. JS函数

函数就是一个具有功能的代码块,可以反复调用
函数就是包裹在花括号中的代码块,前面使用关键词function

1.1 JS中声明函数的方式为:

function 函数名称([参数列表]){
    函数体
}

或者

var 变量名/函数名 = function([参数列表]){
    函数体
}

特点:
(1)方法定义是,形参的类型不用写,返回值类型也不写.
(2)方法是一个对象如果定义名称形同的方法.会覆盖
(3)在JS中,方法的调用至于方法的名称有关,和参数列表无关
(4)在方法声明中有个一隐藏的内置对象(数组),argguments,封装所有的实际参数
调用函数:函数名称([参数列表]);