zoukankan      html  css  js  c++  java
  • JavaScript基础

    1:什么是JavaScript?

       他是一种描述性的语言,也是一种基于对象的(Object)和事件驱动(Event Driver)的,并且具有安全性能的脚本语言;

    它的特点如下:

      特点如下:
    01:主要用来在HTML页面中添加交互行为
    02:是一种脚本语言,语法和Java类似
    03:一般用来编写客户端的脚本
    04:是一种解释性语言,遍执行便解释

    2:JS基础架构
    <script type="text/javascript">
    alter('ok')
    </script>

    3:JS的组成:

    建议:

    <script>..........</script>可以包含在文档中的任何地方,只要保证这些代码在被使用钱已经读取并加载到内存即可,最好放在<body>前,

    4:JavaScript的执行顺序

          发送请求---------数据处理----------发送响应

    在网页中引用JavaScript的方式

    01:内部使用JavaScript文件

    02:使用外部JavaScript文件

    03:直接在TML标签

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>例子</title>
    </head>
    <body>
    <script type="text/javascript">
    document.write('hello,javascript');
    </script>
    </body>
    </html>

    JavaScript的核心语法:

    语法:

    var 合法的变量名;

    关键字为var 命名规则:

    01:可以由数字.字母 ,下划线和$符号组成

    02:首字母不能为数字

    03:不能使用关键字命名

    04:可以在声明变量的同时为变量赋值,这称为变量的初始值,

    var width =20;//在声明变量width的时候,将数值20赋给变量width
    var x,y,z=10;//在一行代码中声明多个变量时,各变量之间用逗号隔开

    需要强调的是:JavaScript区分大小写,所有的大小写不同的变量名表示不同的变量,JavaScript是一种弱类型语言,因此允许直接声明变量而直接使用,系统将自动为变量赋值

    例如:

    x=99;//没有声明x直接使用

    数据类型:

    undefined(未定义类型)

    null(空类型)

    number(数值类型)

    String(字符串类型)

    Boolean(布尔类型)

    typeof:来判断一个值或者变量究竟属于那种数据类型 

    语法:

    typeof(变量或值)

    返回结果有以下几种:

    undefined:如果数据类型为undefined,返回undefined类型的结果

    number:如果数据类型为number,返回number类型的结果

    String:如果数据类型为String,返回String类型的结果

    boolean:如果数据类型为boolean,返回boolean类型的结果

    object:如果数据类型为null,或者变量是一种引用类型,如对象,数组 ,返回object类型的结果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>typeof的功能和用法的实现</title>
    </head>
    <body>
    <script type="text/javascript">
    document.write("<h2>对变量或值的调用typeof运算符返回值:</h2>");
    var width,height=10,name="rose";
    var date =new Date();//获取时间
    var arr =new Array();//定义数组
    document.write(""+typeof(width)+"</br>");
    document.write("height:"+typeof(height)+"</br>");
    document.write("name:"+typeof(name)+"</br>");
    document.write("date:"+typeof(date)+"</br>");
    document.write("arr:"+typeof(arr)+"</br>");
    document.write("true:"+typeof(true)+"</br>");
    document.write("null:"+typeof(null));
    </script>
    </body>
    </html>

    数组:

    创建数组的语法:

    var 数组名称 =new Array(size);

    var fruit  =new Array(5);
    
    var fruit =new Array("apple","orange","pear","banana");
    
    
    也可以这样
    var fruit =new Array(4);
    fruit [0] ="apple";
    fruit [1] ="orange";
    fruit [2] ="pear";
    fruit [3] ="banana";
    
    
    
    var fruit =new Array["apple","orange","pear","banana"];

    数组常用的方法和属性:

    属性:length:设置或者返回数组中的元素数目

    方法:

        join():把所有的元素放在一个字符串中,通过一个分隔符进行分割

        sort():对数组排序

        push():想数组末尾加上一个或者多个元素,并返回新长度

    运算符号:
    算术运算符:+,-,*,/,%,++,--
    逻辑运算符:=,&&,||,!
    比较运算符:<,>,<=,>=,!=,!==,===
    赋值运算:=,+=,-=

    逻辑控制语句:

    01: if结构

    语法:

    if(表达式1){
    //JavaScript语句1
    }else{
    //JavaScript语句2
    }

    02:switch结构

    语法:

    switch(表达式){
    case 值1:
    //JavaScript 语句1 
    breakcase 值2:
    //JavaScript 语句2
    breakcase 值3:
    //JavaScript 语句3
    break;
    .......
    default:
    //JavaScript 语句n
    break;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>上机三</title>
    </head>
    <body>
        <script type="text/javascript">
     var number1 =prompt("请输入第一个数字");
     var number2 =prompt("请输入第二个数字");
     var number3=prompt("请输入运算符");
     var number=0;
     number1=Number(number1);
     number2=Number(number2);
    
     switch(number3){
     case "+":
         number =number1+number2;
         break;
     case "-":
         number =number1-number2;
         break;
     case "*":
         number =number1*number2;
         break;
     case "/":
         number =number1/number2;
         break;
     }
     alert(number1+number3+number2+"="+number)
    </script>
    </body>
    </html>

    03:for循环

    语法:

    for(初始化 ;调价;增量或者减量){
    //JavaScript语句1 
    }
     

    04:while循环

    语法:

    while(条件){
    //JavaScript语句1
    }

    05:do-whlie循环

    语法

    do(条件){
    //JavaScript语句1
    }while(条件);

    06:for-in

    语法:

    for(变量in对象){
    //JavaScript语句1
    }

    07:中断循环

    break:立即退出整个程序

    continue:退出当前循环,根据条件判断是否进入下一个循环

    注释:

    单行注释://

    多行注释:/*         */  快捷键: Ctrl+shift+/

    常用的输入和输入:

    alert();

    语法:

    alert(“提示信息”);

     
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>简答四</title>
    </head>
    <body>
    <script type="text/javascript">
    
    function email (em){
        alert(em);
        
    
        
        if(em.indexOf('@')==-1){
            alert('请输入正确的邮箱地址');
            return;
        }else if(em.indexOf('.')==-1){
            alert('请输入正确的邮箱');
            return;
        } 
        else{
            alert(em.substring(em.indexOf('@')+1,em.indexOf('.')));
        }
    }
    
    </script>
    <input type="button" value ="请输入邮箱地址" onclick="email(prompt('请输入邮箱','susan@sohu.com'))">
    </body>
    </html>

    系统函数:

    parseInt();

     var num1 =parseInt(“19.90”);//返回的为19
     var num2 =parseInt(“19wwww”);//返回的为19
     var num3=parseInt(“eccfff19.90”);//返回的为NaN

    parseFolat();

    语法:

    parseFolat(“”字符串);

    var num1 =parseFloat(“19.90”);//返回的为19.90
     var num2 =parseFloat(“19wwww”);//返回的为19
     var num3=parseFloat(“eccfff19.90”);//返回的为NaN

    isNaN();

    语法:

    isNaN(x);

    var flag =isNaN("12.2");//返回为false
    var flag 1=isNaN("12.2s");//返回为true
    var flag 2=isNaN(12.2");//返回为false

    自定义函数:

    有参函数
    
    function 函数名( 参数1,参数2,参数3){
    //JavaScript语句1
    [return 返回值]
    }
    
    
    无参函数
    
    function 函数名( ){
    //JavaScript语句1
    
    }

    调用函数:

    事件名="函数名"

    变量的作用域:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>作用域e</title>
    </head>
    <body onload="second()">
    <script type="text/javascript">
    var i=20;
    function first(){
        var i=5;
        for(var j=0;j<i;j++){
            document.write("&nbsp;&nbsp;&nbsp;"+j);
        }
    }
    function second(){
        var t=prompt("请输入一个数","")
        if(t>i){
            document.write(t);
        }else{
            document.write(i);
            first();
        }
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    WebStorm 在 Mac 版本的基本设置,包括 ES6、Node.js、字体大小等
    Mac 找文件或文件夹,以及开启其他程序,截图快捷键
    windows 全局安装 express 但无法命令行执行
    17_11_3 Mysql 联合查询
    17_11_1 Mysql 创建表并设置主键自增 + 排序 +外键
    PLC
    17_10_31 ./ ../ / ~/的区别
    17_10_30 Mac qq可以登录但是网页打不开
    17_10_26 面试汇总
    17_10_25 SSH 框架
  • 原文地址:https://www.cnblogs.com/3020815dzq/p/8676990.html
Copyright © 2011-2022 走看看