day-1 认识javascript

一、关于javascript的一些概念：

1、javascript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言。

2、javascript通常用来操作html页面，响应用户操作，验证传输数据等。（客户端语言：即无需和后端交互，直接在前端浏览器就能完成一些交互响应的语言）

3、jQuery是由JS编写的一个js库。

二、JS代码写在哪里？

javascript分为内嵌js和外链js文件，利用src属性引入，一般建议js文件和css样式文件一样采用src外部引入的方式加载，这样可以有效避免一些额外的问题。比如文件是一个xhtml文件的时候。

1、内嵌式js：

一般写在body结束之前，不同的位置需要注意加载顺序，其中type=" "和language=" " 在html5的规则下可以不用写，如果要写就要写对，defer="defer"的作用是表示这里script标签内的js代码需要在页面的html结构加载完成后（即执行到该页面的最后一个标签之后）再执行，

代码如下：由于<script>标签内有defer="defer"属性，所以这段script代码会等到页面加载完，即加载到</html>这个标签才去执行这段script代码。

 1 <html>
 2     <head>
 3          <style>
 4          </style>
 5     </head>
 6     <body>
 7          <div id="box">
 8          </div>
 9          <script type="text/javascript" language="javascript" defer="defer" >
10                 var a = document.getElementById("box");
11          </script>
12     <body>
13 </html>

 

2、外链JS文件通过src去引用，当script标签采用的是外链引用后，script标签内不能再写其他的js代码，如果需要写的话，只能另起一对script标签，即line10-12：

代码如下：

 1 <html>
 2     <head>
 3          <style>
 4          </style>
 5     </head>
 6     <body>
 7          <div id="box">
 8          </div>
 9          <script defer="defer" src="haha.js"></script>
10          <script>
11                 var a = 10;
12          </script>    
13     <body>
14 </html>

三、注释格式

1 <script>
2         var a = 10; //这是单行注释
3             /*
4                这是多行注释
5 
6                这是多行注释
7              */
8          alert( "10" );
9 </script>

四、弹窗和调试

1、弹窗：

1 <script>
2        alert( "10" );  //内容弹窗
3        confirm("确定"？);//确认弹窗
4        prompt("请输入用户名：") //输入弹窗
5        console.log(a);  //日志
6        console.dir(a);  //底层文件
7  </script>

2、弹窗返回的内容可以用变量接收，再根据接收的值可以做一些操作。

1 <script>
2        var a = prompt("请输入用户名：") //输入弹窗，输入值
3        console.log(a); // 日志输出值
4  </script>

3、console等调试代码不是所有的浏览器都支持，调试完后需要注释掉。

五、变量

很多时候，当我们重复使用某个元素或者某个数据时，内容可能太长或者数据进行改变，这时就需要定义变量来代替他们。

一个var 可以声明多个变量，变量名可以用字母 数字 $ _   不能以数字开头，字母严格区分大小写，变量名需要见名知意。

1 var a , b , c , d ;
2 var a =1, b =2 ,c =3 ,d = 4 ;

六、获取元素和修改html

 1  <body>
 2         <div id="wrap"></div>
 3         <p class="gg"></p>
 4         <p class="gg"></p>
 5         <p class="gg"></p>
 6         <div class="haha"></div>
 7         <a href="" name=""></a>
 8         <input type="text" name="">
 9 <script>
10             document.getElementById()
11             document.getElementsByClassName() //获取的是个节点集合，伪数组  不兼容IE8及以下
12             使用 [数字] 的形式拿出里面的某一个来操作
13             document.getElementsByTagName()
14             document.getElementsByName() //用的比较少，能通过它获取加了name属性的元素
15             var x = "gg";
16             var aGG = document.getElementsByClassName(x);*/
17             var aGG = document.getElementsByClassName("gg");
18             aGG[0].innerHTML = "123456";
19             aGG[1].innerHTML = "123456";
20             aGG[2].innerHTML = "123456";*/
21             var aHa =document.getElementsByClassName("haha");
22             aGou[0].innerHTML = "123456";
23         </script>
24 </body>

 七、某些特殊元素的获取

1 <script>
2     var html = document.documentElement
3     var body = document.body
4     var head = document.head
5     var title = document.title
6     html.id = "haha" //修改html 的id  属性
7 </script>

 

posted @ 2018-05-16 01:12  bibiguo  阅读(194)  评论(0)    收藏  举报