js01 js基本操作/计算整数的平方？？？

小实验要求
小实验思路
小实验效果展示
小实验源代码
JS代码的3种引用方式
获取节点的4中方法
读取、写入值的三种方法
时间总汇
利用节点改变样式的方法
数据类型？？？

1要求

　　用户在文本框中输入数字，点击按钮，计算其平方

2 思路

3 效果展示

4 代码实现

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5     <title>平方界面</title>
 6     </head>
 7     <script type="text/javascript">
 8         function pf() {
 9             var text = document.getElementById("text"); // 获取文本框节点
10             var text_num = text.value; // 获取文本框的值
11             var result = document.getElementById("result"); // 获取span标签节点
12             if(isNaN(text_num)) { // 判断是否是一个数字
13                 // 不是数字的处理
14                 result.innerHTML = "请输入一个数字";
15                 result.style.color = 'red';
16             }else {
17                 // 是数字的处理
18                 result.innerHTML = text_num * text_num;
19                 result.style.color = 'green';
20             }
21         }
22     </script>
23 <body>
24     <input type="text" placeholder="请输入一个数字" id="text" maxlength="10" />
25     <input type="button" value="计算平方结果" id="button" onclick="pf()" />
26     =
27     <span id="result">
28         我是结果
29     </span>
30 </body>
31 </html>

HTML代码

5JS代码的三种引用方式

　　5.1 事件定义式

　　5.2 直接嵌入式

　　5.3 文件调用式

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>test</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13         </style>
14 
15         <!-- 02 直接调用式 -->
16         <script type="text/javascript">
17             function f() {
18                 alert("直接嵌入式");
19             }
20         </script>
21 
22         <!-- 03 文件调用式 -->
23         <script type="text/javascript" src="js.js"></script>
24     </head>
25 <body>
26     
27     <!-- 01 事件定义式 -->
28     <input type="button" value="点击测试01事件定义式" onclick="alert('事件定义式')" />
29     <hr />
30     <input type="button" value="点击测试02直接嵌入式" onclick="f()">
31     <hr />
32     <input type="button" value="点击测试03文件调用式" onclick="f1()">
33     
34 </body>
35 </html>

HTML代码

1 /**
2  * 
3  * @authors Your Name (you@example.org)
4  * @date    2017-04-07 18:39:16
5  * @version $Id$
6  */
7 function f1() {
8     alert("文件调用式");
9 }

JS代码

注意1：将这两个代码文件放在一个文件夹里面进行测试

注意2：script标签里面的内容比body里面的内容先执行，事件只有在触发的时候才执行

6获取节点的四种方法

　　6.1 通过id获取节点,返回一个节点对象

　　　　document.getElementById("id名");

　　　　例：var box = document.getElementById("box");

　　6.2 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）

　　　　document.getElementsByClassName("类名");

　　　　例：var b = document.getElementsByClassName("a");

　　6.3 通过标签名字获取节点，返回的是一堆元素（不兼容IE678）

　　　　document.getElementsByTagName("标签");

　　　　例：var c = document.getElementsByTagName("div");

　　6.4 通过名字属性来获取的节点

　　　　document.getElementsByName("名字属性的内容");

　　　　例：var d = document.getElementsByName("性别");

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>获取节点的4种方法</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13         </style>
14     </head>
15 <body>
16     <!-- #box -->
17     <div id="box" class="a"></div>
18     <div id="box1" class="a"></div>
19     <div id="box2" class="a"></div>
20     <div id="box3" class="a"></div>
21     <input type="radio" name="性别" />
22 
23     <script type="text/javascript">
24 
25         // 通过id获取节点,返回一个节点对象
26         var box = document.getElementById("box");
27         // box.style.width = "50px";
28         // box.style.height = "50px";
29         // box.style.background = "red";
30 
31         // 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）
32         var b = document.getElementsByClassName("a");   
33         
34         //通过标签名字获取节点，返回的是一堆元素（不兼容IE678）
35         var c = document.getElementsByTagName("div");
36         alert(c.length);
37 
38         // 通过名字来获取的节点
39         var d = document.getElementsByName("性别");
40         alert(d);
41 
42         //在控制台输出box的相关内容
43         for(var key in box){
44             console.log(key+"===="+box[key])
45         };
46     </script>
47 </body>
48 </html>

