JavaScript(一)

程序员文章站 2022-05-12 19:55:43

本文转载自：https://blog.csdn.net/xiaogeldx/article/details/85390757 注在pycharm中快速注释HTML的方法（用于注释方法不正确时）： File Settings Languages&Frameworks Python Template ......

本文转载自：

注

在pycharm中快速注释html的方法（用于注释方法不正确时）：
- file--settings--languages&frameworks--python template languages--template languages改为none，html和javascript注释方法就都正确了
  
  javascript基础知识
网页三要素：html，css，js
javascript和java没有任何关系，最多语法看起来有点像
javascript原名ivescript，是一门动态类型，弱类型基于原型的脚本语言
和html复合使用，不能单独使用
大部分浏览器都支持

javascript作用：
页面特效
前后交互
后台开发（node）

javascript写在哪里
写在script标签里

外部js文件引入

写在script标签里

  1.
  <head>
  <meta charset="utf-8">
  <title>try</title>
  <script>
      alert("wer");
  </script>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>
  2.
  <head>
  <meta charset="utf-8">
  <title>try</title>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>
  <script>
      alert("wer");
  </script>

JavaScript(一)

外部的js文件内，然后引入

  <head>
  <meta charset="utf-8">
  <title>try</title>
  <script src="js/a.js"></script>
  </head>
  <body>
  <div>
      <input type="button" value="点我" onclick="alert('bug')">
  </div>

a.js的代码:
```
  alert("wer");
```
js一些注意事项
严格区分大小写
每一行完整语句后面加分号
变量名不能使用关键字和保留字
代码要缩进，保持可读性
注释用//

js修改元素内容
首先获取id为xxx的元素 document.getelementbyld(" ")
var 是js定义变量的关键字,创建（声明变量），如果不加为全局变量
innerhtml和innertext可以修改/获取

js获取元素
通过id获取元素:id
```
  document.getelementbyid(" ");
```
通过class名字获取元素:class
```
  document getelementsbyclassname(" ");
```
通过标签名获取元素:tagname
```
  document.getelementsbytagname(" ");
```
通过name的属性获取元素，一般用于input:name
```
  document.getelementsbyname(" ");
```
通过css选择器获取一个
```
  document.queryselector(" ");
```

通过css选择器获取所有

  document.queryselectorall(" ");

案例

          <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>title</title>
  </head>
  <body>
      <div id="div1">
          <p id="p1"><span>111</span></p>
          <p class="c1">2222</p>
          <span name="span1">3333</span>
      </div>
      <div class="div2">
          <p class="c1">5555</p>
          <span name="span1">6666</span>
          <p name="span1">7777</p>
          <span class="c1">8888</span>
      </div>
      <div>
          <p>9999</p>
          <span>0000</span>
      </div>
      <script type="text/javascript">
          //通过id获取元素,一个网页中一个id命名使用一次,所以不用加索引
          var a = document.getelementbyid('p1');
          a.onclick = function () {
              alert('bug');
          };
          //通过标签名获取元素,需要加索引
          var b = document.getelementsbytagname('span')[0];
          b.onclick = function () {
              alert('bug');
          };
          // 通过name获取元素,需要加索引
          var c = document.getelementsbyname('span1')[1];
          c.onclick = function () {
              alert('bug');
          }
          // 通过classname获取元素,需要加索引
          var d = document.getelementsbyclassname('c1')[1];
          d.onclick = function () {
              alert('bug');
          };
          // 通过css选择器获取一个元素
          // 单独的标签获取第一个,如果选择器里还嵌套标签,第一个选择器里面的所有标签都能获取,不能索引
          // 选div时,第一个div标签里的标签都能获取
          var e = document.queryselector('div');
          e.onclick = function(){
              alert('bug');
          };
          // 通过class标签获取所有
          // 此时获取的是id为div1下的所有的span标签
          // div标签里嵌套其他标签时需要索引,表示第几个div里的所有标签都可以获取
          // 单独的标签可以直接索引获取
          // #div1或者.div2加上里面的标签需要索引获取
          var f = document.queryselectorall('div')[0];
          f.onclick = function () {
              alert('bug');
          };
      </script>
  </body>
  </html>

javascript简单事件

js的基础事件

单击事件：onclick
双击事件:ondblclick
鼠标划入:onmouseenter
鼠标划出:onmouseleave

窗口变化:onresize

  // 浏览器窗口有变化时就会出现
  window.onresize = function () {
     alert("3245");
  };

改变下拉框:onchange

  <select>
      <option value="1">苹果</option>
      <option value="1">橘子</option>
      <option value="1">橙子</option>
  </select>
  <script type="text/javascript">
      var h = document.getelementsbytagname('select')[0];
      //改变下拉框里的值就会弹出
      h.onchange = function () {
          alert('改变了');
          };
  </script>

操作标签属性

合法属性的增删改查

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>try</title>
  </head>
  <body>
  <div>
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getelementbyid("p1");
     // 增/改：无则增，有则改
     a.classname="hahaha";
     // 查
     console.log(a.classname);
     // 删除
     a.removeattribute("class");
     console.log(a);
  </script>
  </body>
  </html>

自定义属性的增删改查

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>try</title>
  </head>
  <body>
  <di
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getelementbyid("p1");
     // 增/改　无则增，有则改
     a.setattribute("age","m");
     // 查，查到返回true，没查到返回false
     console.log(a.hasattribute("age"));
     // 删除
     a.removeattribute("age");
     console.log(a);
  </script>
  </body>
  </html>

