javaScript

JavaScript是运行在浏览器上的.功能就是控制页面和用户之间进行交互~~现在JavaScript俨然就成了前端的一哥!!

js的语法内容

通过浏览器开发者工具 console

js的书写位置

1.内联JS：写到html里面

    <div onclick="console.log('hello')">hello</div>    onclick  点击事件

2.内部js：写到HTML

<div >hello</div><script>var div=document.querySelector("div");div.onclick=function(){console.log("hello");}</script>

3.外部js：写在单独文件通过

 <div > hello</div><script src="0607.js">    </script>

JS的执行顺序和在HTML中的出现顺序密切相关.和是否是外部JS/内部JS无关.
script标签，一旦使用src属性,标签内部的JS就不会执行了~~

JS的基本语法

变量、类型

使用var关键字表示这是一个变量~
这个变量的类型是在赋值/初始化的时候确定的.
num的类型就是number
s的类型就是string

变量的类型会随着赋的值的类型变化动态类型 js python ruby php

<script>var num=10;var s="hello";</script>

js在进行一些运算时会进行隐式转换boolen转换为0/1 弱类型

java go 静态强类型

python 强类型动态

js php 动态弱类型

c静态弱类型

动态类型小程序开发更灵活

静态类型大程序接口之间相互约束多人开发

let num=1；
减少了var的bug    有作用域   不能够重复定义
num=1  省略关键字就变成全局变量
let num=null；
let num=undefine；

js的类型

boolen number string object（对象）

typeof查看变量的类型 null是object undefined 就是单独类undefined

条件语句

let num=10;
if（num<20）{
console.log("num<20");
}else{
console.log("num>=20");
}if中的条件不一定是boolen    0  null  undefined   ‘’ 都是false

js字符串可以直接比较==

java中比较类型（instanceof）

**循环语句 **类似java

let n=1;
while（n<10）{
console.log(n);
n++;
}for(let num=1;num<10;num++){
console.log(n);
}

数组

let arr=[1,'hello',true];
let arr2=new Array(10);
允许不同类型的元素
arr.length  获取长度  长度可以修改
多出来的长度会填充undefined
下标越界不会产生异常
如果下标是负数或者是字符串, 此时相当于给数组对象添加了新的属性～(新增了一个键值对进去)
插入元素   尾插
arr.push(20);

函数

函数定义
function hello（num）{
consonle.log(num);  函数支持多种类型
}
函数调用
hello（100）；
NaN   not  a number

a ll b整个表达式的值:
如果a为真,整个表达式就返回a (而不是true)
如果a为假,整个表达式就返回b的值(也不是boolean)

JS是为数不多的几个两个整数相除,结果是小数的编程语言~~

匿名函数类似匿名类 lambda表达式

（function （num）{
consonle.log(num);  函数支持多种类型
}）（）；匿名函数自调用let fun=function（）{   函数表达式
consonle.log(num);
}
fun（）；

对象

js中不需要类直接创建对象不支持继承动态封装不是面向对象的语言都是object类型

使用构造函数

创建对象, 通过构造函数来创建// function Cat(name, color, type) {//     this.name = name;//     this.color = color;//     this.type = type;//     this.eat = function (food) {//         console.log("小猫在吃" + food);//     }// }// let cat = new Cat('小黑', '白色', '中华田园猫');

JSON不是一个和编程语言强相关的东西.
仅仅是一种字符串的格式.各种语言都可以使用JSON这种格式. JSON格式是基于JS对象的格式发展出来的~~
JSON是目前一种非常常见的数据交换格式~~
由于JSON仅仅是字符串,可以被多种语言都去使用.JSON就可以用于网络通信,也可以用于跨语言调用～~

let str = JSON.stringify(cat2); cat2转换为json格式字符串

DOM API 文档对象模型

事件：用户的操作移动鼠标点击鼠标刷新页面调整窗口大小

处理事件的方式

在html标签中通过onXXX属性进行捕获

onXXX属性的值就要对应到一个具体的函数当该事件触发了，就会自动调用对应的函数~~
```
<div onclick="clickDiv()">hello</div>
<script>
// 回调函数~~function clickDiv() {console.log("hello");}
</script>
```

先获取dom对象

 <div >hello</div>
<script>
// 回调函数~~function clickDiv() {console.log("hello");}// 先获取到页面上的 div 对象let divTag = document.querySelector("div");// 此处的代码, 也不是立刻要调用 clickDiv, 而是把这个函数赋值给 onclick 属性// 还是由浏览器决定何时进行调用. (clickDiv 仍然是一个回调函数)divTag.onclick = clickDiv;
</script>

