• HTML基础(四)JS


    HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python、Go、Java、C++等,都是一种独立的语言,Python的解释器有Python2.7、Python3.x,浏览器具有解释JavaScript的功能,所以它才是HTML的三把利器之一。

    在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。

    引入JavaScript代码,类似于Python的import

    <script src="public.js" type="text/javascript"></script>

    head中引入JS与body中引入JS区别

    html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。

    注释

    单行注释通过 //  多行通过 /* */

    一、JS变量:用var定义的是局部变量,直接定义的是全局变量

    name = 'dsx'; // 默认全局变量

    function func() {

        var name = 'niulaoshi'; // 局部变量
                            }
    二、JS基本数据类型(JavaScript 声明数据类型通过new)
    1)字符串
    a.定义字符串
    var str = '你开心就好!';
    var name = '大师兄';
    b.字符串的拼接
    var name_str = name+str;  
    c.字符串操作
    str = '大师兄'
    str.charAt(0) 根据角标获取字符串中的某一个字符  char字符
    str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y
    str.length 获取字符串长度
    str.concat('牛教授')  拼接字符串
    str.indexOf('大师') 获取子序列的位置
    str.slice(0,1)  切片 start end
    str.toLowerCase()  变更为小写
    str.toUpperCase() 变更大写
    str.split('师',1) 切片 返回数组 参数2 为取分割后数组的前x个元素
    2)数字类型JavaScript 只有一种数字类型。数字可以带小数点,也可以不带) 
    var age = 18;
    var score = 89.22;
    number = '18';
    a.字符串转
    var n = parseInt(number);
    b.转换成小数
    f =parseFloat(number)
    c.布尔类型(true false)
    var t = true; var f = false;
    3)数组类型(就是Python的列表)
    a.第一种创建方式
    var list = new Array();
    list[0] = '大师兄';
    list[1] = '牛教授';
    b.第二种创建方式
    var list2 = new Array('大师兄','牛教授');
    c.第三种创建方式
    var list3 = ['大师兄','牛教授'];
    d.数组操作
    var list3 = ['大师兄','牛教授'];
    list3.length 数组的长度
    list3.push('dsx') 尾部追啊参数
    list3.shift() 头部获取一个元素 并删除该元素
    list3.pop() 尾部获取一个元素 并删除该元素
    list3.unshift('dsx') 头部插入一个数据
    list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素
    list3.splice(n,0,val) 指定位置插入元素
    list3.splice(n,1,val) 指定位置替换元素 
    list3.splice(n,1) 指定位置删除元素
    list3.slice(1,2) 切片; 
    list3.reverse() 反转
    list3.join('-') 将数组根据分割符拼接成字符串
    list3.concat(['abc']) 数组与数组拼接
    list3.sort() 排序
    4)对象类型(等同于Python的字典)
    var dict = {name:'dsx',age:18,sex:'男' };
    var age = dict.age;
    var name = dict['name'];
    delete dict['name'] 删除
    delete dict.age 删除
    5)定时器(setInterval)
    setInterval(alert('大师兄'),5000); //参数1 为定时器执行的功能,第二个参数为定时器工作的间隔时间 毫秒为单位
    function t1() {
        console.log('我是大师兄')
                        }
    setInterval('t1()', 5000);// 可以运行方法
    6)JS条件判断语句
    if (条件) {
        执行代码块
    } else if (条件) {
        执行代码块
    } else {
        执行代码块
    };
     
    if (1 == 1) {//两个=号只要比较值一致就是true
        console.log()
    } else if (1 != 1) {
        console.log()
    } else if (1 === 1) {//三个=号不仅值要一直而且类型要一直才会返回true
        console.log()
    } else if (1 !== 1) {
        console.log()
    } else if (1 == 1 && 2 == 2) { //and
        console.log()
    } else if (1 == 1 || 2 == 2) { //or
        console.log()
    }
     
    switch (a) {
        case 1:
            console.log(111);
            break;
        case 2:
            console.log(222);
            break;
        default:
            console.log(333)
    }
    7)JS循环语句
    第一种循环
    循环的是角标
    tmp = ['宝马', '奔驰', '尼桑'];
    tmp = '宝马奔驰尼桑';
    tmp = {'宝马': 'BMW', '奔驰': 'BC'};
    for (var i in tmp) {
        console.log(tmp[i])
    }
    第二种循环
    不支持字典的循环
    for (var i = 0; i < 10; i++) {
        console.log(tmp[i])
    }
    第三种循环
    while (1 == 1) {
        console.log(111)
    }
    8)函数定义
     1、普通函数
    function 函数名(形参, 形参, 形参) {
        执行代码块
    }
    函数名(实参, 实参, 实参);
     
    2、匿名函数 匿名函数没有名字,无法调用时找到,将整个函数当做一个参数传递
    setInterval(function () {
        console.log(11)
    }, 5000);
    3、自执行函数创建函数并且自动执行
    当引入多个js文件时,函数名可能会出现重复,这时通过自执行函数,保证每一个js文件都会被解析,从而生成独立的容器,防止调用冲突
    (function (name) {
        console.log(name)
    })('dsx');
     
    作用域
    Python的作用域是以函数作为作用域的,其他语言以代码块({})作为作用域的。
    JavaScript是以函数作为作用域
    function tmp() {
        var name = 'dsx';
        console.log(name)
    }
    tmp();
    console.log(name);
    2、函数作用域在函数未被调用之前,已经创建
    var name = 'nhy';
    function a() {
        var name='dsx';
        function b() {
            console.log(name);
        }
        return b
    }
     
    var c = a();
    c();
    3、函数的作用域存在作用域链(代码不执行时,先生成作用域链)
    当函数嵌套函数时,每一个函数为一个作用域,多层就叫做作用域链,查找遵循作用域链规则
    function outer() {
        name = 'nn';
        function inner() {
            var name = 'ii'
            console.log('in', name)
        }
     
        console.log('out', name);
        inner()
    }
    outer();
    函数不调用时,只生成作用域,当调用时遵循作用域链执行,name都为hhh
    function outer() {
        var name = 'nn';
        function inner() {
            console.log('in', name)
        }
     
        var name = 'hhh';
        console.log('out', name);
        inner()
    }
    outer();
    4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行
    var xxx;
    function func() {
        console.log(name);
        var name = 'dsx';
    }
    func();
  • 相关阅读:
    curl常用选项
    cuda
    mysql 备份文件.xbstream 恢复到本地
    firewall 常用命令(update...)
    ownCloud 研究笔记(update...)
    V3
    English trip EM3-LP-3A ROOMMATES Teacher:Corrine
    V3
    English trip EM3-LP-5A Shopping Teacher:Taylor
    新概念 Lesson 11 Which book?
  • 原文地址:https://www.cnblogs.com/nickey85/p/10076547.html
Copyright © 2020-2023  润新知