HTML代码

7读取、写入值的三种方法

　　7.1 innerHTML -->> 能够解析HTML语法

　　　　例：p.innerHTML = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>";

　　7.2 innerText -->> 是直接以文本显示，不进行HTML语法解析

　　　　例：p.innerText = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>"

　　7.3 value -->> 设定、读取元素的value属性内容

　　　　例：button.value = "重庆大足";

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>内容写入：innerHTML/innerText</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13             #text{
14                 /*鼠标放到文字上面会变成一个手*/
15                 cursor: pointer;
16             }
17         </style>
18     </head>
19 <body>
20     <p id="text">我是段落</p>
21     <hr />
22     <input type="text" id="button" value="hello world">
23     
24     <script type="text/javascript">
25         var p = document.getElementById("text");
26         var button = document.getElementById("button");
27 
28         // 鼠标点击，实现内容变更
29         p.onclick = function(){
30 
31             // innerHTML能够解析HTML语法
32             p.innerHTML = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>";
33 
34             console.log(p.innerHTML);
35 
36             // innerText是直接以文本显示，不进行HTML语法解析
37             // p.innerText = "<a href='https://www.juanpi.com/?utm=2846148' target='_blank' style='color:red'>卷皮网官网</a>"
38         };
39         button.onclick = function() {
40             button.value = "重庆大足"; // 设定按钮的value值
41             console.log(button.value); // 读取按钮的value值
42             // button.innerHTML = "大足石刻";  //有value属性的必须用value
43         }
44         
45     </script>
46 </body>
47 </html>

HTML代码

　　注意：有value属性的元素，在进行读取和写入操作时只能使用第三种方式

8事件总汇　

　　onmouseenter/onmouseover 鼠标划入触发
　　onmouseleave/onmouseout 鼠标划出触发
　　onmousemove 监听鼠标移动
　　onclick 单击
　　ondbclick 双击
　　onkeydown 按下某键
　　onkeyup 抬起某键
　　onkeypress 某键一直按下的时间
　　onblur 元素失去焦点
　　onfocus 元素获得焦点
　　onresize 大小改变

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>变量、数据类型、事件、事件绑定</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13             #box{
14                 width: 200px;
15                 height: 200px;
16                 background-color: red;
17             }
18         </style>
19     </head>
20 <body>
21     <div id="box"></div>
22     <input type="text" id="text" />
23 
24     <script type="text/javascript">
25         /*
26         变量：
27             1 变量必须要声明
28             2 变量要赋值,不赋值就是undefined
29         变量的命名规范：
30             数字、字母、下划线 $ (不能用数字作为开头)
31 
32         */
33         var a = 1; //声明变量a,并且进行赋值
34         a = 123;    
35         // alert(a);
36         // var b = 2, c = 3; //声明多个变量
37 
38         // var 0a = 123; //变量名不能以数字开头
39         // alert(0a);
40 
41         /*
42         js的6大数据类型：
43             1 Number------数字
44             2 String------字符串
45             3 Boolean-------布尔值 true、false
46             4 function------函数
47             5 undefined------未定义
48             6 Object-------对象
49         */
50         var n = 100;
51         var s = "123";
52         var b = true;
53         // var f = funtion(){alert(1)};
54         var u = undefined;
55         var o = {};
56 
57         /*
58         事件：
59             onmouseenter/onmouseover 鼠标划入触发
60             onmouseleave/onmouseout 鼠标划出触发     
61             onmousemove 监听鼠标移动  
62             onclick 单击
63             ondbclick 双击
64             onkeydown 按下某键
65             onkeyup 抬起某键
66             onkeypress 某键一直按下的时间
67             onblur 元素失去焦点
68             onfocus 元素获得焦点
69             onresize 大小改变 
70         */
71 
72         var box = document.getElementById("box");
73         box.onclick = function(){
74             // alert("hello");
75         };
76         box.onmousemove = function(){
77             console.log(1);
78         };
79 
80         var inp = document.getElementById("text");
81         inp.onblur = function(){
82             console.log("hello");
83         };
84 
85         window.onresize = function(){
86             console.log("change");
87         };
88 
89     </script>
90 </body>
91 </html>

HTML代码

9利用节点改变样式的方法

　　9.1 通过选择器来改变样式

　　　　例：box.id = "on";

