JavaScript在HTML中的应用

限于喜欢 提交于 2020-03-27 06:48:56

JavaScript概述
JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
特点:
1,交互性(它可以做的就是信息的动态交互)
2,安全性(不允许直接访问本地硬盘)
3,跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

JavaScript与Java不同
1,JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品
2,JS是基于对象,Java是面向对象
3,JS只需解释就可以执行,Java需要先编译成字节码文件,再执行
4,JS是弱类型,Java是强类型

JavaScript与Html的结合方式
想要将其他代码融入到Html中,都是以标签的形式。
1,JS代码存放在标签对<script> js code... </script>中。
2,当有多个html页面使用到相同的JS脚本时,可以将JS代码封装到一个文件中,只要在script标签的src属性引入一个JS文件。(方便后期维护、扩展)
    注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。
    例:<script src="test.js" type="text/javascript"></script>
注:规范中script标签早期有一个属性language,而现在使用type属性。

JavaScript语法
每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易。JS中也一样有变量,语句,函数,数组等常见语言组成元素。
1、变量
    通过关键字var来定义,弱类型即是不用指定具体的数据类型。
    例:var x = 3; x = "hello";
    注:JS中特殊的常量值:undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)
    注意:JavaScript的语句在结尾处是可以不用分号结束的,非严谨语言的特点。
    但为了符合编程规范,需要像java一样定义结束符。
    而且有些情况是必须写分号的,如:var x = 3 ; var y = 5 如果两条语句写在同一行,就需要分号隔开

通常高级程序设计语言所包含的语法内容:
1,关键字:该种语言中被赋予了特殊含义的单词。
2,标识符:用于标识数据和表达式的符号。通常可以理解为在程序中自定义的名称。比如变量名,函数名。
3,注释:注解说明解释程序。用于调试程序。
4,变量:用于标识内存中的一片空间。用于存储数据,该空间中的数据是可以变化的。
    什么时候使用变量,当数据不确定的时候。
5,运算符。可以让数据进行运算的符号。
6,语句。用于对程序的运行流程进行控制的表达式。
7,函数:用于对功能代码进行封装,便于提高复用性。
8,数组:对多数据进行存储,便于操作。就是传说中的容器。
9,对象:只要是基于对象的语言,或是面向对象的语言,就存在着对象的概念,
    对象就是一个封装体。既可以封装数据也可以封装函数。
这些都是高级程序设计语言具备的共性内容,只不过各种语言对这些内容的表现形式有所不同,但是使用基本思想是一致的。

1,算术运算符演示。
var a =3710;
alert("a="+a/1000*1000);//a=3710;

var a1 = 2.3,b1 = 4.7;
alert("a1+b1="+(a1+b1));//a1+b1=7

alert("12"-1);//11
alert("12"+1);121
alert(true+1);//2//因为在JS中false就是0或null;非0非null就是true,默认用1表示。
alert(2%5);//2

var n = 3,m;
m = ++n;
alert("n="+n+",m="+m);//n=4,m=4

2,赋值运算符
var i = 3;
i = i+2;
i+=2;
alert("i="+i);//i=7

3,比较运算符
var z = 3;
alert(z!=4);//true

4,逻辑运算符
var t = 4;
alert(t>7 && t<6);//false
alert(!true);//false

5,位运算符
var c = 6;
alert(c&3);//2
alert(5^3^3);//5
alert(c>>>1);//6/2(1);
alert(c<<2);//24

6,三元运算符
3>0?alert("yes"):alert("no");//yes
alert(3>10?100:200);//200

一些细节:
undefined:未定义。其实它就是一个常量。

var xx;
alert(xx);//undefined
alert(xx==undefined);//true

想要获取具体值得类型,可以通过typeof来完成。
alert(typeof("abc")=='string');//true//判断类型
alert(typeof(2.5)=='number');//true
alert(typeof(true));//boolean
alert(typeof(78));//number
alert(typeof('9'));//string

语句:
1,顺序结构。
    从上到下的顺序执行代码。
2,判断结构。
    代表语句:if
3,选择结构
    switch
4,循环结构。
    while / do while / for
5,其他语句。
    break:跳出选择,跳出循环。
    continue:用于循环语句,结束本次循环继续下次循环。

