（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 ...

随机推荐

ASP.Net MVC(4) 之js css引用与压缩
资源引用可以用即可以直接使用“~”来表示根目录. 引入js <script src="~/Areas/OrderManage/JS/Form.js"></scr ...
laravel框架5.2版本组件包开发
一.包的作用 1 把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2 如同文件夹一样,包也采用了树形目录的存储方式.同一个包中的类名字是不同的,不同的包中的类的名字是可以相同的, ...
JAVA按数字，字母排序，但不包括大小写和汉字排序
public class ABC { public static void main(String[] args) { new ABC().sortStringArray(); } public vo ...
java⑥
import java.util.Scanner; /** * 所有在java.lang包下面的所有类不需要显示的引入包! * java.util.Scanner : 想获取用户的输入必须引入相关 ...
MYSQL数据库字母数字混合字段排序问题
对MySQL数据表里的一个字符型字段排序,其内容格式为一位字母+顺序数字.数字没有前导零,长度不固定.这种含字母的数字序列,排序出来的结果和我们想要的结果是不一样的,因为它不是纯数字,只能按字符规则排 ...
JVM运行时内存区域
JVM运行java程序时会将内存划分为若干个不同的数据区域: (1)程序计数器: 1.占用内存空间不大. 2.程序计数器相当于JVM所执行的字节码(jvm指令)的“行号指示器”,通过程序计数器的“值” ...
理解JavaScript的运行
JavaScript可以运行在head和body标签中! HTML的脚本必须放在<script></script>标签中间! 浏览器会解释并执行位于script标签中的脚本! ...
十四. Python基础(14)--递归
十四. Python基础(14)--递归 1 ● 递归(recursion) 概念: recursive functions-functions that call themselves either ...
Centos7安装配置MySQL5.7
一:安装前准备: 1.1检查linux版本:cat /etc/system-release CentOS Linux release 7.6.1810 (Core) 1.2查看系统是否安装MySQL: ...
实力封装：Unity打包AssetBundle（三）
前情提要:第二种打包方式窗口初现通过前面的两篇教程和一篇番外,我们已经完全实现了打包的功能.但是使用起来总是觉得有些晦涩别扭,如果不告诉别人怎么使用,对方肯定是一头雾水. What?你给我的这是啥 ...

（15）javaScript入门

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

随机推荐

热门专题