　　9.2 通过内联样式来改变样式

　　　　例：box.style.width = "120px";

　　　　例：box.style.backgroundColor = "skyblue";

　　9.3 多条样式

　　　　例：box.style.cssText = "width:120px; height:120px; background-color:red;margin-top:50px";

　　　　例：box.style.cssText += "width:120px; height:120px; background-color:red;margin-top:50px";

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <meta charset = "utf-8" />
 5         <meta name="Keywords" content="" />
 6         <mata name = "description" content = "" />
 7         <title>样式的控制</title>
 8         <style>
 9             *{
10                 margin: 0;
11                 padding: 0;
12             }
13             #on{
14                 width: 150px;
15                 height: 150px;
16                 background-color: red;
17             }
18             .on{
19                 border-radius: 60px;
20             }
21         </style>
22     </head>
23 <body>
24     <div id="box" class="box" style="border-radius: 10px"></div>
25 
26     <script type="text/javascript">
27         var box = document.getElementById("box");
28 
29         // 通过选择器来改变样式
30         // box.id = "on";
31         // box.className = "on";
32 
33         // 通过内联样式来改变样式
34         // box.style.width = "120px";
35         // box.style.height = "120px";
36 
37         // box.style.backgroundColor = "skyblue";
38         // box.style["background-color"] = "blue"
39         // box.style.marginTop = "50px";
40 
41         // 多条样式
42         box.style.cssText = "width:120px; height:120px; background-color:red;margin-top:50px";
43         // box.style.cssText += "width:120px; height:120px; background-color:red;margin-top:50px";
44 
45         // float浮动
46         box.style.cssFloat = "right";
47     </script>
48 </body>
49 </html>

HTML代码

10数据类型 -->> 实际开发时查手册

　　重点地方待更新...

  1 <!DOCTYPE>
  2 <html>
  3     <head>
  4         <meta charset = "utf-8" />
  5         <meta name="Keywords" content="" />
  6         <mata name = "description" content = "" />
  7         <title>数据类型：Number/String/Boolean</title>
  8         <style>
  9             *{
 10                 margin: 0;
 11                 padding: 0;
 12             }
 13         </style>
 14     </head>
 15 <body>
 16     
 17 
 18     <script type="text/javascript">
 19     /*
 20     js的6大基本类型
 21         Number---数字
 22         String---字符串
 23         Boolean---布尔值
 24         undefined---未定义
 25         function---函数：function(){};
 26         Object---对象:[] {}
 27     */
 28     // var a = {};
 29     // alert(typeof a);  //弹出变量a的数据类型
 30 
 31     /*
 32     =======Number=======
 33     数字：js不分整数、小数
 34     范围：-2^53 到 2^52
 35     */
 36     var x = 1 + undefined;
 37     // alert(typeof x);
 38     // alert(Number(undefined))
 39     // alert(x);
 40     // alert(x==x); //NaN不等于自身
 41     // alert(x!=x);
 42 
 43     //Number() //构造函数---参数中必须能被转换为数字，否则返回NaN
 44     // var n = Number("5");
 45     var n = Number("a");
 46     // alert(n);
 47 
 48     // parseInt("456.789") --> 取整函数,遇到非数字就停止,如果第一个就不是一个数字就返回NaN
 49     // alert(parseInt("456.789"));
 50     // alert(parseInt("4456a89"));
 51     // alert(parseFloat("1234.1234"));
 52     // alert(parseFloat("123.121234").toFixed(1)); //保留小数位数设置
 53 
 54     /*
 55         Math -> 是一个对象，可以引用其函数
 56     */
 57     var m;
 58     m = Math.pow(16, 2); //平方
 59     m = Math.round(0.59); //四舍五入
 60     m = Math.ceil(0.1); //向上取整
 61     m = Math.floor(0.1); //向下取整
 62     m = Math.max(1,2,3,4,5);
 63     m = Math.min(1,2,3,4,5);
 64     m = Math.random();  //0到1的一个随机数
 65     m = Math.random() * 100;
 66     m = (Math.random() * 30 + 20).toFixed(1);
 67     // alert(m);
 68     // alert(m.length); //注意number没有长度
 69 
 70     /*
 71     =======String=======
 72     字符串：单引号或双引号 引起来
 73     .substring 字符截取
 74     .slice 切片
 75     .indexOf 寻找文本
 76     .split 文本分割
 77     .toUpperCase 转大写
 78     .toLowerCase 转小写
 79     substirng的参数为负数的时候回看做0，如果第一个参数大于第二个参数回自动进行交换，取不到会返回空
 80     */
 81     var s = 'warrior';
 82     // alert(s[0]); //截取单个字符
 83     // alert(s.charAt(1));
 84 
 85     var s1 = "furyhappydakwarrior";
 86     // alert(s1.substring(4,9)); //截取一个字符串
 87 
 88     /*
 89     slice切片
 90         参数1：截取的开始位置
 91         参数2：截取的结束位置
 92             负数倒着数
 93             不会自动交换位置
 94             取不到会返回空
 95     */
 96     var s2 = "helloworldwarriorworld"
 97     // alert(s2.slice(5, 10));
 98 
 99     /*
100         str.indexOf("查找的文本", 开始位置);
101     */
102     // alert(s2.indexOf("world",s2.indexOf("world") + 1));
103 
104     /*
105     str.split("")  文本分割，返回一个数组
106     */
107     var s3 = "1 2 3 4 5";
108     var arr = [];
109     arr = s3.split(" ");
110     // alert(arr);
111     // alert(arr.length);
112 
113     var s4 = "myname";
114     // alert(s4.toUpperCase());
115     var s4 = "fury";
116     // alert(s3 + s4);
117 
118     /*
119     ======Boolean======
120     当要判断一个值是不是等于另外一个值就会用到
121     true、false
122     会被判断为false的值：
123         false undefined NaN null 0 "" 
124     */
125     // alert(Boolean(null));
126     // alert(Number(true)); //ture转数字是1
127     // alert(Number(false)); //false转数字是0
128 
129     var a = 3;
130     if (3 == a) {
131         // alert("3 == a");
132     }
133     if (0 != a) {
134         // alert("a不等于0");
135     }
136     if (3) {
137         // alert("执行if语句");
138     }
139 
140     /*
141     ======null undefined======
142     null是一个关键字----类似于正确空值的填补
143     undefined是一个预先定义的全局变量，他不是关键字，类似于错误空值的填补
144     */
145     // alert(1 + undefined); //NaN
146     // alert(1 + null); //1
147     // alert(null == undefined); //true
148     //因为null和undefined在做真假判断的时候 都为假
149     alert(typeof null); //object
150     alert(typeof undefined); //undefined
151     </script>
152 </body>
153 </html>

