zoukankan      html  css  js  c++  java
  • JS基础一

    JavaScript 是 Web 的编程语言。

    所有现代的 HTML 页面都使用 JavaScript。

    JavaScript 是脚本语言

    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    HTML 页面引入JavaScript的三种方法:

    1.写在页面中<head></head>标签或者<body></body>标签中,已<script></script>标签开头

    2.直接在当前目录下新建一个.js的文件,在引入时<script src="xxx.js"></script>

    注意:html文档的加载执行顺序,从上到下执行,建议js代码写在<body>部分

    Js的输出语句:

    1.console.log("hello world") //需要到浏览器的控制台查看   alert("hello world")//调用BOM对象下面的Window对象,弹出提示框

    2.使用 innerHTML 写入到 HTML 元素。 

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p id="demo">我的第一个段落</p>
    
    <script>
    document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
    
    </body>
    </html>
    

      

    3.使用 document.write() 方法将内容写到 HTML 文档中。

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一个 Web 页面</h1>
    
    <p>我的第一个段落。</p>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>

    <--!请使用 document.write() 仅仅向文档输出写内容-->

    <--!如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖-->

      

    JS基础语法:

    数据类型:Number(数字)  包含整数,小数,浮点数 ;String(字符串);Array(数组) ; Object(对象);Function(函数)

    JS变量声明:ES5---var x,y=1,2;Es6--   let x 声明变量

    /*

    let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量,避免变量名冲突。

    作用域规则

    let 声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

    */

    JS数据类型,对象:

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。

    var a=123//数字    var a="hello world" //字符串   var a=true //布尔值   var a =Null //空值    var a;//Undefind 

     

    在 JavaScript中,几乎所有的事物都是对象,JavaScript 对象是拥有属性和方法的数据。声明对象的方法:   

    JS中使用{}来表示对象

    //声明对象
    <script>
    //声明方法1
    var obj={name:"tang","func":add,"age":"23"}    
    var obj={};
    obj["name"]="alex"
    console.log(obj)
    
    
    //声明方法二
     var objs=new Object()
     objs[name]="alex";
     objs["age"]=20;
     console.log(objs)
    
    
    </scrpit>
    

      

     

    JS中访问对象属性和方法

    访问对象属性:

    var obj={name:"tang",age:"20"};

    console.log(obj.name,obj.["age"]);//使用对象下标 或 对象.属性来访问

    访问方法

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <p>创建和使用对象方法。</p>
    <p>对象方法作为一个函数定义存储在对象属性中。</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566,
        fullName : function() 
        {
           return this.firstName + " " + this.lastName;
        }
    };
    func=person["fullName"]
    document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:" + person.fullName;
    /*

    不加括号输出函数表达式:function() { return this.firstName + " " + this.lastName; }

    */
    document.getElementById("demo").innerHTML = person.fullName();
    
    </script>
        
    </body>
    </html>

    JS的作用域

    JavaScript 作用域
    在 JavaScript 中, 对象和函数同样也是变量。
    
    在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
    
    JavaScript 函数作用域: 作用域在函数内修改。
    
    
    javascript局部作用域:
    变量在函数内声明,变量为局部作用域。
    局部变量:只能在函数内部访问。
    
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <p>局部变量在声明的函数外不可以访问。</p>
    <p id="demo"></p>
    <script>
    myFunction();
    document.getElementById("demo").innerHTML = "carName 的类型是:" +  typeof carName;
    function myFunction() 
    {
        var carName = "Volvo";
    }
    </script>
    
    </body>
    </html>
    
    因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
    
    局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
    
    javascript 全局变量
    变量在函数外定义,即为全局变量。
    全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 
    如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>
    
    <p>
    如果你的变量没有声明,它将自动成为全局变量:
    </p>
    <p id="demo"></p>
    <script>
    myFunction();
    document.getElementById("demo").innerHTML =
    	"我可以显示 " + carName;
    function myFunction() 
    {
        carName = "Volvo";
    }
    </script>
    
    </body>
    </html>
    
    变量的声明周期:
    JavaScript 变量生命周期在它声明时初始化。
    
    局部变量在函数执行完毕后销毁。
    
    全局变量在页面关闭后销毁。
    
    函数参数为局部变量,只对函数起作用
    

     

    JS的判断语句及条件循环:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        
    <script>
        //判断语句
        var i=5
        if (i<10)
        {
            console.log(i)
        }
        
        else{
    
            alert("false")
    }
    
    //JS判断语句 if()---else   if()--elseif()--else  注意:==是值想等  ===是全等及比较类型也想等
    
    
    //JS循环 for while循环
    for (var i=0;i<10;i++){
        console.log(i)
    }
    
    var a=0
    while (a>10){
        console.log(a);
        a++;
    }
    
    //a++是先执行代码在加一  ++a是先加1在执行代码  a--、--a同理
    
    //例子:通过for循环遍历数组
    var arr=[1,2,3,4,5]
    for (i in arr ){
        //将下标作遍历
        console.log(arr[i])
    }
    
    //length JS里面的对象都具有的属性
    for (var i=0;i<arr.length;i++){
        console.log(arr[i])
    }
    
    
    </script>
    
    </body>
    </html>    
    
    
            
    

      

    如果我失败了,至少我尝试过,不会因为痛失机会而后悔
  • 相关阅读:
    vue_源码 原理 剖析
    vue_vuex
    vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
    vue_mint-ui
    vue_ajax 请求
    vue_组件间通信:自定义事件、消息发布与订阅、槽
    vue_小项目_吃饭睡觉打豆豆
    vue-cli 脚手架 Command Line Interface
    程序员面试金典-面试题 04.03. 特定深度节点链表
    程序员面试金典-面试题 04.02. 最小高度树
  • 原文地址:https://www.cnblogs.com/tangcode/p/11880796.html
Copyright © 2011-2022 走看看