判断结构:
var x = 3;
// if(x=4){//注意
if(4==x){//建议将常量放左边。以报错来修正代码。
    alert("yes");
}else{
    alert("no");
}

if(x>1)
    alert("a");//a
else if(x>2)
    alert("b");
else if(x>3)
    alert("c");
else
    alert("d");

选择结构:
var x = "abc";
switch(x){
    default:
        alert("c");
        break;//省略。
    case "kk":
        alert("a");
        break;
    case "abc":
        alert("b");//b
        break;
}

循环结构:
var x =1;
document.write("<font color ='blue'>");
while(x<10){
    alert("x="+x);//将数据直接写到当前页面中。
    document.write("x="+x+"<br/>");
    x++;
}
document.write("</font>");

for(var x=0; x<3; x++){
    document.write("x="+x);
}

w:for(var x=0;x<3;x++){
    for(var y=0;y<4;y++){
        document.write("x==="+x);
        continue w;//跳出当前循环。
    }
}

JS练习-99乘法表
<script type="text/javascript">
    document.write("<table>");
    for(var x=1; x<=9; x++){
        document.write("<tr>");
        for(var y=1; y<=x; y++){
            document.write("<td>"+y+"*"+x+"="+y*x+"</td>");
        }
        document.wirte("</tr>");
    }
    document.write("</table>");
</script>

javascript中的数组演示。
数组用于存储更多的数据,是一个容器。
特点:
1,长度是可变的。
2,元素的类型是任意的。
建议在使用数组时,存储同一类型的元素。操作起来较方便。

JS中数组定义的两种方式:
1,var arr = []; var arr = [1,3,5,7];
2,使用了javascript中的Array对象来完成的定义。
    var arr = new Array(); //var arr = [];
    var arr1 = new Array(5);//数组定义并长度是5
    var arr2 = new Array(5,6,7);//定义一个数组,元素是5,6,7;

var arr = [23,78,100];
alert(typeof(arr));//对象类型Object
alert("len:"+arr.length);

arr[4] = 348;
arr[1] = "abc";
arr[2] = true;
//遍历数组。
for(var x=0;x<arr.length;x++){
    document.write("arr["+x+"]="arr[x]+"<br/>");
}

JS中的函数演示。
函数:就是一个功能的封装体。
定义功能通常需要两个明确。
1,功能的结果。
2,功能实现中的参与运算的未知的内容。

JS中定义函数的格式。
通过指定的关键字来定义。
funciton 函数名(参数列表){
    函数体;
    return 返回值;//如果没有具体的返回值,return语句可以省略不写。
}

function demo(){
    alert("demo run");
    return;
}
demo();//调用函数。

加法运算
function add(x,y){
    return x+y;
}
var sum = add(4,5);

函数的细节一:
1,只要使用函数的名称就是对这个函数的调用。
2,函数中有一个数组在对传入的参数进行存储。这个数组就是arguments

function show(x,y){
    alert(arguments.length);
    for(var a=0;a<arguments.length;a++){
        document.write(arguments[a]);
    }
}
show(1,5,6,7,8,3);//建议函数中定义几个参数就传递几个实参。

函数的细节二:

function getSum(){
    return 100;
}
var sum = getSum();//getSum函数运行,并将返回的结果赋值给sum。
var sum = getSum;//getSum本身是一个函数名,而函数本身在JS中就是一个对象。getSum就是这个函数对象的引用。
        //将getSum这个引用的地址赋给sum,这时sum也指向了这个函数对象。
        //相当于这个函数对象有两个函数名称。

alert("sum="+sum);//打印时候如果sum指向的是函数对象,那么会将该函数对象的字符串表现形式打印出来,
        //就是该函数的代码定义格式。

funciton show2(){
    alert("show2 run");
}
alert(show2());

JS函数的其他表现形式。
动态函数:使用的是JS中内置的一个对象Function.
只不过用的不是很多。
参数列表,函数体都是通过字符串动态指定的。

var add = new Function("x,y","var sum; sum=x+y; return sum;");
var he = add(4,8);

匿名函数:没有名字的函数。
通常是函数的简写形式。

var add3 = function(a,b){
    return a+b;
}
alert(add3(7,8));

function haha(){
    alert("haha run");
}
var xixi = haha;

//上述代码可以简写成下面的方式。
var xixi = function(){
    alert("haha run");
}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!