JavaScript
1.1概念
JavaScript是一门客户端脚本语言,运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎.
脚本语言:不需要翻译,直接就可以被浏览器解析执行了
功能:可以来增强用户和html页面的交互过程,可以来控制jtml元素,让页面有一些动态的效果,增强用户的体验.
1.2JavaScript发展史
- 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验,命名为:C–,后来更名为:ScriptEase
- 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
- 1996年,微软抄袭JavaScript开发出JScript语言
- 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
- 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) +" ");
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,封装所有的实际参数
调用函数:函数名称([参数列表]);
本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203578.html