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

    什么是JavaScript?

    JavaScript是一种基于对象和事件驱动的、并具有安全性的语言脚本

     JavaScript是解释执行(边执行边解释):源代码 ----浏览器引擎

    两大功能:1.表单校验

                         2.特效

     JavaScript组成

     1.核心(ECMAscript)

    ECMAscript与web浏览器并没有依赖关系,web浏览器只是ECMAscript实现可能的宿主环境之一,宿主环境不仅提供ECMAscript实现,也提供该语言的扩展。其他宿主环境包括nodeJs等。ECMAscript规定了这门语言的如下组成部分:语法,类型,语句,关键字,保留字,操作符,对象。

     2.文档对象模型(DOM)

    文档对象模型(DOM)提供访问和操作网页内容的方法和接口,是针对XML但经过扩展用于html的应用程序接口(API)。

     3.浏览器对象模型(BOM)

    BOM提供与浏览器交互的方法和接口,是可以访问和操作浏览器窗口的浏览器对象模型。使用BOM可以控制浏览器显示的页面以外的部分。

    包括浏览器窗口弹出,缩放。navigator对象,location对象(提供浏览器加载页面的详细信息),screen对象(提供用户浏览器分辨率等信息),对cookies的支持,对xmlHttpRequest的支持等。

    JavaScript基本结构

    <script type="text/javascript">
          JavaScript语句;
    </script>

    例子一:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>第一个例子</title>
    <script type="text/javascript">
      //js 中字符串    推荐使用''
      document.write('Hello,Java Script');
    </script>
    </head>
    <body>
    
    </body>
    </html>

    JavaScript执行原理

    1.浏览器客户端向服务端发送请求

    2.数据处理:服务器将某个包含JavaScript的页面进行处理

    3.发送响应:服务器将含有JavaScript的HTML文件页面发送到浏览器客户端,浏览器客户端从上到下逐条解析HTML标签和JavaScript,并将页面效果发送给客户

    如下图:

    使用客户端脚本的好处是:

    1.包含JavaScript的页面只要下载一次即可,这样能减少不必要的网络通信

    2.JavaScript程序有浏览器客户端执行,而不是由服务器端执行,因此可以减少服务器端的压力

    在网页中引用JavaScript的三种方式

    1.内部JavaScript文件:

    这种方式适用于JavaScript代码较少,并且网站中每个网页使用的JavaScript代码均不相同的方式

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>内部JavaScript文件</title>
    <script type="text/javascript">
      document.write('Hello,Java Script');
    </script>
    </head>
    <body>
    
    </body>
    </html>

    2.外部JavaScript文件:

    减少代码的冗余。

    在外部文件中,编写一个以.js为扩展名的文件,将该文件指定给<script>标签中的“src”属性

    outer.js文件:

    alert('OK Java Script!');
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>外部文件</title>
    <script type="text/javascript" src="outer.js"></script>
    
    </head>
    <body>
     
    </body>
    </html>

    3.直接在HTML标签中:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>HTML标签内</title>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
      <input id="btn" onclick="javascript:alert('OK!');" type="button" value="我是一个按钮,但是你点坏了不用陪"/>
    </body>
    </html>

    JavaScript核心语法

    1.声明变量和赋值

    var    合法的变量名;
    var with=20;

    JavaScript变量名命名与java相同,但是JavaScript区分大小写。

    由于JavaScript是弱语言,因此允许不声明变量而直接使用,系统会自动声明该变量

    2.数据类型

    undefinded类型(未定义类型):当声明变量没有初始化的时候,该变量的默认值是undefinded

    null类型(空类型):表示“什么都没有”的占位符,可以用来判断·某个变量是否被赋值,null表示对一个变量赋予了一个空值

    number类型(数值类型):这种类型既可以表示32位的整数,也可以表示64位的浮点数

    String类型(字符串类型):1)字符串定义:一组被引号(单引号或双引号)括起来的文本     

                                                           var string =“我是只小狗狗,我吃shi”;

                                                   2)字符的属性和方法

                                                            字符串对象.length;

                                                          var string =“我是只小狗狗,我吃shi”;

                                                          var strlength=string.length;

                                                        方法:  字符串对象.方法名();

    方法 描述
    indexOf(str,index) 查找某个指定的字符在字符串中首次出现的位置
    charAt(index) 返回在指定位置的字符
    toLowerCase() 把字符串转换成小写
    toUpperCase() 把字符串转换成大写
    substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
    split(str) 将字符串分割成字符串数组

    boolean类型(布类型):true和false

    3.数组

    创建数组

    var 数组名称   = new Array(size)

    数组赋值

    1.

    var  fruit= new Array("apple","orange","banana")

    2.

    var  fruit= ["apple","orange","banana"]

    数组常见属性和方法

    类别 名称 描述
    属性 llength 设置或返回数组中的数目
    方法 jjoin() 把数组中的所有元素放入一个字符串,通过分隔符进行分割
    sort() 对数组排序
    push() 向数组末尾添加一个或多个元素,并返回新的长度

    4.运算符号

    类别 y运算符号
    算数运算符 +、-、*、/、%、++、--
    比较运算符 >  <  >=   <=   ==   !=   ===   !==
    逻辑运算符 &&    ||   !
    赋值运算符 =   +=    -=

    5.逻辑控制语句

    选择结构

    if(表达式){
           
         //JavaScript语句
         
    }esle{
    
         //JavaScript语句
    }
    switch(){
       case 值1:
            //javaScript语句
         braek;
     case 值2:
            //javaScript语句
         braek;
          
        ........
        default:
            //javaScript语句
    
          break;
    
    }

    6.循环结构

    for循环语句

    for(初始化;添加;增量或减量){
    
             //javaScript语句
    }

    while循环语句:

    while(条件){
    
          //javaScript语句
    }

    do-while语句

    do{
    
       //javaScript语句
    
    
    
    }while(条件)

    for-in循环语句

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

    7.注释

        //我是单行注释
       /*
         我是多行注释
        */

    8.输入和输出

    警告alert()

    alert("提示信息")

    提示prompt()

    prompt("提示信息","输入框的默认信息")

    9.语法约定

    1)javaScript区分大小写,大写字母和小写字母是不能互相替代的

    2)当声明变量、对象或函数时,名称可以包括大写字母、小写字母、数字、下划线和美元符号,但必须以字母、下划线或美元符号开头

    3)javaScript允许开发者自行决定是否已=以分好结束一行代码,如果没有分号,javaScript就将行代码的结尾看做该语句的结尾

    4)在js中,0,-0,null," ",false,undefined,fasle作为判定条件时,都返回false,除了这些,都返回true

  • 相关阅读:
    浅析 MySQL Replication(转)
    mysql优化案例
    create index 与 alter table add index 区别
    /etc/sysctl.conf参数解释(转)
    Linux内核 TCP/IP参数调优
    OneProxy常用参数说明
    转载:如何在面试中写出好的代码
    F面经:painting house
    Lintcode: Merge Sorted Array II
    Lintcode: Median
  • 原文地址:https://www.cnblogs.com/luoxionghenku/p/8669951.html
Copyright © 2011-2022 走看看