JS（JavaScript）控制网页的行为。JS是互联网中最流行的脚本语言，网页、小程序、app等。
1.JS是脚本语言。
2.js是轻量级的编程语言。
3.JS是可插入HTML页面的代码。
4.所有现代浏览器均可执行JS代码
JS代码可以借助script标签放到head或者body标签中。

JS有两种引入方式

<body><!-- 第一种js引入方式 --><script type="text/javascript">// js代码注释（单行注释）/*js代码注释的多行注释*/// document --> 指代HTML// write --> 写入document.write("<h1>这是一个标题</h1>")document.write("<p>这是一个段落</p>")</script><!-- 第二种js引入方式 --><script type="text/javascript" src="js/demo1.js"></script>
</body>

以下为代码示例

修改span标签内容，
1)先加入点击事件onclick，
2)确定位置：document.getElementById(‘name’)，固定写法，我们记住就好
3)设置标签中的文本内容：添加 innerText
4)设置内容为document.getElementById(‘info’).value，第一个input.

<span>请输入姓名：</span><span id="name">张三丰</span>
<input type="text" name="" id="info">
<!-- onclick -- 点击事件 -->
<input type="submit" value="提交"
onclick="document.getElementById('name').innerText = document.getElementById('info').value">

同理，我们修改图片时需要加 src，修改样式时需要加 style 。

<img src="./img/1.png" alt="" id="photo">
<input type="submit" value="更改图片"
onclick="document.getElementById('photo').src = './img/2.png'"><p id="style">段落</p>
<input type="submit" value="华丽的"
onclick="document.getElementById('style').style = 'color:pink;font-size:20px;'">
<input type="submit" value="朴素的"
onclick="document.getElementById('style').style = ''">

效果如图

图1 朴素

图2 华丽

在JS中插入html代码

<script type="text/javascript">titles = ['四川','云南','贵州','湖北']for (x in titles){title = titles[x]html_str = "<span id='one'>" + title + "</span><span>|</span>"document.write(html_str)}document.getElementById('one').style = 'color:red;'
</script>

通过前面几个代码，我们对JS的作用更为了解，接下来我详细地介绍关于JS的一些基础知识。

1.定义变量

变量名 = 变量值(全局变量)
var 变量名 = 值 (函数中的局部变量)
let 变量名 = 值（{}中的局部变量）
const 变量名 = 值（常量）

2.运算符

数学运算符：+、-、*、/、%、**
比较运算符：>、<、>=、<=、==、!=、===、!==
赋值运算符：=、+=、-=、*=、/=、**=、%=
逻辑运算符：&&（逻辑与）、||（逻辑或运算）、!(逻辑非运算)

3.分支结构

单分支

if(条件语句){代码块
}else{代码块
}

多分支

 if(条件){代码块 }else if(条件){代码块 }else if(条件){代码块}else{}

else可以省略不写
三目运算符

条件?结果1:结果2 - 条件成立，结果1；反之，结果2
例如：console.log(age >= 18?'成年':'未成年')

4.循环

for-in循环

for(变量 in 序列){代码块
}

while循环

while(条件语句){代码块
}

传统for循环

for(表达式1;表达式2;表达式3){代码块
}

传统for循环改while循环

表达式1
while(表达式2){代码块表达式3
}

5.函数

定义：

将重复的代码封装起来，以便重复调用。function 函数名(形参列表){函数体
}

调用

函数名(实参列表)

作用：

1.降低代码的冗余度。
2.将执行某一功能的代码封装起来，更容易让人理解。

测试一下掌握程度吧！

使用while循环输出 0~100内所有3的倍数

i = 1
while(i <= 100){if(i % 3 === 0){console.log(i)}i += 1
}

使用循环计算1*2*3*4*…*10的结果

i = 1
j = 1
while(i <= 9){i += 1j *= i
}
console.log(j)

统计一个字符串中数字的个数(使用函数进行封装)

function num_str(str){tot = 0for(i in str){if(str[i] >= 0 && str[i] <= 9){tot += 1}}console.log(tot)
}
num_str('woai1sdfgh876543223')

计算所有学生平均分

stu = [{name: '大黄', age: 27, score: 60},{name: '小明', age: 18, score: 89},{name: '张三', age: 23, score: 92},{name: '小花', age: 20, score: 71},{name: '小红', age: 30, score: 84}
]
b = 0
for(x in stu){a = stu[x].scoreb+= amean = b / 5
}
console.log(mean)

求斐波那契数列列中第n个数的值:1，1，2，3，5，8，13，21，34… （这儿的n可以是任意正整数，可以通过输入来确定）

function n_val(n){if(n === 1 | n === 2){console.log(1)}else{f1 = 1f2 = 1for(i=3;i<=n;i++){f = f1 + f2f1 = f2f2 = f}return console.log(f2)}
}
n_val(1),n_val(2),n_val(3),n_val(4),n_val(5),n_val(6)

小试牛刀——JS基础相关推荐

构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...
构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
前端面试题目汇总摘录（JS 基础篇 —— 2018.11.01更新）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
js基础--数据类型检测的相关知识
欢迎访问我的个人博客:www.xiaolongwu.cn 前言最近工作有点忙,好几天都没更新技术博客了. 周末起床打开有道云笔记,发现自己的博客todolist里躺了一堆只有名字的文件. 话不多说, ...
【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

小试牛刀——JS基础