Javascript(1)-js入门

1.简介

  • JavaScript 是脚本语言
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

注释的意义:解释说明代码的作用

单行注释:// 注释
多行注释:/* 注释 */
文档注释:/**  注释 */

2.基础

编程语言:以处理数据为核心的

    编程语言中表示数据:
        数据类型:表示数据的类型
        变量:编程语言中用来临时存储数据的容器


    数据类型:
        1. 基本数据类型
        String:字符串
        Number:数字【整数、浮点数】
        Boolean:布尔类型【true/false】
        undefined:未定义类型
        null:表示为空的类型

        2. 引用数据类型:一般情况用来表示对象的
        object对象类型

    变量:
        准备:JavaScript是一个面向对象的弱类型的脚本语言
        >变量定义:使用var关键字来定义变量【推荐】
        >变量命名规则:变量名称只能以下划线(_),$符号或者字母开头。
        >变量的命名规范:1驼峰命名法(一个或者多个单词组成,第一个单词全部小写,后面每个单词首字母大写);2见名知意
        >变量的使用规则:先声明,后使用

        > JavaScript变量,一般以下划线开头[近年出来的规范]


        > 可以使用它typeof()来判断某个数据的类型

    数据类型的转换:
        字符串->数字   Number()
        字符串->整数     parseInt()
        字符串->浮点数    parseFloat()

    JavaScript错误调试
        1.代码开发过程中,不一定会提示错误!
        2.在浏览器的F12窗口中,如果JavaScript代码执行出现错误,就会在Console(控制台)提示错误信息和错误代码的位置!


    运算符:
        算数运算符:+ - * / %
        赋值运算符:= += -= *= /= %=
        关系运算符:> >= < <= != ==  ===
        逻辑运算符:与运算&&  或运算||  非运算 !
        三元运算符: 简化的if-else判断
                (条件)?(条件为真执行的代码):(条件为假执行的代码)

3.循环

/*
        JS中提供了三种普通循环结构
            for循环
            while循环
            do-while循环
        */
        /*for(var i = 0; i < 10; i++) {
            // alert("差一点一米八" + i);
            console.log("for循环执行结果:" + i);
        }*/

        /*var x = 0;
        while(x > 10){
            console.log("while循环执行结果:" + x);
            x++;
        }*/

        /*var m = 0;
        do{
            console.log("do-while循环:" + m);
            m++;
        }while(m > 10);*/

        /*
        循环中的continue和break
        */
        // continue是结束本次循环,直接开始下一次循环
        for(var i = 0; i < 100; i++) {
        
            if(i % 33 == 0){
                // continue;/*终止本次循环,直接开始下次循环*/
                // break;/*跳出循环*/
            }
            console.log(i);
        }
        // break;直接跳出循环

九九乘法表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九九乘法表</title>
    <style type="text/css">
        span{
            display: inline-block;
            width: 100px;
            height: 20px;
            border:solid 1px red;
        }
    </style>



    <script type="text/javascript">
        for (var i = 1; i<=9; i++) {// 控制的行数
                document.write("")
            for (var m = 1; m<=i; m++) {// 控制的是列数
                document.write("<span>"+m+"x"+i+"="+(i*m)+"</span>");
            }
            document.write("<br/>");
        }
        var m=1;
        while(m<=9){
            var n=1;
            while(n<=m){
                document.write("<span>"+n+"x"+m+"="+(n*m)+"</span>");
                n++;
            }
            document.write("<br/>");
            m++;
        }

        var x=1;
        do{
            var y=1;
            do{
                document.write("<span>"+y+"x"+x+"="+(x*y)+"</span>");
                y++;
                }while(y<=x);
                document.write("<br>");
                x++;
            }while(x<=9);

    </script>
</head>
<body>

</body>
</html>

九九乘法表

4.函数操作

  • 函数:是封装了一段代码,方便这段代码的重复使用
def <func_name>(参数列表):
            函数中的代码
            return 返回值

        javascript中可以通过function关键字来定义函数
  • 函数中的参数:函数要执行必须需要的数据 定义在函数中的变量:形式参数 实际调用函数时传递的数据:实际参数
  • 函数的返回值:函数执行完成之后返回的结果 通过return关键字来返回函数执行的结果