先获取对象接下来addEventListener的方式来进行

 <div >hello</div>
<script>
// 回调函数~~function clickDiv() {console.log("hello");}// 先获取到页面上的 div 对象let divTag = document.querySelector("div");// divTag.addEventListener("click", clickDiv);
</script>

选中对象

document.querySelector 选中多个对象的时候只返回第一个标签

document.querySelectorAll 选择多个对象是一个数组

let buttons = document.querySelectorAll("button");for (let i = 0; i < buttons.length; i++) {buttons[i].onclick = clickDiv;}for (let button of buttons) {button.onclick = clickDiv;}for (let i in buttons) {buttons[i].onclick = clickDiv;}

getElementByld / getElementByClass / 早期API

修改元素内容 innnerHTML

 <div>0</div><button onclick="add()">+</button> <script>function add() {// 先获取到 div 内部的内容let div = document.querySelector('div');let num = parseInt(div.innerHTML);   //div.innerhtml   得到stringnum += 1;div.innerHTML = num;console.log(div.innerHTML);}</script>

修改元素属性

  <script>
function changeHref() {let a = document.querySelector('a');a.href = 'http://www.sogou.com';console.log(a.href);}          function changeSrc() {let img = document.querySelector('img');if (img.src.indexOf('aaa/rose.jpg') >= 0) {img.src = 'aaa/xiaojiejie.jpg'} else {img.src = "aaa/rose.jpg";}}</script>

修改样式

1.修改行内样式修改style 属性即可

 <script>function growUp() {let img = document.querySelector('img');let width = parseInt(img.style.width);width += 50;console.log(width);// 设置这个属性的时候一定要带上单位~ 如果没单位, 就会失效img.style.width = width + 'px';}</script>

2.修改元素css类名

获取dom对象通过 classname属性设置元素css类名

<style>div {width: 100%;height: 500px;}.light {background-color: #fff;color: #000;}.dark {background-color: #000;color: #fff;}</style><div class="light">这是内容</div>
<button onclick="turnOn()">关灯</button>
</script>function turnOn() {// 1. 获取到元素let div = document.querySelector('div');let button = document.querySelector('button');// 2. 通过 className 决定如何切换样式if (div.className == "light") {div.className = "dark";button.innerHTML = "开灯";} else {div.className = "light";button.innerHTML = "关灯";}
}
</script>

// 通过 JavaScript 把 ul 中已经存在的 li 给删掉function removeLi() {// 1. 先选中元素let ul = document.querySelector('ul');let li = document.querySelector('li');// 2. 进行删除操作ul.removeChild(li);}// removeLi();// 通过 JavaScript 往 ul 中添加几个 li 元素function addLi(content) {// 1. 先创建出一个 li 标签let li = document.createElement('li');li.innerHTML = content;console.log(li);// 2. 把新创建好的标签给挂到 DOM 树上let ul = document.querySelector('ul');ul.appendChild(li);}// addLi("咬人猫");// addLi("阿叶君");// addLi("杨可爱");

表白墙案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>.container {width: 500px;margin: 0 auto;}h1 {text-align: center;color: #060;}.row {display: flex;justify-content: center;}.row {padding: 5px 0;font-size: 18px;}.row span {width: 70px;}button {margin: 10px auto;/* button 默认是一个行内块元素, 类似于 img */display: block;width: 250px;height: 40px;background-color: orange;color: #fff;/* 去掉边框 */border: none;border-radius: 20px;}/* 伪类选择器 *//* 当按钮被点击的时候就会触发该选择器 */button:active {background-color: #666;}.notice {text-align: center;margin-top: 30px;}</style>
</head><body><!-- 版心, 控制内容显示在页面居中位置 --><div class="container"><h1>表白墙</h1><div class="row"><span>谁</span><input type="text"></div><div class="row"><span>对谁</span><input type="text"></div><div class="row"><span>说了</span><input type="text"></div><div><button>提交</button></div><div id="notices"><!-- 这里假设已经有了一条结果了 --><div class="notice">白猫 对 黑猫 说了: 喵</div></div></div><script>// 实现留言动作// 1. 捕捉提交按钮的点击事件let button = document.querySelector('button');button.onclick = function () {// 2. 获取到输入框里面的内容let inputs = document.querySelectorAll('input');let from = inputs[0].value;let to = inputs[1].value;let content = inputs[2].value;if (from == '' || to == '' || content == '') {return;}console.log(from + ", " + to + ", " + content);// 3. 根据内容, 创建出一个 div 对象, 放到最下方的显示区中let div = document.createElement('div');div.innerHTML = from + " 对 " + to + " 说: " + content;div.className = "notice";let notices = document.querySelector('#notices');notices.appendChild(div);// 4. 要清空原来输入框的内容for (let i = 0; i < 3; i++) {inputs[i].value = '';}}</script>
</body>
</html>

猜数字案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 500px;margin: 0 auto;}h1 {text-align: center;color: #060;}.row {display: flex;justify-content: center;padding: 5px 0;}.row .left-span {width: 100px;text-align: center;}.row .right-span {width: 100px;text-align: center;}input {height: 50px;width: 150px;font-size: 20px;line-height: 50px;text-indent: 10px;}#guessButton {height: 50px;width: 50px;}#resetButton {height: 50px;width: 200px;}</style>
</head><body><div class="container"><h1>猜数字</h1><div class="row"><input type="text"><button id="guessButton">猜</button></div><div class="row"><span class="left-span">次数:</span><span class="right-span" id="count">0</span></div><div class="row"><span class="left-span">提示:</span><span class="right-span" id="result"></span></div><div class="row"><button id="resetButton">重置</button></div></div><script>// 0. 页面加载的时候先生成一个随机数 [1-100]// Math.random [0, 1) => [1, 100]// Math.floor 进行向下取整let toGuess = Math.floor(Math.random() * 100) + 1;console.log("toGuess = " + toGuess);// 1. 捕获 button 的点击事件let button = document.querySelector('#guessButton');button.onclick = function () {// 2. 获取到 input 的内容let input = document.querySelector('input');if (input.value == '') {return;}//    转成 整数 再去比较let num = parseInt(input.value);// 3. 拿 input 的内容和随机数进行对比let message = '';if (num < toGuess) {// 提示低了message = '低了';} else if (num > toGuess) {// 提示高了message = '高了';} else {// 猜对了message = '猜对了';// 4. 如果猜对了, 禁止按钮和编辑框//    通过 disabled 属性做出禁止点击和编辑的动作input.disabled = true;button.disabled = true;}// 5. 根据对比结果在页面上给出提示let result = document.querySelector('#result');result.innerHTML = message;// 6. 每点击一次, 都要更新猜的次数let count = document.querySelector('#count');let countNum = parseInt(count.innerHTML);countNum += 1;count.innerHTML = countNum;};// 点击重置按钮, 刷新页面let resetButton = document.querySelector('#resetButton');resetButton.onclick = function () {// 控制页面刷新// 这是一个 BOM APIlocation.reload();};</script>
</body></html>

JavaScript扫盲相关推荐

【扫盲帖】Java、JavaScript、JSP、JScript 的区别与联系
[转自]http://developer.51cto.com/art/200907/140294.htm ==>JavaScript与Java的联系和区别 JavaScript与Java的语法比 ...
史上最全！56个JavaScript的「手写」知识点，扫盲啦！
关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群今天就带着大家来复习一下JavaScript的56个「手写」知识点哦~~~ 大厂手写题 1.实现原生 AJAX 封装 const a ...
JavaScript快速入门（六）——DOM
概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C ...
再探Javascript词法作用域
写在前面的话:每个人都会犯错--有时候'孰能无过,过而能改,善莫大焉',有时候知道自己错了却没有机会更改.其实,错了并不仅仅是错了,做错了,除了及时改正和弥补之外,最重要的是为自己犯的错承担所有责任. ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
OPEN(SAP) UI5 扫盲
1 扫盲什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI) ...
delete 字符数组 []_前端基础扫盲系列长达8000字的数组总结
本文 GitHub github.com/ponkans/F2E 已收录,有一线大厂前端面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习.文末有福利~~ 前言数组是 ...
120分钟React快速扫盲教程
在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...
【扫盲】史上最全的互联网专业词语汇总！
作为一名刚入行不久的互联网新人,时常被各种专业名词搞的晕头转向,公司开会或者行业交流时候没听懂也只能假装呵呵一笑(话说这种呵呵一笑是什么态度!摔!)痛心疾首,小编决定总结近期所有我听过的没听过的互联网 ...

JavaScript扫盲