js修改样式

obj.style.变量=变量值

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var b = document.getelementbyid("div2");
     b.style.width = "50px";
     b.style.height = "50px";
     console.log(b)
  </script>
  </body>
  </html>

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句话</p>
  </div>
  <script type="text/javascript">
     var a = document.getelementbyid("div2");
     var b = document.getelementbyid("div2");
     b.onclick=function() {
             a.style.width = "50px";
             a.style.height = "50px";
         }
     console.log(b)
  </script>
  </body>
  </html>

数据类型

js提供了一种检测当前变量的数据类型的方法，也就是typeof关键字

js的数据类型
五种基本类型＋object（复杂型）

number类型
number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值
```
  var a = 123;
  console.log(typeof a);
```
nan:非数字类型
isnan() 函数用于检查其参数是否是非数字值
```
  isnan(123)  //false   
  isnan("hello")  //true
```
string类型
字符串有length属性
字符串转换：转型函数string(),适用于任何数据类型（null,undefined 转换后为null和undefined）；tostring()方法（null,defined没有tostring()方法）

字符串要用引号

  var a = "123";
  console.log(typeof a);

boolean类型

该类型只有两个值，true和false
```
  var a = true;
  console.log(typeof a);
```
undefined类型
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined
```
  var a;
  console.log(typeof a);
```
null类型
null类型被看做空对象指针，前文说到null类型也是空的对象引用
```
  var a = null;       //object
  console.log(typeof a);
```
null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用

object类型
js中对象是一组属性与方法的集合,这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起,引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法

引用类型

object类型
我们看到的大多数类型值都是object类型的实例
创建object实例的方式有两种
- 第一种是使用new操作符后跟object构造函数，如下所示
```
  var person = new object();
  person.name = "micheal";
  person.age = 24;
```
- 第二种方式是使用对象字面量表示法，如下所示
```
  var person = {
  　　name : "micheal",
  　　age : 24
  };
```
  array类型
数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象等等
数组的大小是可以动态调整的
创建数组的基本方式有两种
- 第一种是使用array构造函数，如下所示
```
  var colors = new array("red","blue","yellow");
```
- 第二种是使用数组字面量表示法，如下所示
```
  var colors = ["red","blue","yellow"];
```
  function类型
每个函数都是function类型的实例，而且都与其他引用类型一样具有属性和方法，函数通常是使用函数声明语法定义的，如下所示
```
  function sum(num1,num2){
  　　return num1 + num2;
  };
```

这和使用函数表达式定义函数的方式相差无几

  var sun = function (){
  　　return sum1 + sum2;
  };

案例

  var name = 'xiaoge';
  alert(typeof name);//string
  var age = 15;
  alert(typeof age);//number
  var flag = true;
  alert(typeof flag);//boolean
  var a;//undefined
  alert(typeof a);
  var b = null;
  alert(typeof b);//object
  var arr = [1,2,3];//object
  alert(typeof arr);
  var user = {
      name:'xiaoge',
      age:18
  };
  alert(typeof user);//object
  alert(typeof console.log());//undefined
  var say = function () {
      alert(name+'很帅');
  };
  alert(typeof say);//function
  alert(say())//xiaoge很帅//undefined

练习

  <!doctype html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <title>title</title>
      <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/test.css">
      <script src="js/test.js"></script>
  </head>
  <body>
  <div class="d1">
      属性名：<input type="text" class="an"><br>
      属性值：<input type="text" class="av"><br>
      <input type="button" value="设置" class="set1">
  </div>
  <div class="d2" style="width: 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div>
  <script type="text/javascript">
      var moumov = document.getelementsbyclassname('d2')[0];
      moumov.onmouseenter = function () {
          moumov.innertext = '是我还是我';
          moumov.style.background = 'blue';
      };
      moumov.onmouseleave = function () {
          moumov.innertext = '我就是我';
          moumov.style.background = 'yellow';
      };
      var inp = document.getelementsbytagname('input');
      inp[2].onclick = function () {
          var attr = inp[0].value;
          var attrs = inp[1].value;
          moumov.style[attr] = attrs;
      };
  </script>
  </body>
  </html>

JavaScript(一)

上一篇：谷雨节气的三个传说故事：谷雨是为了纪念仓颉吗

下一篇：文殊菩萨保佑什么：四大菩萨代表保佑什么？

JavaScript(一)

注

javascript基础知识

javascript作用：

javascript写在哪里

写在script标签里

外部的js文件内，然后引入

js一些注意事项

js修改元素内容

js获取元素

案例

javascript简单事件

js的基础事件

操作标签属性

js修改样式

数据类型

js的数据类型

number类型

string类型

boolean类型

undefined类型

null类型

object类型

引用类型

object类型

array类型

function类型

案例

练习

javascript如何删除数组首尾元素？

PHP中使用mktime获取时间戳的一个黑色幽默分析_PHP

了解JavaScript基础（非常详细）

学习javascript里的DOM知识

如何判读一个整数是否是2的整数次幂(三种方法实现)

css怎样实现一直旋转动画效果

简单的查找算法之一，二分查找

javascript怎么将字符串转换成数字

javascript函数之局部变量和全局变量

javascript如何实现弹出层效果？（代码分析）