5.字符串操作

    JS中,包含在一对单引号或者双引号中间的字符,称为字符串
    var _str = "   hello javascript!    "

    // 字符串的长度 
    console.log(_str.length);
    // 判断某个字符第一次出现的位置
    console.log(_str.indexOf("a"))
    // 判断某个字符最后一次出现的位置
    console.log(_str.lastIndexOf("a"))
    // 截取一段字符串
    console.log(_str.substring(4,10))
    // 剔除字符串两边的空格
    console.log(_str);
    console.log(_str.trim());

6.Math对象

    Math对象,可以通过Math...直接使用它的函数
    Math.random() 获取一个0~1之间的随机数
    Math.floor(x) 向下取整;获取一个数据的最大整数 
    Math.ceil(x) 向上取整
    Math.round(x) 四舍五入
    Math.pow(x, y) 获取x的y次方
    Math.sqrt(x)开平方
    声明数组,使用方括号
    var _names = ["柯景腾", "沈佳宜", "许博淳", "谢明和"]

7.函数操作

这里主要指字符串的各种函数 str.length() 获取字符串长度 str.charAt(index)获取指定位置的字符 str.indexOf(char)获取指定字符在字符串中出现的位置 str.lastIndexOf(char)获取指定字符在字符串中最后出现的位置 str.substring(start, end)截取字符串 str.slice(start, end)截取字符串

8.数组的使用

pop()删除最后一个元素 push()末尾追加一个元素 shift()删除开头的一个元素 unshift()开始位置增加一个元素 indexOf()查看某个元素的位置 length获取数组的长度

9.内置日期时间对象Date

创建日期对象new Date() 获取年份:getFullYear() 获取月份:getMonth() 注意:获取月份 0~11 获取天数:getDate() 获取星期:getDay() 获取小时:getHours() 获取分钟:getMinutes() 获取秒钟:getSeconds() 获取毫秒:getMilliseconds()

延时函数:setTimeout(fn, time) 计时函数:setInterval(fn, time)

10.js中innerHTML与innerText的用法与区别

用法: <div id="test"> <span style="color:red">test1</span> test2 </div>

在JS中可以使用:

  • test.innerHTML

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”

  • test.innerText

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

  • test.outerHTML

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

  • getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
document.getElementById(id)

说明 HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName()getElementsByTagName()。 不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。 在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

厚土Go学习笔记 | 09. 类型转换 与 类型推导

在Go语言中,不同类型的项之间赋值时,需要显式转换。 表达式 T(v) 将值 v 转换为类型 T 。 var i int = 42 var f float64 ...

35910
来自专栏hbbliyong

12个非常有用的JavaScript技巧

在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码。  1) 使用!!将变量转换成布尔类型 有时,我们需要检查...

2707
来自专栏CSDN技术头条

12个非常有用的JavaScript技巧

在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码。 1) 使用!!将变量转换成布尔类型 有时,我们需要检查一些变...

2176
来自专栏运维小白

9.4sed(上)

sed工具 sed -n '5'p test.txt sed -n '1,5'p test.txt sed -n '1,$'p test.txt sed -n ...

1868
来自专栏前端菜鸟变老鸟

Object.keys和Object.values

使用Object.keys()或者Object.values()获取循环变量,渲染的时候根据循环变量获取值。Object.keys()函数返回索引(不仅仅是数字...

892
来自专栏finleyMa

说下js中的bind

bind的受体是对象,返回的是个新的函数。 我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。 也就是无论怎么调用这个返回的函数...

6551
来自专栏鸿的学习笔记

Python漫谈

列表切片的标准是lst[a:b:c] a是列表切片的开头,b是切片的结尾,c是step。 这里的表示从第一个元素开始,按照每隔一步,到第三个元素结束

1013
来自专栏python3

python3--元组(tuple),列表(list),字典dict,其它(for,enumerate,range)

元组被称为只读列表,即数据可以被查询,但不能被修改,所以,字符串的切片操作同样适用于元组

2401
来自专栏LEo的网络日志

c库函数strncat出现乱字符

3887
来自专栏Golang语言社区

厚土Go学习笔记 | 17. 结构体及用指针访问结构体

结构体是个很有用的东西,在用计算机语言描述现实世界里的东西时,不得不大量的使用它。把现实世界的某一样东西的各种属性,用一个一个的变量记录下来。 最简单的比如:平...

3488

扫码关注云+社区

领取腾讯云代金券