文章目录

注
JavaScript基础知识
- JavaScript作用：
- JavaScript写在哪里
- - 写在script标签里
  - 外部的js文件内，然后引入
- 输入输出语句
- JS一些注意事项
- 变量
- 声明变量
- - 全局变量、局部变量
  - 特殊情况
- JS修改元素内容
- JS获取元素
- - 案例
- 标识符、关键字、保留字
JavaScript简单事件
- JS的基础事件
- 操作标签属性
- JS修改样式
数据类型
- 为什么需要数据类型
- JS的数据类型
- - Number类型
  - String类型
  - Boolean类型
  - Undefined类型
  - Null类型
  - 字面量
  - 数据类型转换
  - - 其他转字符串
    - 字符串转数值
  - 转换成布尔型
  - - 计算年纪
  - Object类型
引用类型
- Object类型
- Array类型
- Function类型
案例
练习

注

在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>

外部的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");
```

输入输出语句

alert prompt console.log
alert 在浏览器上方弹出的弹框
prompt 输入框类型的弹框，得到的类型是字符串型
console.log 在控制台打印的内容属于 info 等级

JS一些注意事项

严格区分大小写
每一行完整语句后面加分号
变量名不能使用关键字和保留字
代码要缩进，保持可读性
注释用//
<script> 和 </script>中间不要写代码和内容

变量

本质：变量是程序在内存中申请的一块用来存放数据的空间
变量使用分两步：声明变量、赋值
声明变量用 var，var 是 JS 关键字，variable（变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间
通过变量名来访问内存中分配的空间
声明变量并赋值，叫变量的初始化
var a = ‘hh’;
声明多个变量： var age=18, name=‘xiaoge’;
变量严格区分大小写，不能以数字开头，建议小驼峰；不要用 name 作为变量名；变量名中可以存在的符号：$ 和 _

声明变量

函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量
let 声明的变量只在 let 命令所在的代码块内有效
const 声明一个只读的常量，一旦声明，常量的值就不能改变

全局变量、局部变量

- 在函数外声明的变量作用域是全局的：
var carName = "Volvo";
// 这里可以使用 carName 变量
function myFunction() {// 这里也可以使用 carName 变量
}
- 在函数内声明的变量作用域是局部的（函数内）：
// 这里不能使用 carName 变量
function myFunction() {var carName = "Volvo";// 这里可以使用 carName 变量
}
// 这里不能使用 carName 变量

特殊情况

只声明，未赋值，返回 undefined（未定义）
不声明不赋值，报错
不声明，直接赋值，变量是全局变量

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>

标识符、关键字、保留字

标识符：就是指开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字
关键字：是指 JS 本身已经使用了的字，不能再用他们充当变量名、方法名
包括：break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with 等
保留字：实际上就是预留的关键字，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名
包括：boolean,byte,char,class,const,debugger,double,enum,export,extends,fimal,float,goto,implements,import,int,interface,long,mative,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile 等

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，没查到返回falseconsole.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 的变量数据类型是只有程序在运行中，根据等号右边的值来确定的
js提供了一种检测当前变量的数据类型的方法，也就是typeof关键字
typeof 用法：typeof a 或者 typeof(a)

JS的数据类型

五种基本类型（Number，String，Boolean，Undefined，Null）＋object（复杂型）

Number类型

Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值，默认值 0
var a = 123;
console.log(typeof a);
数字前面加 0，表示 8 进制

    var a = 010;console.log(a)     // 8，alert 和 console.log() 默认把值转换成 10 进制

数字前面加0x，表示 16 进制

    var a = 0x10;console.log(a)    // 16，alert 和 console.log() 默认把值转换成 10 进制

数字型最大值和最小值

    alert(Number.MAX_VALUE); //1.7976931348623157e+308alert(Number.MIN_VALUE);  //5e-324

无穷大 Infinity、无穷小 -Infinity、非数字类型 NaN（not a number）

alert(Number.MAX_VALUE * 2); //Infinity 无穷大
alert(-Number.MAX_VALUE * 2);   //-Infinity 无穷小
alert('haha' - 1);    //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));
alert('\'xiaoge\'handsome') //用 \ 转义

转义符
- \n：换行
- \：斜杠\
- '：单引号
- \t：缩进tab
- \b：空格blank
查看字符串长度：length，用法：str.length
注意：js 中，每个符号、汉字、空格、换行、缩进都是占用一个字符
字符串加任何类型，得到的都是字符串

    var b = '2' - 11;alert('11' + b);  //11-9  引号里写数值，减去一个数字型，得到的是数字型

Boolean类型

该类型只有两个值，true和false，默认值 false
布尔型可以参与加减法运算

var a = true;
console.log(typeof(a)); //boolean
var b = true;
alert('11'-b);    //10

Undefined类型

只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined

var a;
console.log(typeof(a));
alert(undefined+11);   //undefined 和数字型相加，得到 NaN

Null类型

null类型被看做空对象指针，前文说到null类型也是空的对象引用

var a = null;
console.log(typeof(a)); //object
alert(null + true);    //1
alert(typeof(null + true));    //number    null 和数值型相加，得到数值型，结果就是该数值型的值

null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值，就是一眼看出的类型
- 8，9，11：数字字面量
- ‘小哥’，‘张起灵’：字符串字面量
- true，false：布尔字面量

数据类型转换

其他转字符串

变量.toString()
String()
隐式转换：用加号拼接（常用）

var a = 10;
alert(typeof a.toString());   //string //变量.toString()，如果用 10.toString() 会报错
alert(typeof String(10));   //string
alert(typeof(10+''));   //string

字符串转数值

parseInt()（常用）
parseFloat()（常用）
Number()
隐式转换

alert(parseInt('-3.56'));   //-3,小数取整，或者理解为遇到非数字，停止取数
alert(parseInt('231dsf53')); //23 引号中以数字开头，还有非数字的，取最前面的连续数字
alert(parseInt('是的23dsf53')); //NaN 引号中不是以数字和正负号开头的，显示非数字类型
alert(parseFloat('-3.56.23'));   //-3.56  只会取第一个小数点，第二个小数点相当于其他字符，不会取
alert(parseFloat('231.0dsf53')); //231  小数点后只有0没有其他连这个数字，不取0
alert(parseFloat('231.0132dsf53')); //231.0132
console.log(Number('-32.56ds'));    //NaN 字符串中不能有其他字符（除了开头的正负号，浮点数，有第二个小数点也会返回NaN）
console.log(Number('32.623'));  //32.623
console.log(Number('-23.000'));  //-23
console.log('-32.56' * 2.1);    //-68.376
console.log('53.2' / 0);    //  Infinity
console.log('+23.51' - '-0.51');    //24.020000000000003
console.log('23.51' - '0.51');  //23

转换成布尔型

Boolean()
代表空、否定的值会被转换成 false，如’’、0、NaN、null、undefined，其他的会转换成 true

var x;
console.log(Boolean('23sd'));   //true
console.log(Boolean(parseFloat('23gsdf'-'sdf'))); //false  parseFloat('23gsdf'-'sdf') 得到的是 NaN
console.log(Boolean(0));    //false
console.log(Boolean(null));    //false
console.log(Boolean(x));    //false
console.log(Boolean(''));    //false
console.log(Boolean('0'));    //true

计算年纪

var year = prompt('输入出生年份，小鬼！');
age = 2021 - year + 1;  //year 是字符串型，这里隐式转换成数字型
alert('年纪：'+age+'虚岁');

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);//stringvar age = 15;alert(typeof age);//numbervar flag = true;alert(typeof flag);//booleanvar a;//undefinedalert(typeof a);var b = null;alert(typeof b);//objectvar arr = [1,2,3];//objectalert(typeof arr);var user = {name:'xiaoge',age:18};alert(typeof user);//objectalert(typeof console.log());//undefinedvar say = function () {alert(name+'很帅');};alert(typeof say);//functionalert(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（JS）（一）相关推荐

JavaScript(js)/上
JavaScript(js) ECMA-----定义的基础语法 DOM------document object model BOM------Browser object model Jav ...
ie6 javascript js 缺少标识符总结(转载)
转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...
asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码，1，使用JavaScript js文件，验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在复制代码代码如下: var ajax = function(option) { va ...
JavaScript JS 如何定义多行文本
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...
JavaScript(JS) date.getDay()
Date对象是JavaScript语言内建的数据类型.使用新的Date()创建日期对象.本文主要介绍JavaScript(JS) date.getDay() 方法. 原文地址:JavaScript(J ...
JavaScript js如何代码加密绑定域名
(function(){for(var c=location.host,a="",b=0;b<c.length;b++)a+=c[b].charCodeAt(0);if(&q ...
java web之javascript(js)解析
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似是一 ...
JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
JavaScript(JS) string.italics( )
String对象允许你处理一系列字符;它用许多辅助方法包装Javascript的字符串原始数据类型.当JavaScript在字符串原语和字符串对象之间自动转换时,可以在字符串原语上调用string对象 ...
JavaScript(JS) Number.NaN
Number对象表示数字日期,可以是整数也可以是浮点数.通常,不需要担心Number对象,因为浏览器会自动将Number字面量转换为Number类的实例.本文主要介绍JavaScript(JS) Nu ...

JavaScript（JS）（一）

文章目录

注

JavaScript基础知识

JavaScript作用：

JavaScript写在哪里

写在script标签里

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

输入输出语句

JS一些注意事项

变量

声明变量

全局变量、局部变量

特殊情况

JS修改元素内容

JS获取元素

案例

标识符、关键字、保留字

JavaScript简单事件

JS的基础事件

操作标签属性

JS修改样式

数据类型

为什么需要数据类型

JS的数据类型

Number类型

String类型

Boolean类型

Undefined类型

Null类型

字面量

数据类型转换

其他转字符串

字符串转数值

转换成布尔型

计算年纪

Object类型

引用类型

Object类型

Array类型

Function类型

案例

练习

JavaScript（JS）（一）相关推荐

最新文章

热门文章