（15）javaScript入门

什么是javaScript

HTML用来做页面的架构，CSS用来做页面样式的布局

javaScript就是用来完成页面用户交互的，JS写的就是叫脚本

js就是弱语言类型，不同类型的时候可以相互转换

js写在script标签内，script标签可以出现在html的任意位置

script标签一般书写在body标签的最底部，但写在body标签和html标签之间，会被解析在body的最底部，所有代码书写在该位置也是合理的

PS：html的解析是由上而下的，所以脚本的执行也是根据html标签的顺序执行的

常用语句

1、alert('弹出警告') #alert就是警告的意思

2、<script src="js的引入.js"> #通过script从外部引入脚本

3、var 变量名 = 变量值； #var是定义变量的关键词

4、new #创建对象的关键词

5、print #这个功能就是通过浏览器调用打印机打印页面

6、console.log （xxx） #就是js语法用来打印的

7、// #这个是js的注释

8、! #是取反的意思

9、isNaN #检查是不是NaN

8、<script src="js的引入.js"> #从外部引入脚本

9、var n=10; #定义一个数字类型

10、var s = 'str' ; #定义一个字符串

11、var b = true; #定义一个布尔值

12、console.log(m,typeof (m)) #查看值的类型，查看类型m时候可以不加括号

13、var m = new Number(100); #创建一个新的对象

14、var x = Number('123'); #值类型的转换,这里是将字符串123转换成数字123

15、var s = '字符串'; #定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号

16、var b = true; #定义布尔值

17、var abc; #定义一个未定义类型

18、== #这个是用来判断值是否相等，这个是做值比较

19、=== #判断本质上是否相等，就是做值与类型比较

20、var num = 666 + ''; #数字转换成字符串

21、var res1 = '10' + 5; #js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接

22、var res2 = '10' - 5; #这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法

23、var res = '888' - 0; #字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了

24、var ress = +'888'; #字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串

25、 isNaN（结果） #判断转换的结果是否是非数字类型

