JS基础入门篇（一）

jsdt 发布于2019-08-22 17:12 / 553人阅读

摘要：所以，一般放在结束标签之前。申明变量变量名以分号结束。如果一定要使用点的话，需要改变成驼峰式命名法。基础篇练习看完以上的小伙伴，可以看两个例子的效果，试着做一下。

1.JS存放在代码中的位置

1.JS写在行间

hello world

优点：直接，简单

缺点：不方便复用和维护,不符合结构行为分离规范

2.JS写在script ( 一般写在body结束标签之前 )
因为JS的执行顺序，需要将元素加载完成，才能获取到元素，故一般写在body结束标签之前。


        hello
        world

优点：只要是在这个页面中就可以使用这段 js。
缺点： 1. 不方便修改维护 2. 不符合规范

3.写在js文件中

1.创建一个js文件,写入js代码
2.让html文件和js文件产生关联,通过script标签的 src 属性链接到js文件。


        miaov

优点：

1.结构 行为 完全分离
2.方便修改维护
3.可复用性强

2.JS执行的顺序

针对js的存放位置，如果js放在script标签中，必须放到body结束标签之前。原因是js会读取dom节点，必须等到dom节点都加载完成了，js代码才取得到对应节点。

如果JS代码非要放在所有节点之前呢？？？
可以将script代码写到head中，用window.onload把代码块包起来放到script中。

以上方法不支持，因为window.onload是等到页面所有dom节点，图片资源加载完成才执行的。如果图片资源很多的话，那么用户对页面的操作就无效了。所以，一般放在body结束标签之前。

3.注释

分为单行注释和多行注释。

 //单行注释
 //单行注释
 //单行注释

 /*
 多行注释
 多行注释
 多行注释
 */

4.变量

变量：可变的量。

作用：复用数据，存储数据。

申明变量： var 变量名; 以分号结束。只申明一个变量不赋值的话，那这个变量中默认存储的是undefined

变量命名规范：可以是数字(1234567890) 字母(abcdefg...)下划线 ( _ )美元符( $ )组成。
禁止：

 1. 不允许数字开头     
 2. 不允许使用关键字
 3. 不允许使用保留字

推荐：
驼峰式命名法+语义化单词
驼峰式命名法:从第二个单词开始，每个单词的首字母大写。

属性操作：

以下三种写法都可以。

box.style["background-color"] = "green";
box["style"]["background-color"] = valStr;
box.style.backgroundColor = "green";

如果[ ]中间没有用引号包起来,那么会把中间的内容当做变量处理。

当需要改变的属性值是一个变量的时候只能使用[ ],方括号中间如果是变量的话，不需要加引号。

当操作属性的时候属性名不符合变量命名规范的时候可以使用[ ]。

如果一定要使用点( . )的话，需要改变成驼峰式命名法。

5.函数

（一）简介

函数的作用：代码块的复用

函数的分类：
1.有名函数
2.匿名函数

（二）使用

1-有名函数
                声明:
                    function 函数名(){ 
                        代码块 
                    }
                调用:
                    函数名();


2-匿名函数
                声明: 
                    直接声明一个匿名函数 会报错
                调用:
                    可以直接通过事件调用

eg：
案例一：有名函数的声明和调用
案例二：匿名函数直接声明会报错，可以通过事件调用
案例三：有名函数的错误调用，btn.onclick = fn();这样调用是错误的，只会使函数立刻执行，传给点击事件的是个null。没有点击click按钮，直接打开就发生变化了。
案例三：有名函数的正确调用，btn.onclick = fn;这样调用是正确的。点击click按钮，红色方块才发生变化

6.innerHTML 和 src

innerHTML:修改双标签里面的内容。
innerHTML举例：以下代码的作用是，点击页面任何位置，修改红色方块的内容。
src：需要注意的是，在js中，img.src获取到的是绝对路径，很少进行比较。

7.基础篇练习

看完以上的小伙伴，可以看两个例子的效果，试着做一下。
练习一：点击按钮，设置方块大小
练习二：点击按钮，增加或减小字体大小

GPU云服务器云服务器 js零基础入门视频入门篇基础篇之基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94953.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
JS基础入门篇（一）

摘要：申明变量变量名以分号结束。如果一定要使用点的话，需要改变成驼峰式命名法。基础篇练习看完以上的小伙伴，可以看两个例子的效果，试着做一下。练习一点击按钮，设置方块大小练习二点击按钮，增加或减小字体大小 1.JS存放在代码中的位置 1.JS写在行间 hello world 优点：直接，简单缺点：不方便复用和维护,不符合结构行为分离规范 2.JS写在script ( 一般写在body...

alighters 2019-08-29 15:31 评论0 收藏0
JS基础入门篇（一）

摘要：申明变量变量名以分号结束。如果一定要使用点的话，需要改变成驼峰式命名法。基础篇练习看完以上的小伙伴，可以看两个例子的效果，试着做一下。练习一点击按钮，设置方块大小练习二点击按钮，增加或减小字体大小 1.JS存放在代码中的位置 1.JS写在行间 hello world 优点：直接，简单缺点：不方便复用和维护,不符合结构行为分离规范 2.JS写在script ( 一般写在body...

nevermind 2019-08-22 17:34 评论0 收藏0
JS基础入门篇（一）

摘要：申明变量变量名以分号结束。如果一定要使用点的话，需要改变成驼峰式命名法。基础篇练习看完以上的小伙伴，可以看两个例子的效果，试着做一下。练习一点击按钮，设置方块大小练习二点击按钮，增加或减小字体大小 1.JS存放在代码中的位置 1.JS写在行间 hello world 优点：直接，简单缺点：不方便复用和维护,不符合结构行为分离规范 2.JS写在script ( 一般写在body...

xuhong 2019-08-02 10:32 评论0 收藏0