HTML代码

posted @ 2017-04-07 19:25 寻渝记阅读(438) 评论(0) 收藏举报

刷新页面返回顶部

js01 js基本操作/计算整数的平方 ？？？

1要求

2 思路

3 效果展示

4 代码实现

5JS代码的三种引用方式

5.1 事件定义式

5.2 直接嵌入式

5.3 文件调用式

6获取节点的四种方法

6.1 通过id获取节点,返回一个节点对象

6.2 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）

6.3 通过标签名字获取节点，返回的是一堆元素（不兼容IE678）

6.4 通过名字属性来获取的节点

7读取、写入值的三种方法

7.1 innerHTML -->> 能够解析HTML语法

7.2 innerText -->> 是直接以文本显示，不进行HTML语法解析

7.3 value -->> 设定、读取元素的value属性内容

8事件总汇

9利用节点改变样式的方法

9.1 通过选择器来改变样式

9.2 通过内联样式来改变样式

9.3 多条样式

10数据类型 -->> 实际开发时查手册

公告

js01 js基本操作/计算整数的平方？？？

　　5.1 事件定义式

　　5.2 直接嵌入式

　　5.3 文件调用式

　　6.1 通过id获取节点,返回一个节点对象

　　6.2 通过类的名字获取节点,返回的是一堆元素（不兼容IE678）

　　6.3 通过标签名字获取节点，返回的是一堆元素（不兼容IE678）

　　6.4 通过名字属性来获取的节点

　　7.1 innerHTML -->> 能够解析HTML语法

　　7.2 innerText -->> 是直接以文本显示，不进行HTML语法解析

　　7.3 value -->> 设定、读取元素的value属性内容

8事件总汇　

　　9.1 通过选择器来改变样式

　　9.2 通过内联样式来改变样式

　　9.3 多条样式