26、res = parseInt('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值

27、res = parseFloat('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值

28、var arr = [1,2,5,3,4]; #定义数组

29、console.log(arr[2]); #数组的查询 => 索引即可

30、delete arr[4]; #数组的删除

31、delete arr[arr.length - 1]; #删除数组中最后一个,arr.length - 1就是最后一个，以此类推-2就就是删除最后第二个

32、arr[4] = 100; #修改数组中的指定位置值

33、arr.unshift(123); #在数组的头位置增加值

34、arr.shift(); #删除数组头位置的值

35、arr.push(888); #在数组的尾部增加一个值

36、arr.pop(); #将数组的尾部的值删除

37、arr.splice(1,1,999); #splice可以完成除了查的所有功能，包含插入。spilce（从什么索引开始，操作多少位，操作成什么(这个可以用逗号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）

38、newarr = arr.splice(1,2); #slice 切片操作,切片之后数组内的值就没有了，被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中

39、var str =arr.join('-'); #将数组中的值以指定的符号拼接成字符串

40、narr = str.split('-'); #字符串对应有一个逆运算,将字符串以指定的符号拆分成数组，拆分后数组内的值是以字符串形式存在，可以通过索引修改类型

41、narr[2] = narr[2] - 0; #索引数组内指定位置的值改变类型

42、var dic = {name:'liuxx',age:'100'}; #js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用

43、console.log(dic.name); #查找字典中指定的值，对象的调用就是对象加.来调用

44、console.log(dic['age']); #查找字典中指定的值，对象中对象中所有的key都是字符串形式，和42的指令是一样的效果，知识写法不同

45、dic.sex = 'male'; #字典的增加

46、dic.age = 99; #修改字典内的指定key的值

47、delete dic.age; #字典内的值删除

48、函数的定义

function fn1() {
    console.log('我是函数fn1');
}

49、 fn1(); #函数的调用

50、#定义函数的另一种方式

var fn2 = function () {
    console.log('我是函数fn2');
};

51、匿名函数的定义（匿名函数只能在定义阶段被调用一次）（第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理）

(function () {
    console.log('我是匿名函数')
})();

52、onmouseout \ onmouseover #添加鼠标悬浮事件out是离开，over是悬浮（就是鼠标悬停）

53、

PS：js一旦连接外部脚本，script标签内部的代码就会失效，只能在后面再写一个script标签

PS：js的打印应该在页面检查的console里面

PS：js里直接定义变量可以直接使用，输出的就是underfined

PS：js很随意，console.log(m,typeof (m)) / console.log(m,typeof m);查看值类型时候可以加括号也可以不加;

PS：黑色的表示字符串，蓝色表示数字

PS：js中字符串的拼接优先级高于数字运算的加法

js执行的顺序(是根据HTML的执行顺序)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js初识</title>
    <script>
    alert('弹出警告1')
    </script>
</head>
<body>
    js初识，js写在script标签内，script标签可以出现在html的任意位置
    <script>
        /*alert就是警告的意思*/
        alert('弹出警告2')
    </script>
</body>

<!--script标签一般书写在body标签的最底部，但写在body标签和html标签之间，会被解析在body的最底部，所有代码书写在该位置也是合理的-->
<script>
    /*alert就是警告的意思*/
    alert('弹出警告3')
</script>
</html>

PS：脚本要获取页面内容，改脚本一定要放在内容的下方

JS的引入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js初识</title>
</head>
<body>
    js初识，js写在script标签内，script标签可以出现在html的任意位置
</body>
<!--这里就是从外部引入脚本-->
<script src="js的引入.js">

</script>
</html>

js的基本数据类型（值类型、引用类型、特殊类型）

值类型：

1、number(数字类型) ： js里面没有整型和浮点型，负数小数的区别，只有一个类型就是数字类型

2、string：字符串类型

3：boolean #布尔类型

4、underfined #未定义类型

数据类型实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js语法</title>
</head>
<body>
    <h3>11111</h3>
</body>

<script>
    // 定义一个数字类型
    var n=10;
    //打印值和查看值类型
    console.log(n,typeof(n));

    //创建一个新的对象
    var m = new Number(100);
    console.log(m,typeof (m));
    //console.log(m,typeof m); 查看类型时候可以加括号

    //这个是类型的转换，将值的类型转成number
    var x = Number('xxx');
    console.log(x,typeof x);

    //  定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号
    var s = '字符串';
    console.log(s,typeof s);

    // 布尔类型,js中true和false都是小写
    var b = true;
    console.log(b,typeof b);

    //定义一个未定义类型
    var abc;
    console.log(abc,typeof abc);

</script>
</html>

引用类型

1、function ：函数

2、obj：一般都去当dic字典来用

js类型转换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js语法</title>
</head>
<body>
    <h3>11111</h3>
</body>

<script>
    //值的比较,==只做值的比较，===做值和类型的比较
    console.log('10' == 10);
    console.log('10' === 10);

    //js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接
    var res1 = '10' + 5;
    console.log(res1,typeof res1);

    //这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法
    var res2 = '10' - 5;
    console.log(res2,typeof res2);

    // 数字转换成字符串
    var num = 666 + '';
    console.log(num,typeof num);

    //字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了
    var res = '888' - 0;
    //字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串
    var ress = +'888';
    console.log(res,typeof res);
    //错误的转换方式,这个就会返回一个NaN,NaN就是非数字类型
    var resss = +'123abc';
    console.log(resss)

    //将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值
    res = parseInt('3.1.4abc');
    console.log(res)

    //将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值
    res = parseFloat('3.1.4abc');
    console.log(res)

</script>
</html>

PS：js很随意，console.log('10' == 10);，字符串10是等于数字10的，因为js中是自动转换的

特殊类型

1、Null #这个Null开头的n是大写的

2、array

3、Date

4、RegExp

5、Math

js类型的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js类型的使用</title>
</head>
<body>
    js类型的使用
</body>
<script>
    //数组的操作

    //定义数组
    var arr = [1,2,5,3,4];
    console.log(arr);

    //数组排序
    arr.sort();
    console.log(arr);

    //数组的查询 => 索引即可
    console.log(arr[2]);

    //数组的删除
    delete arr[4];
    console.log(arr);

    //删除数组中最后一个,以此类推-2就就是删除最后第二个
    delete arr[arr.length - 1];
    console.log(arr);

    //修改数组中的指定位置值
    arr[4] = 100;
    console.log(arr);

    //在数组中增加值  增加有头增，中间插入，尾增
    //头增
    arr.unshift(123);
    console.log(arr);
    //头删
    arr.shift();
    console.log(arr);
    //后增
    arr.push(888);
    console.log(arr);
    //尾删
    arr.pop();
    console.log(arr);
    //中间增 插入 splice可以完成除了查的所有功能，包含插入
    //spilce（从什么索引开始，操作多少位，操作成什么(这个可以用，号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）
    arr.splice(1,1,999);
    console.log(arr);

    //slice 切片操作,切片之后数组内的值就没有了，被切掉了
    //slice (n,m) 从索引位置n开始截取到索引位置m之前
    //这里将切片后的值放入一个新的变量中
    newarr = arr.splice(1,2);
    console.log(newarr);

    //将数组中的值以指定的符号拼接成字符串
    var str =arr.join('-');
    console.log(str);

    //字符串对应有一个逆运算,将字符串以指定的符号拆分成数组
    //拆分后数组内的值是字符串形式存在，可以用索引修改值或者值的类型
    narr = str.split('-');
    console.log(narr);

    //索引数组内指定位置的值改变类型
    narr[2] = narr[2] - 0;
    console.log(narr);

    //对象的操作
    //js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用
    var dic = {name:'liuxx',age:'100'};
    console.log(dic);

    //字典的查找
    console.log(dic.name);
    //对象中所有的key都是字符串形式
    console.log(dic['age']);

    //字典的增加
    dic.sex = 'male';
    console.log(dic);

    //字典内的值修改
    dic.age = 99;
    console.log(dic);

    //字典内的值删除
    delete dic.age;
    console.log(dic);

</script>
</html>

js中的函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js函数</title>
</head>
<body>
函数与方法
</body>
<script>
    //定义函数  function 函数名（形参列表）{代码块}
    function fn1() {
        console.log('我是函数fn1');
    }

    //函数的调用  函数名（实参列表）
    fn1();

    //定义函数的另一种方式
    var fn2 = function () {
        console.log('我是函数fn2');
    };

    fn2();

    //匿名函数的定义 （匿名函数只能在定义阶段被调用一次）
    //第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理
    (function () {
        console.log('我是匿名函数')
    })();

    //函数的返回值  所有的js函数都有返回值，而且只能有一个返回值,如果你返回多个值，则js中的函数只会将最后一个值返回
    function fn3() {
        //这个就是空返回，为了结束函数而返回
        return;
    }
    //如果没有明确返回值，则返回undefined
    var res = fn3();
    console.log(res);

    //正常返回一个值
    function fn4() {
        //这里就是返回一个值，并且函数结束了
        return 10;
    }
    var ress = fn4();
    console.log(ress);

    //js实现返回多个值,将值作为一个数组返回，取到后再根据需求拆分
    function fn5() {
        //这里就是返回一个值，并且函数结束了
        return [10,20];
    }
    var resss = fn5();
    console.log(resss);

    //函数的参数
    //1.形参与实参个数不需要统一，但一定按位置传参  2.实参少传就会有形参未被赋值，未被赋值的则打印undefined  3.实参多传，多传的实参会被丢弃
    function fn6(a,b) {
        console.log(a,b)
    }
    fn6(1);

    //默认参数 （js中没有关键字参数）,带值的形参就是默认值参数，位置随意，这种定义方式意义不大，b有默认值对应在c之前意义不大，要给c赋值一定要给b赋值完才能赋值c
    function fn7(a,b=10,c,d=20) {
        console.log(a,b,c,d)
    }
    fn7(100,200);

    //不定长参数,...args为不定长形参,传入的参数可以是字典，也可以是任何类型,不定长参数有数组存储
    function fn8(a,...b) {
        console.log(a,b)
    }
    fn8({name:'bbb'},1,2,3,4,5,6)

</script>
</html>

JS与页面的交互

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js与页面交互</title>
    <style>
        .box {
            font-size: 100px;
        }
        /*获取big的时候字体更大*/
        .big {
            font-size: 200px;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
    <div class="box">67890</div>
</body>

<script>
    //js完成与页面进行交互，该js一定要写在body标签的最下方

    //通过js选择器获取页面标签对象
    //永远获取匹配到的第一个标签对象，参数为css语法的选择器
    var box = document.querySelector('body .box');
    //永远获取匹配到的所有标签对象（不管有多少个结果一定是数组），参数为css语法的选择器
    var boxs = document.querySelectorAll('.box');

    console.log(box);
    console.log(boxs);
    console.log(boxs[1]); //通过索引获取数组中的值

    //为目标标签对象（们）绑定交互的方式（专用名词叫事件）
    //为标签添加点击事件
    box.onclick = function () {
        console.log('box1被点击了', this);

        //在事件的内部完成具体交互的业务逻辑

        //获取内容
        //this 代表的就是box，和python中的self同理，谁调用传入的就是谁
        var msg = this.innerText; //innerText就是普通文本
        //这里打印了msg，因为msg获取到的是标签本身内的普通文本，所以打印出来的值就是标签内的所有普通文本
        console.log(msg);

        //修改内容
        this.innerHTML = "<b>呵呵</b>";

        //获取样式getComputedStyle(页面对象,伪类) ，伪类没有市用null填充 .后面跟cs语法的样式名称
        var fontSize = getComputedStyle(this,null).fontSize;
        console.log(fontSize);

        //设置样式
        this.style.backgroundColor = 'red';

        //设置样式位置
        this.style.marginLeft = '100px';

        //获取类名
        var className = this.className;
        console.log('类名是',className);

        //设置类名
        this.className += ' big';  //设置类名的时候空格不可以省略
        var classNames = this.className;
        console.log('类名是',classNames);

    };

    //为标签添加鼠标悬浮事件
    boxs[1].onmouseover = function () {
        console.log('box2被悬浮')
    };

</script>
</html>

（15）javaScript入门的更多相关文章

开心菜鸟系列－－－－函数作用域（javascript入门篇）
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
开心菜鸟系列－－－－变量的解读（javascript入门篇）
console.info( console.info(window['weiwu']) console.info(window. ...
JavaScript 入门案例
四. JavaScript 入门案例在看本节之前,笔者建议您先看 JavaScript 基础篇 https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...
JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符第二章 JavaScript流程控制语句 2.1 循 ...
JavaScript入门篇编程练习
编程挑战一.定义"改变颜色"的函数提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数提 ...
JavaScript入门
本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...
慕课网JavaScript入门篇课程笔记
1.js注释很重要单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...
JavaScript入门基础
JavaScript基本语法 1.运算符运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
JavaScript入门介绍(一)
JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器开发调试工具]按F121.代码后台输出调试:console.log("t ...

随机推荐

mac navicate破解版汉化
https://pan.baidu.com/s/1dRoalG8lZ-AMGmZrj8OhpQ 提取密码:e8ad 安装完navicate之后解压zh-Hans.zip 点击Resources文件夹 ...
使用ES6的reduce函数，根据key去重
最近很着迷于ES6的函数,让代码变得更优雅.ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的. 想要实现的效果为: 原数组: let rawArr = [{id:'123'} ...
POST提交表单时EnType设置问题
POST提交表单时EnType设置问题首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选: 1.application/x-www-form-urlencoded 2.mult ...
java串口编程
报错:no rxtxSerial in java.library.path thrown while loading gnu.io.RXTXCommDrive java.lang.Unsatisfie ...
TModalResult 和 MessageBox 返回值
//其实是对应的{ TModalResult values } const mrNone = ; mrOk = idOk; mrCancel = idCancel; mrAbort = idAbort ...
docker samba
这个就是匿名用户可以登录访问,不能写. root登录,就可以写了. #命令,是在物理机上运行的. 主要是根据dockerfile构建镜像. 启动容器进入镜像设置root密码. 附smb.conf ...
通过eclipse创建项目
基于eclipse的Java文件:项目(project)<类(class)<方法(method),即方法method必须基于class, class必须基于project. 项目是程序的源 ...
深入理解java虚拟机---虚拟机工具jmap(十六)
原文: https://www.cnblogs.com/myna/p/7573843.html jmap JVM Memory Map命令用于生成heap dump文件,如果不使用这个命令,还可以使用 ...
什么是RUP
Rational统一过程(Rational Unified Process,RUP)是由Rational软件公司推出的一种完整且完美的软件过程. RUP总结了经过多年商业化验证的6条最有效的软件开 ...
win 10 初始环境变量
有时用户会修改Win10系统的环境变量,改到后面原来是什么的也记不得了,想要改回去还要去别的电脑查看,这里转载下Win10 64位环境变量的默认初始值. 附:打开环境变量方法:电脑左下右键——系统—— ...

（15）javaScript入门

（15）javaScript入门的更多相关文章

随机推荐

热门专题